45

Sei que são funções que não tem o nome especificado, mas qual a finalidade?

  • É possível recursividade com funções anônimas? Ex: Sequência de Fibonacci.

(function(x, y) {
  alert(x + y);
})(5, 5); // Função para somar duas variáveis

5 Respostas 5

24

Respondendo literalmente à sua pergunta "Como funções anônimas funcionam?":

Funções anônimas são muito importantes para entender alguns dos conceitos do funcionamento da linguagem JavaScript, são funções que não dependem de nomes, somente são declaradas e armazenadas em uma variável.

Esta é uma função anônima: function(){alert('foo');

Uma das melhores práticas para usa-la consiste em criar JavaScript Closures, pois:

"Conhecer JavaScript e não conhecer Closures, é a mesma coisa que conhecer Java e não conhecer Classes."

Por isso é de suma importância o entendimento das Closures e de Funções Anônimas.

Definição de Closures:

Closure em inglês significa encerramento, no sentido de guardar, pôr em um lugar fechado.

Ou seja, seria armazenar uma variável em uma função que pode ter parâmetros ou não. Ela pode retornar um valor e torna-lo imutável, ou então apenas realizar comandos sem retorno.

Explicação com Exemplos:

Veja como funcionaria uma função anônima simples com uma função sem argumentos:

var anonima = function(){ alert('executou') };
anonima(); //executa a função anônima

Agora uma com parâmetro:

var anonima = function(n){ alert(n) };
anonima(2);

Podemos também criar uma closure com funções anônimas, como por exemplo uma soma de dois números:

    var anonima = function(number1){
  return function(number2){ alert(number1+number2) };
};
var closure = anonima(2); //salva na variavel closure a funcao que manda o parâmetro number1
closure(3); //manda o parâmetro number2 e executa a função final

Closures se torna ótimo para guardar em variáveis algumas operações que chamam funções diferentes retornando um resultado de operação ou função.

Outra coisa muito boa das Closures seria a criação de classes encapsuladas, como por exemplo, uma classe de uma Empresa:

function Empresa(nome){
    //privates
    var _funcionarios       = [];
    var _ordenaFuncionarios = function(){
        return _funcionarios.sort();
    }
    //public's
    return {
        adicionaFuncionario: function(funcionario) {
            _funcionarios.push(funcionario);
            //return this;
        },
        meusFuncionarios: function(){
            return _ordenaFuncionarios(_funcionarios).join(", ");
        }
    };
}

E veja como se torna facil adicionar funcionários, e imprimir eles ordenados:

var p = new Empresa("Foo Ltda");
p.adicionaFuncionario("João da Silva");
p.adicionaFuncionario("Maria da Rosa");
alert(p.meusFuncionarios()); //João da Silva, Maria da Rosa.

Repare que você tem "return this" comentado, teste descomentar e assim você vai poder utilizar encadeamento de métodos desta forma:

var p = new Empresa("Foo Ltda");
alert(p.adicionaFuncionario("João da Silva")
    .adicionaFuncionario("Maria da Rosa")
    .meusFuncionarios()); //Joao da Silva, Maria da Rosa

Outra coisa, você pode evitar a criação de variáveis globais utilizando Closures, da seguinte forma:

cor = "azul";

(function(){ //função anônima
    var cor = "#FF0000";
    document.body.style.background = cor; //deixa o fundo da pagina vermelho
})();
alert(cor); //azul

Javascript closures são muito bons para muita coisa, funções anônimas também. Como podes ver, vale a pena dar uma estudada nisso :)

