How does this function work inside for?

Question

How does this function work inside for?

Navigation

#1 by (1 votes)
#2 by (0 votes)

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);
    }
}

I'm learning to program, and studying this code I found on the internet, to delete data in the Bank with Javascript and PHP I came across something unknown to me until then. Within for has function that is in parentheses, and when this function is finished, there is the i variable for in parentheses )(i); < Home What does that mean? Home Within my program, if I remove this variable (i) or remove the function , the function stops working. But I can not understand the purpose of these artifacts (function within parentheses and (i) ) in Javascript code.

javascript

asked by anonymous 11.10.2016 / 23:39

2 answers

INSERT command in php is not working [closed] Upload Google Maps without internet - Android [closed]

score 1 · Answer 1

What happens in this case is as follows:

Within the scope of for there is the variable i , which is initialized at 0 and incremented with +1 at each "loop" that occurs because of loop%

for

i

From there, the variable (funciontion(meuParametroMuitoLouco) { ... within the anonymous function becomes the parameter received in the function, not the variable i of i
On the command in parentheses for at the end of the anonymous function it simply executes the function that has just been created anonymously by passing the variable (i) created in the declaration of method i

The reason you do not understand what happens is because of the choice of variable names, which makes the visual separation of the code very confusing, an alternative is to change the name of the variable received as a parameter inside the anonymous function, below:

(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);

Another alternative is to create a function and simply call it inside the for, so that the function is not anonymous, which has the benefit of assisting in the console / browser error log, separating responsibilities, improving code readability , etc, etc, etc, for example:

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);
    }
}

I hope I have helped.

score 0 · Answer 2

The loop for(;;) does not have its own scope, and because of this this function creates a new scope, re-generating i as argument.

The argument i within the scope of this function will remain having the same value, while the value of i of the out scope will be modified by the action of the loop.

The intention is to be able to use the current value of i in scopes within the loop, without losing the same value when that scope is executed, for example:

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