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
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.
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.
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 :)
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
).
Commented
20/03/2014 às 16:56
function(){alert('foo');
. . .
Commented
20/10/2014 às 17:19
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);
};
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;
})();
(function () { })()
Commented
20/03/2014 às 16:53
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"; }
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
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 */ };
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.
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.
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!).
Commented
20/03/2014 às 16:59
arguments.callee
:P
Commented
20/03/2014 às 17:28
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>