Задача по замыканиям. Армия функции?

Question

[Alex_87]

Добрый день! Помочь пояснить задачу, указанную на сайте: https://learn.javascript.ru/closures-usage (Армия функции) Столкнулся с проблемой понимания работы кода:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {
    var shooter = function() { // функция-стрелок
      alert( i ); // выводит свой номер
    };
    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

army[0](); // стрелок выводит 10, а должен 0
army[5](); // стрелок выводит 10...
// .. все стрелки выводят 10 вместо 0,1,2...9

В решении, в пункте "Почему ошибка" сказано: К моменту вызова army[0](), функция makeArmy уже закончила работу. Цикл завершился, последнее значение было i=10 ?
Отсюда и первый вопрос.
1) Функция makeArmy, закончила работы на этой строчки, я правильно понял? var army = makeArmy(); То есть, переменная army не только присвоила функцию но и отработала её?
2) Почему при вызове army[0]() и army[5](); не вызываются соответствующие элементы? Ведь, когда я вызвал console.log(army) мне вышел массив функции.

Тогда почему я не могу обратиться к элементам этого массива?
3) Я не смог понять решение этой задачи. Хоть там их и 3) Помогите в коротко объяснить.
....
Задача - Фильтрация через функцию
https://codepen.io/Alexei_87/pen/vbjrpm?editors=0010
Вопрос описан в самом коде, в комментарии ниже!

Answer 1

[VoidVolker]

После завершения работы функции makeArmy, значение переменной i остается равным 10. Соответственно, все функции в массиве будут выводить текущее значение этой переменной, а не то значение, которое было во время создания функции.
Для более позднего использования любого результата или значения/счетчик, существующего только во время работы цикла, следует создать еще одну переменную:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {
    var shooter = (function(index){ // Вот тут создается еще одна переменная со значением счетчика
        return function() { // функция-стрелок  // Возвращаем функцию, которая использует уже не привязанную к счетчику отдельную переменную
            console.log(index); // выводит свой номер
        };
    })(i); // Передаем текущее значение счетчика в новую функцию, вызывая её
    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

Comments

[Владимир]

или использовать let в 2019 году

[Alex_87]

Я вас очень прошу, ответить на мои вопросы по пунктам, если можно...
1) Ответ
2) Ответ
И т.д.

[Alex_87]

Владимир, Нужно решить задачу, без использование let. Данную тему ещё не изучал и автор полагает изучать, на основе тех знании, что имеются! По сайту learnjavascript можно понять, какие темы уже изучены. Сейчас, я нахожусь в главе - Замыкания

[Владимир]

Alex_87, Выше же ответ написали

[VoidVolker]

1. Нет, переменная не присваивала функцию (переменные сами по себе ничего не присваивают). В данном случае был произведен вызов функции, а результат был помещен в переменную.
2. В массиве находятся функции и они вполне корректно вызываются. Результат всегда один и тот же по той причине, что во всех этих функциях используется одна и та же переменная.
3. В ответе все подробно расписано. Что именно не понятно?

[Alex_87]

Владимир, Мне не ответ нужен, а пояснения! Я понять хочу, как всё работает!

[Владимир]

https://www.ozon.ru/context/detail/id/19677670/
Там хороший раздел про синтаксическую область видимости

[VoidVolker]

Alex_87 Дубль номер три. Что именно не понятно? Я там каждую строчку расписал. Повторюсь еще раз, почему такой результат: переменная i создана во время 0 секунд, далее в цикле эта переменная передается десяти функциям, а в самой переменной в итоге остается число 10. Далее, во время 5 секунд вызывается функция 0, которая возвращает ТЕКУЩЕЕ значение переменной i — число 10. И то же самое делают остальные 9 функций в массиве.
Упрощаю: человек А взял ящик i, положил туда 10 яблок, далее сказал 10 другим людям "дайте мне ящик i, когда попрошу". И попросил каждого дать этот ящик — и каждый именно этот ящик и дал с десятью яблоками.

[Alex_87]

VoidVolker, Во первых, простите, что так долго отвечаю... Далее! Не понятно(только сейчас заметил, что не понимаю), каким образом в переменной shooter записывается 10 функции, если с каждым циклом выше, они перезаписываются? Ведь после цикла, должна остаться 1 функция со значением 10, которая и запишется в массив shooters!

[VoidVolker]

каким образом в переменной shooter записывается 10 функции, если с каждым циклом выше, они перезаписываются? Ведь после цикла, должна остаться 1 функция со значением 10, которая и запишется в массив shooters!

Неверно. Она же сохраняется в массив в каждой итерации.

var shooter                             // Объявляем переменную
    =                                   // Записываем в переменную результат выражения справа от равно
    function() {console.log( i ); };    // Создаем функцию (она и будет записана в переменную)
shooters.push(shooter);                 // Добавляем в конец массива функцию из переменной shooter

Сначала создается переменная, далее функция, затем функция сохраняется в переменной, а уже потом из переменной отправляется в массив. Т.о., в каждом шаге цикла создается новая функция и добавляется в массив.