Funções

Frontend SELF PT
Nível 35 , Lição 2
Disponível

3.1 Declaração de Funções

Funções são um dos principais blocos de construção no JavaScript. Elas permitem que você organize o código, reutilize lógica e crie estruturas mais complexas. Vamos ver três principais formas de declarar e usar funções: declaração de funções, expressões de função e arrow functions.

Declaração de função é um jeito de criar uma função nomeada que pode ser chamada mais tarde. Tais funções são "elevadas" (hoisted) ao topo de seu escopo, permitindo que sejam chamadas antes mesmo de serem declaradas no código.

Sintaxe:

    
      function name (arguments) {
        // corpo da função
      }
    
  

Exemplo de uso:

JavaScript
    
      // Declaração de função
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Chamada de função
      console.log(greet('Alice')); // Saída: Hello, Alice!
    
  

3.2 Expressões de Função

Expressões de função criam funções anônimas (sem nome) e podem ser atribuídas a uma variável. Tais funções não são "elevadas", então só podem ser chamadas após sua declaração.

Sintaxe:

    
      const name = function (arguments) {
        // corpo da função
      }
    
  

Exemplo de uso:

JavaScript
    
      // Expressão de função

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Chamada de função
      console.log(greet('Bob')); // Saída: Hello, Bob!
    
  

3.3 Arrow Functions

Arrow functions são um jeito mais conciso de declarar funções, que também mantêm o contexto do this do escopo pai. Arrow functions não têm seu próprio this, então são especialmente úteis em manipuladores de eventos e métodos de arrays.

Sintaxe:

    
      const name = (arguments) => {
        // corpo da função
      }
    
  

Se a função recebe um único parâmetro, você pode omitir os parênteses. Se a função retorna uma única expressão, pode-se omitir as chaves e a palavra-chave return.

Exemplo 1: Notação Completa

JavaScript
    
      // Arrow function

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Chamada de função
      console.log(greet('Charlie')); // Saída: Hello, Charlie!
    
  

Exemplo 2: Notação Reduzida

JavaScript
    
      // Arrow function com um parâmetro e uma expressão
      const greet = name => `Hello, ${name}!`;

      // Chamada de função
      console.log(greet('Dana')); // Saída: Hello, Dana!
    
  

3.4 Comparação dos Métodos de Declaração de Funções

Elevação (hoisting):

  • Declaração de funções: funções são elevadas, permitindo que sejam chamadas antes da declaração
  • Expressões de função e Arrow functions: não são elevadas, podem ser chamadas apenas após a declaração

Contexto this:

  • Declaração de funções e Expressões de função: têm seu próprio contexto this
  • Arrow functions: não têm seu próprio this, o contexto é herdado do escopo pai

Facilidade de escrita:

  • Arrow functions: são mais concisas e frequentemente usadas para funções curtas e callbacks
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION