Rodrigo Brito

Funções em formato de expressão

Existem duas formas de declaração de função em JS, a function declaration e a function expression.

Function declarations são as funções mais conhecidas, onde é declarada uma função com nome, parâmetros entre parênteses e o corpo da função, como no exemplo abaixo:

function sum(a,b) {
    return a + b;
}

sum(2,3); //5

A function expression segue um formato de criação diferente, onde a função é declarada em uma variável, podendo ser anônima ou nomeada e sua ativação é através da variável. Ex:

const sum = function(a,b) {
    return a + b;
}

sum(2,3); //5

O exemplo acima é uma função anônima, e a variável foi declarada como constante, pois em um uso desta forma não há propósito em alteração da variável.

Hoisting

O cuidado que se deve ter na utilização do formato expression é em relação ao hoisting. Nas funções declaradas, no momento do hoisting elas já ficam completamente definidas na memória, já as expressões, como são variáveis, serão enviadas para a "temporal dead zone". As funções declaradas são definidas no momento do hoisting e as expressões no momento da execução. Para impedir a geração de erros na utilização de functions expressions, a ativação desta deve ser sempre realizada após a sua declaração, sendo extremamente importante esta ordem. Ex:

Arrow Function

Podemos functions expression utilizando arrow functions. A palavra "function" é substituída pelos parâmetros entre parênteses seguidos pela seta (=>) e o corpo da função, caso seja uma única linha, pode ser colocado após a seta diretamente. Ex:

const sum = (a, b) => a + b;

sum(3,2); //5

A utilização das funções no formato expression é uma questão de preferência em relação as declaradas, contudo, como a ativação da expression vem sempre após a sua declaração, a sua utilização força uma codificação de forma mais estruturada e em algumas condições isto se torna mais entendível para nós "humaninhos"! Quando for necessário ativação de funções antes de sua declaração, usa-se a function declaration.

Vantagem

Uma vantagem de utilizar a function expression é que ela não vaza para o escopo do objeto window, ao contrário das declaradas, diminuindo as chances de conflitos com métodos deste objeto e de outros métodos globais que possam ter o mesmo nome.

Immediately Invoked Function Expression

Antigamente não havia modules em JS, e o que era utilizado para a proteção do escopo era as IIFE - Immediately Invoked Function Expression, um formato de que isola a função e a ativa logo em seguida (por isso invocação imediata). Seu formato consiste em declarar a função dentro de parênteses e utilizar um par destes logo após, com a função padrão de ativação. As variáveis dentro da função ficam fora do escopo global, e as variáveis globais ficam acessíveis dentro da função. Ex:

No exemplo acima, a variável global "language" continuou inalterada e a IIFE utilizou sua variável interna, bem como manteve protegida internamente a variável "root" e esta obteve acesso a variável "phrase" global. Desta forma o escopo da função se manteve isolado. Neste formato também é utilizável arrow function:

Os compiladores ainda transformam modules em IIFE para manter a compatibilidade com navegadores antigos.