4
  • Acho que você não está entendendo muito bem o que são closures. Ou talvez esteja - a segunda metade da sua resposta descreve closures muito bem. Entretanto, isso que você se refere como "armazenar uma função numa variável" não se trata de closures, mas de "funções de primeira classe". Em outras palavras, uma linguagem pode ter funções de primeira classe mas não possuir escopo léxico - e portanto, não suportar closures.
    – mgibsonbr
    Commented 20/03/2014 às 16:51
  • Você quis dizer que as funções que eu adicionei no início que não eram encapsuladas não são closures? Commented 20/03/2014 às 16:52
  • funcaoInterna é um closure. As duas funções internas a Empresa também são. O resto não. Para ser um closure, a função tem que referenciar alguma variável do escopo léxico acima dela (ex.: quando funcaoInterna acessa number1 - que pertence ao escopo léxico de funcaoExterna).
    – mgibsonbr
    Commented 20/03/2014 às 16:56
  • Tem um typo ali no primeiro exemplo, não? Acho que falta fechar function(){alert('foo'); . . .
    – brasofilo
    Commented 20/10/2014 às 17:19
21

Você pode implementar usando recursividade sim, basta usar a própria variável a qual você atribuiu a função e chamá-la:

var fibonacci = function(num)
{
   if(num==1 || num==2)
       return 1;
   else
       return fibonacci(num-1) + fibonacci(num-2); 
};

jsfiddle

Finalidades de uma função anônima

Passar como se fosse um objeto qualquer

A finalidade de uma função anônima é exatamente a de permitir passá-la como se fosse um objeto qualquer, que você pode atribuir a uma variável, independentemente de haver um nome para a função.

Protegendo variáveis usando uma função anônima

Proteger variáveis contra mal uso, é uma das finalidades que acabou se encontrando para funções anônimas. Seria o equivalente a criar membros privados, como é possível em várias linguagens.

No exemplo do fibonacci, se você quiser proteger a variável usada para atribuir a função, poderia fazer assim:

var fibonacci = (function() {
    var fnc = function(num)
    {
       if(num==1 || num==2)
           return 1;
       else
           return fnc(num-1) + fnc(num-2); 
    };
    return fnc;
})();

Dessa forma, não teria como alterar a dependência interna da função depois desta já ter sido criada. Não será mais possível alterar a variável fnc, pois ela está dentro do contexto da função anônima, cuja referência se perde, logo após chamar a mesma.

Estrutura básica:

var obj = (function() {
    // declarações a serem protegidas
    var a, b, c;
    // retornando um objeto construído a partir de a, b e c
    return obj;
})();
6
  • acho que a questão não é sobre fibonacci mas sobre funções anonimas, o fibonacci foi um exemplo de caso de uso. Commented 20/03/2014 às 15:31
  • 2
    Acho que a questão real era: "Como é possível usar recursão em um método anônimo, já que esta não possui um nome?" Commented 20/03/2014 às 15:38
  • concordo, acho até que valia a edição do titulo :) Commented 20/03/2014 às 15:59
  • Não querendo ser pedante, mas quando você atribui uma função a uma variável ela não deixa de ser anônima? (i.e. você deu um nome pra ela) Sua resposta está tecnicamente correta, mas tudo o que foi descrito aqui seria igualmente possível com funções nomeadas.
    – mgibsonbr
    Commented 20/03/2014 às 16:46
  • 1
    E a parte sobre proteger variáveis dentro de uma função anônima? Eu menciono que a função se perde imediatamente após chamar a mesma... algo do tipo (function () { })() Commented 20/03/2014 às 16:53
14

Em JavaScript, funções são ditas "membros de primeira classe". Isso significa que você pode pode instanciá-las, atribuí-las a variáveis, ou mesmo criá-las dinamicamente em tempo de execução (nota: 99% do tempo eu não recomendo). Cada função instanciada é portando um objeto da classe Function.

Uma função anônima não é muito diferente de uma função nomeada. Essas duas definições são de fato equivalentes:

function foo() { return "bar"; }
var foo = function() { return "bar"; }

Há diferença?

Não. A aparente diferença (como apontado na resposta do @Gabriel Gartz) se dá pelo fato que em JavaScript as definições de variável são trazidas automaticamente pro topo do seu escopo léxico.

Isso significa que quando o interpretador vê:

console.log(naoAnonima()); // 'foo'
console.log(anonima()); // undefined

var anonima = function () {return 'bar';};
function naoAnonima() {return 'foo'; }

Ele automaticamente converte para:

var anonima; // A definição da variável veio pra cima, a atribuição não
function naoAnonima() {return 'foo'; } // A definição da função veio pra cima

console.log(naoAnonima()); // Aqui naoAnonima já está definida
console.log(anonima()); // A variavel anonima existe, mas ainda não aponta pra uma função

anonima = function () {return 'bar';}; // A partir daqui anonima refere-se a uma função

Para que serve?

Nem sempre você precisa de um nome pra sua função. É simples assim! Se você vai usar a função recém definida em um manipulador de eventos, ou num callback para Ajax, etc, não há necessidade de se colocar essa função numa variável/dar um nome pra ela. Apenas crie a função e atribua-a onde for necessário (primeira classe, lembra?).

window.onload = function() { /* essa função não precisa de um nome */ };

É possível recursividade?

Existe um truque mais de interesse teórico do que prático chamado "Y Combinator", que não vou demonstrar aqui, quem tiver interesse aqui tem alguns links explicativos (em inglês). Ele basicamente permite que a recursividade seja implementada sem nenhuma declaração de variável ou função. Ou seja, ao contrário das demais respostas - que "trapaceiam" um pouco, dando um nome pra sua função anônima (!) - essa solução funciona ainda que não exista nenhuma referência pra função em si.

Y(function (fac) {
    return function (n) {
        return n <= 2 ? n : n * fac(n - 1);
    };
})(5); // 120

