Criando funções através de uma Expressão de Função em JavaScript (Função Anônima)

Por: Angelo Luis Ferreira | 05/09/2019 Acessos: 4.532

Neste tutorial, vamos mostrar como criar uma função através de uma expressão de função. Isto significa que podemos criar uma função atribuída a uma variável. Tal função poderá ser anônima, ou seja, sem qualquer nome.

Observações:

Funções JavaScript são utilizadas para criar pequenos blocos de códigos independentes. Esses blocos podem gerar um resultado (funções com retorno) ou apenas executar uma rotina (funções sem retorno). Sua principal vantagem é condensar um trecho de códigos e torná-lo reutilizável em vários pontos diferentes do documento. Leia Como criar funções com JavaScript.

Expressão de função: É quando criamos uma função que pode ser atribuída a uma variável. A principal diferença entre uma expressão de função e a declaração de uma função é o nome da função que pode ser omitida através de uma função anônima.

Função anônima: Uma função anônima, também conhecida como "lambda function", tem como finalidade permitir passá-la como se fosse um objeto qualquer, que poderá ser atribuída a uma variável, independente de haver um nome para a função. Proteger variáveis contra mal uso, é uma das finalidades que acabou se encontrando para funções anônimas.

Leia também: O que são Arrow Functions e como usar no JavaScript 

Expressões de Função

 1. Para criar funções através de uma expressão de função basta atribuir uma ou mais funções a uma variável. Tais funções poderão ser anônimas.

const variavel = function(parâmetros){ 
     
       // códigos da função
}

Obs 1: Você pode adicionar quantos parâmetros quiser, desde que cada um esteja separado por vírgula e que não tenham a mesma denominação. Mesmo se não utilizarmos parâmetros, deverá haver o parênteses.

2. Uma das finalidades das funções anônimas é proteger variáveis contra o mal uso. Desta forma podemos proteger a variável usada para atribuir a função da seguinte forma:

const variavel = (function() {

  // declarações protegidas

})();

Exemplos

Abaixo vamos criar uma função nas 3 formas: através de uma declaração de função, através de uma expressão de função e através de uma variável protegida por uma função anônima. Todas elas são equivalentes e retornaram o mesmo valor.

1.1. Exemplo de uma Declaração de Função:

function calcular(a, b) {
  x = a * b;
  document.getElementById("demo").innerHTML = x;
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

1.2. Exemplo de Expressão de Função com função anônima:

const calcular = function(a, b) {
  x = a * b;
  document.getElementById("demo").innerHTML = x;
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

1.3. Exemplo de variável protegida por uma função anônima:

const calcular = (function() {
    const calc = function(a, b) {
  	x = a * b;
  	document.getElementById("demo").innerHTML = x;
    }
    return calc;
})();

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

Documentação Oficial

1. [Funções - definições básicas] » Sobre criação e exemplos de 'funções criadas pelo usuário.