Como Definir Funções em JavaScript

Introdução

Uma função é um bloco de código que executa uma ação ou retorna um valor. Funções são códigos personalizados definidos por programadores que são reutilizáveis, e podem, portanto, tornar seus programas mais modulares e eficientes.

neste tutorial, vamos aprender várias maneiras de definir uma função, chamar uma função, e usar parâmetros de função em JavaScript.

definir uma função

as funções são definidas, ou declaradas, com a palavra-chave

. Abaixo está a sintaxe para uma função em JavaScript.,

function nameOfFunction() { // Code to be executed}

a declaração começa com ofunction palavra-chave, seguido pelo nome da função. Os nomes das funções seguem as mesmas regras que as variáveis – elas podem conter letras, números, underscores e sinais de dólar, e são frequentemente escritas em caso de camelo. O nome é seguido por um conjunto de parênteses, que podem ser usados para parâmetros opcionais. O código da função está contido em parênteses curly, assim como uma declaração para ou uma declaração se.,

no nosso primeiro exemplo, faremos uma declaração de função para imprimir uma declaração de saudação para o console.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Aqui temos o código para imprimir Hello, World! para o console contido dentro de greet() função. No entanto, nada vai acontecer e nenhum código será executado até que nós invocamos, ou chamar a função. Você pode invocar uma função escrevendo o nome da função seguida pelos parênteses.

// Invoke the functiongreet();

Agora vamos juntá-los, definindo a nossa função e invocando-A.saudação.,js

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

With the call for greet();, the function will run and we will receive the Hello, World! as the program’s output.

Output
Hello, World!

Agora temos o nosso greet() código contido em uma função, e pode reutilizá-la quantas vezes quisermos.usando parâmetros, podemos tornar o código mais dinâmico.

Parâmetros de Função

nossa greet.js arquivo, criamos uma função básica que imprime Hello, World para o console., Usando parâmetros, podemos adicionar funcionalidades adicionais que tornarão o código mais flexível. Parâmetros são entradas que passam para funções como nomes e se comportam como variáveis locais.

Quando um usuário entra em uma aplicação, podemos querer que o programa para saudá-los pelo nome, em vez de apenas dizer: “Olá, Mundo!”.

vamos adicionar um parâmetro em nossa função, chamado name, para representar o nome da pessoa que está sendo recebida.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

O nome da função é greet, e agora temos um único parâmetro dentro dos parênteses. O nome do parâmetro segue as mesmas regras que nomear uma variável. Dentro da função, em vez de uma string estática constituída por Hello, World, temos uma string literal de modelo contendo nosso parâmetro, que agora está se comportando como uma variável local.

Você notará que não definimos nosso parâmetro name em qualquer lugar. Atribuímos-lhe um valor quando invocamos a nossa função., Assumindo que o nosso utilizador se chama Sammy, vamos chamar a função e colocar o nome de utilizador como argumento. The argument is the actual value that gets passed into the function, in this case it is the string "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

O valor de "Sammy" está sendo passado para a função através de name parâmetro. Agora cada vez que name é usado em toda a função, ele representará o valor "Sammy". Aqui está o código completo.greetSammy.,js

quando executarmos o programa acima, vamos receber a seguinte saída.

Output
Hello, Sammy!

Agora temos um exemplo de como uma função pode ser reutilizada. Em um exemplo do mundo real, a função puxaria o nome de usuário de um banco de dados em vez de fornecer diretamente o nome como um valor de argumento.

além dos parâmetros, as variáveis podem ser declaradas dentro das funções. Estas variáveis são conhecidas como variáveis locais, e só existirão dentro do escopo de seu próprio bloco de funções., O escopo variável determina a acessibilidade das variáveis; as variáveis que são definidas dentro de uma função não são acessíveis fora da função, mas podem ser usadas tantas vezes quanto a sua função é usada ao longo de um programa.

retornando valores

Mais de um parâmetro pode ser usado em uma função. Podemos passar vários valores em uma função e retornar um valor. Nós criaremos uma função para encontrar a soma de dois valores, representados por x e .

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

No programa acima, definimos uma função com os parâmetros x e y e, em seguida, passou os valores de 9 e 7 para a função. Quando executarmos o programa, vamos receber a soma desses números como saída.

Output
16

neste caso, com 9 e 7 passado para o sum() função, o programa retornou 16.,

Quando a palavra-chave

é usada, a função deixa de ser executada e o valor da expressão é devolvido. Embora neste caso o navegador irá exibir o valor na consola, não é o mesmo que usar

console.log()para imprimir para a consola. Invocar a função irá produzir o valor exatamente onde a função foi invocada. Este valor pode ser usado imediatamente ou colocado em uma variável.

expressões de função

na última seção, nós usamos uma declaração de função para obter a soma de dois números e retornar esse valor., Também podemos criar uma expressão de função atribuindo uma função a uma variável.

usando o nosso mesmo add exemplo de função, podemos aplicar directamente o valor devolvido a uma variável, neste caso sum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

sum constante é uma função. Podemos tornar esta expressão mais concisa, transformando-a numa função anônima, que é uma função sem nome., Atualmente, nossa função tem o nome add, mas com expressões de função não é necessário nomear a função e o nome geralmente é omitido.expressão anónima.js

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

neste exemplo, nós removemos o nome da função, o que foi add, e transformou-o em uma função anônima. Uma expressão de função nomeada pode ser usada para auxiliar na depuração, mas geralmente é omitida.,

funções de seta

até agora, já percorremos a forma de definir funções usando a palavra-chave function. No entanto, há um método mais recente e mais conciso de definir uma função conhecida como expressões da função flecha como do ECMAScript 6. As funções de seta, como são comumente conhecidas, são representadas por um sinal igual seguido por um sinal maior que: =>.

As funções de seta são sempre funções anônimas e um tipo de expressão de função. Podemos criar um exemplo básico para encontrar o produto de dois números.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

em Vez de escrever a palavra-chave function, usamos o => seta para indicar uma função. Caso contrário, ele funciona de forma semelhante a uma expressão de função regular, com algumas diferenças avançadas que você pode ler sobre as funções Arrow na rede de desenvolvedores Mozilla.

no caso de apenas um parâmetro, os parênteses podem ser excluídos. Neste exemplo, estamos quadrando x, o que requer apenas um número a ser passado como um argumento., Os parênteses foram omitidos.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Nota: Em caso de inexistência de parâmetros de um conjunto de parênteses vazio () é necessário a seta funções.

com estes exemplos em particular que consistem apenas de um ID

, as funções de seta permitem que a sintaxe seja ainda mais reduzida. Se a função é apenas uma única linhareturn, tanto os parênteses curados quanto oreturna instrução pode ser omitida, como visto no exemplo abaixo.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

todos os três tipos destes tipos de sintaxe resultam na mesma saída. É geralmente uma questão de preferência ou padrões de codificação da empresa para decidir como você vai estruturar suas próprias funções.

conclusão

neste tutorial, cobrimos declarações de funções e expressões de função, retornando valores de funções, atribuindo valores de função para variáveis, e funções setas ES6.as funções

são blocos de código que retornam um valor ou executam uma ação, tornando os programas escaláveis e modulares.