Mas se essa "trapaça" for admitida (na prática, não existe muito benefício em soluções "espertas" - melhor que sejam claras e eficientes), então para se obter um efeito recursivo numa função anônima basta fazer com que a mesma receba como argumento uma função:

var fat = function(fn, n) {
    if ( n <= 2 )
        return n;
    return n * fn(n - 1);
};

...e passar ela própria como argumento em sua chamada!

fat(fat, 5); // 120

Ou seja, a função não é recursiva (pois você poderia chamá-la passando outra coisa como primeiro argumento), mas ela se comporta de forma recursiva.

1
  • +1 pelo Y combinator Commented 20/03/2014 às 17:28
7

Funções anonimas elas não tem uma identificação no escopo de execução do javascript, porém podem ser atribuídas a variáveis, ganhando tornando-se acessíveis apenas quando esta variável é acessível.

Exemplo:

console.log(naoAnonima()); // 'foo'
console.log(anonima()); // undefined

var anonima = function () {return 'bar';};
function naoAnonima() {return 'foo'; }

console.log(naoAnonima()); // 'foo'
console.log(anonima()); // 'bar'

Como pode ser visto no exemplo, a função anonima ela só está acessível assim que a variável também.

Se você não utilizar o modo estrito (use strict) você pode acessar sim a referencia de uma função anonima através da propriedade arguments.callee exposta no seu contexto.

Exemplo:

function () {
    arguments.callee; // Aqui está referencia pra sua função
};

Utilizando o modo estrito, isso vai te causar uma exceção.

Então se você for implementar o exemplo do fibonnaci, pode declarar primeiro uma variável que vai guardar a referencia da sua função anonima e usa-la dentro da função anonima.

var fib = function (n) {
   if (n <= 2) return 1;
   return fib(n - 1) + fib(n - 2);
};

Neste caso fib existe dentro da função anonima pois quando a função estiver sendo acessada por ela mesmo, a variável já foi atribuída. Permitindo a recursividade.

Uma maneira apenas de exemplo didático do ES3 era usar o arguments.callee para isso:

(function (n) {
   if (n <= 2) return 1;
   return arguments.callee(n - 1) + arguments.callee(n - 2);
})(10); // 55

Repare que não foi atribuída a função a nenhuma variável. Isso é, apos ela ter sido executada e finalizada, ela será marcada pelo garbage collector para ser eliminada, pois nesse caso não existe mais nenhuma referencia para ela.

No ES5 você não tem acesso a propriedade arguments.callee no modo estrito, mas você consegue esconder a função que aplica recursividade dentro de uma função anonima caso não queira expor esta. Exemplo:

(function (n) {
   // fib não está exposto
   return (function fib(n) {
     if (n <= 2) return 1;
     return fib(n - 1) + fib(n - 2);
   })(n);
})(10); // 55

Neste caso mesmo que você de um nome a função anonima, a sua função interna fib é inacessível.

Finalidade:

As funções anonimas existem para agilizar e simplificar a codificação, por exemplo, se você quer isolar um escopo de variáveis, pode simplesmente auto-executar uma função anonima pra isso.

É muito comum no javascript atribuir funções a propriedades ou passa-las como argumento, as funções anonimas simplificam a codificação sendo que você não precisa nomear-las para fazer essas atribuições, deixando seu código mais simples.

3
  • +1 pelo uso de arguments.callee. Embora na prática não seja recomendado, esse foi o único exemplo de função anônima recursiva em todas as respostas (as demais "trapaceavam" um pouco - dando um nome pra função anônima!).
    – mgibsonbr
    Commented 20/03/2014 às 16:59
  • Obrigado @mgibsonbr, coloquei apenas para fins didáticos mesmo, não recomendo o uso. Commented 20/03/2014 às 17:02
  • @mgibsonbr veja minha resposta agora não é mais trapaça e não uso o arguments.callee :P Commented 20/03/2014 às 17:28
3

Encaixa-se também na definição de Funcão de ordem superior em Javascript

Recebem uma ou mais funções como argumentos ou têm uma função como saída. Através delas é possível criar o que são chamadas functions factories que são funções que a partir de outras funções simples são capazes de realizar ações mais complexas. O próprio contexto já nos diz também : Funções sem nome, além disso, ela inclui como principal característica o conceito de recursividade.

<script>

    var n = parseInt(prompt('Entre com a seleção da cor : '));

    (function(n){

        var cor = [
            '#FF0000',
            '#000000',
            '#C9CCCC'
        ];



        for(var i = 0; i < cor.length; i++) {
            document.body.style.background = cor[i + n];
            break;
        }


        if (n >= cor.length)
            alert('Error = Cor da seleção deve ser < ' + cor.length);
        else
            alert('Cor Selecionada : ' + cor[i + n] + ' ');

    })(n);

</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .