Criando funções em JavaScript

Uma função é um pedaço de código reutilizável que é executado quando você o invoca. As funções permitem que você reutilize o código, tornando-o mais modular e fácil de manter.

Existem várias maneiras de criar funções em JavaScript. Aqui você aprenderá as diferentes maneiras de criar funções e como usá-las.

Declarações de função: o caminho direto

Uma maneira de criar funções em JavaScript é por meio de declarações de função. Uma declaração de função é uma função em JavaScript que segue a sintaxe abaixo.

funçãofunctionName(parâmetros) {
// código vai aqui...
retornar"Esta é uma declaração de função";
}

Os componentes do bloco de código acima incluem:

• O função palavra-chave: Esta palavra-chave declara uma função.
• functionName: Este é o nome da função. Na prática, deve ser o mais descritivo e significativo possível, indicando o que a função faz.
instagram viewer
• parâmetros: Isso representa os parâmetros da função. Os parâmetros são uma lista opcional de variáveis ​​que você pode passar para uma função ao chamá-la.
• O corpo da função: contém o código que a função executará quando você a chamar. É cercado por chaves {} e pode conter qualquer código JavaScript válido.
• O retornar instrução: Esta instrução interrompe a execução de uma função e retorna o valor especificado. No caso acima, chamar a função retornaria a string “Esta é uma declaração de função”.

Por exemplo, a declaração da função abaixo usa três números como parâmetros e retorna sua soma.

funçãoadicionar três números(a, b, c) {
retornar a + b + c;
}

Para chamar uma declaração de função em JavaScript, escreva o nome da função seguido por um conjunto de parênteses (). Se a função receber algum parâmetro, passe-os como argumentos entre parênteses.

Por exemplo:

addThreeNumbers(1, 2, 3) // 6

O bloco de código acima chama o addThreeNumber funções e passa 1, 2 e 3 como argumentos para a função. Se você executar esse código, ele retornará o valor 6.

içar JavaScript declarações de função, o que significa que você pode chamá-las antes de defini-las.

Por exemplo:

isHoisted(); // A função é içada
funçãoisHoisted() {
console.registro("A função é elevada");
retornarverdadeiro;
}

Conforme mostrado no bloco de código acima, chamando isHoisted antes de defini-lo não lançaria um erro.

Expressões de funções: funções como valores

Em JavaScript, você pode definir uma função como uma expressão. Você pode atribuir o valor da função a uma variável ou usá-la como argumento para outra função.

Elas também são conhecidas como funções anônimas, pois não têm nomes e você só pode chamá-las a partir da variável à qual as atribuiu.

Abaixo está a sintaxe para uma expressão de função:

const functionName = função () {
retornar"Expressão de função";
};

Para chamar uma expressão de função em JavaScript, escreva o nome da variável que você atribuiu à função seguido por um conjunto de parênteses (). Se a função receber algum parâmetro, passe-os como argumentos entre parênteses.

Por exemplo:

funçãoNome(); // expressão de função

As expressões de função são úteis ao criar funções que são executadas em outras funções. Exemplos típicos incluem manipuladores de eventos e seus retornos de chamada.

Por exemplo:

botão.addEventListener("clique", função (evento) {
console.registro("Você clicou em um botão!");
});

O exemplo acima usou uma expressão de função que leva um evento argumento como um retorno de chamada para o addEventListener função. Você não precisa chamar a função explicitamente ao usar uma expressão de função como retorno de chamada. Ele é chamado automaticamente por sua função pai.

No caso acima, quando o event listener recebe um clique evento, ele chama a função callback e passa o evento objeto como um argumento.

Ao contrário das declarações de função, as expressões de função não são suspensas, então você não pode chamá-las antes de defini-las. Tentar acessar uma expressão de função antes de defini-la resultará em um ReferenceError.

Por exemplo:

isHoisted(); // ReferenceError: Não é possível acessar 'isHoisted' antes da inicialização
const isHoisted = função () {
console.registro("A função é elevada");
};

Funções de seta: compacta e limitada

O ES6 introduziu uma abreviação para escrever funções anônimas em JavaScript chamadas de funções de seta. Eles têm uma sintaxe concisa que pode tornar seu código mais legível, especialmente ao lidar com funções curtas de uma única linha.

Ao contrário de outros métodos de criação de funções, as funções de seta não requerem o função palavra-chave. Uma expressão de função de seta consiste em três partes:

• Um par de parênteses (()) contendo os parâmetros. Você pode omitir os parênteses se a função tiver apenas um parâmetro.
• Uma flecha (=>), que consiste em um sinal de igual (=) e um sinal de maior que (>).
• Um par de chaves contendo o corpo da função. Você pode omitir as chaves se a função consistir em uma única expressão.

Por exemplo:

// Parâmetro único, retorno implícito
const functionName = parâmetro =>console.registro("Função de seta de parâmetro único")
// Múltiplos parâmetros, retorno explícito
const functionName = (parâmetro_1, parâmetro_2) => {
retornar"Função de seta de vários parâmetros"
};

Quando você omite as chaves, a função de seta retorna implicitamente a expressão única, portanto, não há necessidade do retornar palavra-chave. Por outro lado, se você não omitir as chaves, terá que retornar explicitamente um valor usando o método retornar palavra-chave.

As funções de seta também têm uma esse ligação em comparação com funções regulares. Em funções regulares, o valor de esse depende de como você chama a função. Em uma função de seta, esse está sempre vinculado ao esse valor do escopo ao redor.

Por exemplo:

const foo = {
 nome: "Dave",
 saudar: função () {
 setTimeout(() => {
console.registro('Olá, meu nome é ${esse.nome}`);
 }, 1000);
 },
};
foo.greet(); // Registra "Olá, meu nome é Dave" após 1 segundo

No exemplo acima, a função de seta dentro do saudar método tem acesso a este nome, mesmo que a setTimeout a função o chama. Uma função normal teria seu esse ligado ao objeto global.

Como o nome indica, uma função invocada imediatamente (IIFE) é uma função que é executada assim que é definida.

Aqui está a estrutura de um IIFE:

(função () {
// código aqui
})();
(() => {
// código aqui
})();
(função (param_1, param_2) {
console.log (param_1 * param_2);
})(2, 3);

Um IIFE consiste em uma expressão de função dentro de um par de parênteses. Siga-o com um par de parênteses fora do invólucro para invocar a função.

Você pode usar IIFEs para criar escopos, ocultar detalhes de implementação e compartilhar dados entre vários scripts. Eles já foram usados ​​como sistema de módulos em JavaScript.

Criando uma função de várias maneiras diferentes

Entender como criar funções em JavaScript é crucial. Isso é verdade para uma função básica que executa uma computação simples ou uma função sofisticada que interage com outras partes do seu código.

Você pode usar as técnicas discutidas acima para criar funções em JavaScript e estruturar e organizar seu código. Selecione a abordagem que melhor se adapta às suas demandas, pois cada uma tem vários benefícios e aplicações.