0
var del = document.getElementsByClassName("del");
if (del != null) {
    for (var i=0; i<del.length; i++) {
    (function(i) {
      var id_cliente = del[i].getAttribute('value');
      if (del[i].addEventListener) { del[i].addEventListener("click", function(){confirmaExclusao(id_cliente);}); }
      else if (del[i].attachEvent) { del[i].attachEvent("onclick", function(){confirmaExclusao(id_cliente);} ); }
        }
    )(i);
    }
}

Estou aprendendo a programar, e ao estudar este código que encontrei na internet, para deletar dados no Banco com Javascript e PHP me deparei com algo desconhecido pra mim até então. Dentro do for tem uma function que está entre parenteses, e ao terminar esta função, há a variável i do for entre parenteses >)(i);<

O que isso significa?
Dentro do meu programa, se eu retirar esta variável (i) ou retirar os parenteses da function, a função deixa de funcionar. Mas não consigo entender qual ou quais são os propósitos destes artefatos (função dentro de parenteses e (i)) no código Javascript.

3
  • Uma forma resumida de dizer oq é isso é: É uma função de auto execução. Ele cria um escopo fechado. Por isso q quando vc remove a variavel 'i' ela gera um erro. A um tempo atrás eu fiz uma pergunta semelhante, tem uns links bacana na minha pergunta e nas respostas. De uma olhada: pt.stackoverflow.com/questions/150775/…
    – alan
    Commented 11/10/2016 às 21:48
  • 1
    Está respondido aqui no site mesmo: pt.stackoverflow.com/questions/23785
    – Largato
    Commented 11/10/2016 às 21:50
  • Obrigado galera, ambos me deram uma luz. Mas o que matou minha dúvida de fato foi este artigo que encontrei: goo.gl/CYsFsw. Deixo ai como referência pra quem precisar futuramente. Grande abraço! Commented 11/10/2016 às 22:25

2 Respostas 2

1

O que acontece nesse caso é o seguinte:

  • Dentro do escopo do for existe a variável i, a qual é inicializada em 0 e incrementada com +1 a cada "volta" que ocorre por causa do laço de repetição for
  • Também dentro do escopo do for é criado uma função anônima que recebe o parâmetro que também foi chamado de i por simples acaso do destino, o qual, poderia se chamar qualquer coisa, poderia ser por exemplo (funciontion(meuParametroMuitoLouco) { ...
  • A partir daí, a variável i dentro da função anônima passa a ser o parâmetro recebido na função, e não a variável i do for
  • Sobre o comando entre parêntesis (i) ao final da função anônima o que ele faz é simplesmente executar a função que acabou de ser criada anonimamente passando a variável i criada na declaração do método for

O motivo de você não entender o que acontece é justamente pela escolha dos nomes de variáveis, o que torna muito confusa a separação visual do código, uma alternativa é alterar o nome da variável recebida como parâmetro dentro da função anônima, conforme exemplo abaixo:

(function(indexParaDeletar) {
    var id_cliente = del[indexParaDeletar].getAttribute('value');
    if (del[indexParaDeletar].addEventListener) {
        del[indexParaDeletar].addEventListener("click",
            function() {
                confirmaExclusao(id_cliente);
            }
        );
    } else if (del[indexParaDeletar].attachEvent) {
        del[indexParaDeletar].attachEvent("onclick",
            function() {
                confirmaExclusao(id_cliente);
            }
        );
    }
})(i);

Outra alternativa é criar uma função e simplesmente chamá-la dentro do for, fazendo com que a função não seja anônima, o que tem o benefício de auxiliar no log de erro do console/browser, separar responsabilidades, melhorar legibilidade do código, etc, etc, etc, por exemplo:

function deletar(indexParaDeletar) {
    var id_cliente = del[indexParaDeletar].getAttribute('value');
    if (del[indexParaDeletar].addEventListener) {
        del[indexParaDeletar].addEventListener("click",
            function() {
                confirmaExclusao(id_cliente);
            }
        );
    } else if (del[indexParaDeletar].attachEvent) {
        del[indexParaDeletar].attachEvent("onclick",
            function() {
                confirmaExclusao(id_cliente);
            }
        );
    }
};

var del = document.getElementsByClassName("del");
if (del != null) {
    for (var i=0; i<del.length; i++) {
        deletar(i);
    }
}

Espero ter ajudado.

3
  • Não sei se entendi sua pergunta, mas o objetivo de criar uma função separada, chamando de deletar, por exemplo, é justamente que ela não seja anônima, e nem que possua um escopo "fechado" dentro da execução do for, fazendo com que não seja reutilizável por outros métodos que estejam no mesmo "nível" do for. Sendo assim, função anônima é diferente de escopo fechado. Não sei se respondi tua pergunta. Se eu não consegui responder, consegue perguntar de outra maneira?
    – Marco Blos
    Commented 11/10/2016 às 22:39
  • Acabei removendo para não complicar o espaço dos comentários, mas é basicamente o fiddle de exemplo que o @Sergio postou aqui : pt.stackoverflow.com/questions/23785
    – Largato
    Commented 11/10/2016 às 22:49
  • Entendi, gostei da resposta do @Sergio, se tu quiser remover essa minha explicação aqui embaixo, pelo mesmo motivo que tu removeu a tua pergunta, por mim tudo bem :)
    – Marco Blos
    Commented 11/10/2016 às 22:56
0

O loop for(;;) não tem seu próprio escopo, e por conta disso essa função cria um novo escopo, re-generando o i como argumento.

O argumento i dentro do escopo dessa função permanecerá tendo o mesmo valor, enquanto o valor do i do escopo de fora vai sendo modificado pela ação do loop.

A intenção é poder usar o valor atual do i em escopos de dentro de loop, sem perder o mesmo valor quando esse escopo for executado, por exemplo:

var functions = [];

for (var i = 0; i < 5; ++i)
    (function(i){
        functions.push(function() {
            console.log(i);
        });
    })(i);

for (var fnc of functions)
    fnc();

// 0
// 1
// 2
// 3
// 4

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 .