Criando funções em JavaScript

JavaScript é uma linguagem incomum, com muitas complexidades. Naturalmente, oferece mais de uma maneira de criar uma função.

Uma função é um trecho de código reutilizável que é executado quando você a invoca. As funções permitem reutilizar o código, tornando-o mais modular e mais 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: a maneira direta

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

function functionName(parameters) {
  // code goes here...
  return "This is a function declaration";
}

Os componentes do bloco de código acima incluem:

• A palavra-chave function: 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.
• parâmetros: representa os parâmetros da função. 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. Ele é cercado por chaves {} e pode conter qualquer código JavaScript válido.
• A instrução return: 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 recebe três números como parâmetros e retorna sua soma.

function addThreeNumbers(a, b, c) {
  return 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 aceitar algum parâmetro, passe-os como argumentos entre parênteses.

Por exemplo:

addThreeNumbers(1, 2, 3) // 6

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

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

Por exemplo:

isHoisted(); // Function is hoisted
function isHoisted() {
  console.log("Function is hoisted");
  return true;
}

Conforme mostrado no bloco de código acima, chamar isHoisted antes de defini-lo não geraria um erro.

Expressões de Função: Funções como Valores

Em JavaScript, você pode definir uma função como uma expressão. Você pode então atribuir o valor da função a uma variável ou usá-lo 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 = function () {
  return "Function expression";
};

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

Por exemplo:

functionName(); // Function expression

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:

button.addEventListener("click", function (event) {
  console.log("You clicked a button!");
});

O exemplo acima usou uma expressão de função que usa um argumento event como retorno de chamada para a função addEventListener. 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 ouvinte de evento recebe um evento click, ele chama a função de retorno de chamada e passa o objeto event como argumento.

Ao contrário das declarações de função, as expressões de função não são elevadas, portanto 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: Cannot access 'isHoisted' before initialization
const isHoisted = function () {
  console.log("Function is hoisted");
};

Funções de seta: compactas e limitadas

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

Ao contrário de outros métodos de criação de funções, as funções de seta não requerem a palavra-chave function. 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 seta (=>), 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:

// Single parameter, implicit return
const functionName = parameter => console.log("Single parameter arrow function")
// Multiple parameters, explicit return
const functionName = (parameter_1, parameter_2) => {
  return "Multiple parameter arrow function"
};

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

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

Por exemplo:

const foo = {
  name: "Dave",
  greet: function () {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  },
};
foo.greet(); // Logs "Hello, my name is Dave" after 1 second

No exemplo acima, a função arrow dentro do método greet tem acesso a this.name, mesmo que a função setTimeout a chame. Uma função normal teria seu this vinculado ao objeto global.

Expressões de função imediatamente invocadas (IIFEs)

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:

(function () {
  // code here
})();
(() => {
  // code here
})();
(function (param_1, param_2) {
  console.log(param_1 * param_2);
})(2, 3);

Um IIFE consiste em uma expressão de função colocada entre parênteses. Siga-o com um par de parênteses fora do recinto 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 um sistema de módulos em JavaScript.

Criando uma função de muitas maneiras diferentes

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

Você pode usar as técnicas discutidas acima para construir funções em JavaScript e estruturar e organizar seu código. Selecione a abordagem que melhor atende às suas demandas, pois cada uma possui diversos benefícios e aplicações.