На собеседовании на Front End вакансию задали такой вопрос..?

Question

[maksim2099]

Что будет в консоли?

// 
var i = 10;
var array = [];

while (i--) {
    array.push(function() {
        return i + i;
    });
}

console.log([
    array[0](),
    array[1](),

])

А в консоли будет
0:-2
1:-2

Собственно вопрос почему?)

Answer 1

[Николай]

Значение i после цикла является -1. -1 -1 = -2.
Читайте про области видимости, замыкания.

Comments

[maksim2099]

Ммм, спасибо, но все равно не понял(
А есть ссылочки какие-нибудь?

[kulaeff]

Гугл заблокирован что ли? https://learn.javascript.ru/functions-closures

[kulaeff]

Еще надо почитать про операторы инкремента/декремента

[Павел Корнилов]

maksim2099: циклы, унарные операторы и замыкания.
По этим ключевикам найдешь все, что нужно.

[maksim2099]

KorniloFF: Спасибо!

Answer 2

[abberati]

Это вариация классической задачи про армию функций. По ссылке есть задача, объяснение и ссылка на связанный урок.

Comments

[maksim2099]

Спасибо, и ведь помница, решал подобную... когда-то....

Answer 3

[gleendo]

var i = 10;
var array = [];

while (i--) {
  array.push(function() {
    return i + i;
  });
}

array.forEach(item => console.log(item())); // 10 раз напечатается -2

// после выхода из цикла i = -1; И так как i является "глобальной", то все функции будут "ссылаться" на одно и тоже значение после цикла
// array[function() { return i + i; }, function() { return i + i }, function() { return i + i }, ...]
// ==> array[function() { return -1 + -1 }, function() { return -2 }, ...]
// ==> array[0]() ==> return -2;

// ------------------------------------------------------
// Проблему можно решить так:

var i = 10;
var array = [];

while (i--) {
  array.push((function(i) {
    // Сохранить i в замыкании

    return function() {
    	return i + i;
    }
  })(i));
}

array.forEach(item => console.log(item())); // 18 16 14 12 10 8 6 4 2 0

// ------------------------------------------------------
// Или так

var i = 10;
var array = [];

while (i--) {
	let value = i;

  array.push(function() {
  	return value + value;
  });
}

array.forEach(item => console.log(item())); // 18 16 14 12 10 8 6 4 2 0

Comments

[maksim2099]

СУПЕР!!!!!!!