Понимать область JavaScript в пределах цикла

Question

Следующий фрагмент кода печатает «K» 16 раз.

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {}; 
for (var i=0; i<rest.length; i++) { 
    (function(i){ 
     fns[rest[i]] = function() { 
      console.log(rest[i]); 
     }; 
     fns.K(); 
    })(i); 
} 

Этот фрагмент кода выводит все алфавиты "К", "L" ....... "Y", "Z"

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {}; 
for (var i=0; i<rest.length; i++) { 
    fns[rest[i]] = function() { 
     console.log(rest[i]); 
    }; 
    fns.K(); 
} 

Я новичок в JavaScript, и не совсем понимают, как использование IIFE во втором примере приводит к разному поведению. Может кто-то прояснить?

Answer 1

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {}; 
for (var i=0; i<rest.length; i++) { 
    (function(i){ 
     //the i inside this function is private, it is not the same i from outside, 
     //Any modification to the i from the loop won't affect this one. 
     fns[rest[i]] = function() { 
      console.log(rest[i]); 
     }; 
     fns.K(); 
     // fns[rest[i]](); You should use this if for printing the correct letter 
    })(i); 
} 

Нет IIFE

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {}; 
for (var i=0; i<rest.length; i++) { 
    fns[rest[i]] = function() { //You declare a function for each letter 
     console.log(rest[i]); //This i contains always the current iteration from the loop 
    }; 
    fns.K(); //calls the first function defined, "K" that prints the current iteration 
} 

Answer 2

вопрос вы спросили на самом деле проясняет тему область видимости функции в JavaScript. Это не имеет никакого отношения к циклам.

Хотя JavaScript использует синтаксис блока, область действия определяется функциями. В этом случае существуют две переменные i. Один из них находится внутри функции, а другой - вне его.

var rest = "KLMNOPQRSTUVWXYZ".split(""), fns = {}; 
for (var i=0; i<rest.length; i++) { 
    (function(i){ 
     //the i inside this function is private because of function scope 
     fns[rest[i]] = function() { 
      console.log(rest[i]); 
     }; 
     fns.K(); 
    })(i); 
} 

Answer 3

В первом случае IIFE создаст локальную область на каждой итерации. i решила, что i было передано в IIFE. Следовательно, вызов fns.K() всегда будет устранен до rest[0].

Во втором случае i привязан к петле i. Вызов fns.K() будет вести журнал rest[i], где i - текущее значение i.