Как работает этот js код?

Question

[andreyz40r]

Помогите пожалуйста разобраться. Это решение задачи из книги "Выразительный javascript". Задача на односвязные списки: Напишите функцию arrayToList, которая строит такую структуру, получая в качестве аргумента [1, 2, 3]...

console.log(arrayToList([10, 20]));
// → {value: 10, rest: {value: 20, rest: null}}

Почему работает код тела цикла? Разве на каждой итерации переменные не создаются заново?

function arrayToList(arr) {
	for (var i = arr.length - 1; i >= 0; --i) {
		var nextRest = list || null;
		var list = {};

		list["value"] = arr[i];
		list["rest"] = nextRest;
	}

	return list;
}

Comments

[Антон Спирин]

Развивайте алгоритмическое мышление.
В теле цикла всего четыре шага, попробуйте понять что происходит на каждом из них.

for (var i = arr.length - 1; i >= 0; --i) {
    var nextRest = list || null; // ( 1 )
    var list = {};  // ( 2 )

    list["value"] = arr[i]; // ( 3 )
    list["rest"] = nextRest;  // ( 4 )
  }

spoiler

1. Переменные объявленные как var всплывают за пределы блока цикла.
2. Ваша структура строится изнутри наружу, как матрешка.

[Никита Ермиличев]

если сделаете let а не var, то будет каждый раз новая переменная

Answer 1

[Иван Корюков]

Переменные создаются заново, но их содержимое перекидывается туда-сюда и в итоге сохраняется и даже "увеличивается".
Представьте себе переливание воды из ведра в ведро. Вы берёте второе ведро, выливаете в него воду из первого ведра, а потом, добавив в пустое первое ведро кружку спирта, заливаете туда воду обратно из первого ведра.
При этом вы можете выкидывать пустое ведро после того как вылили из него воду и каждый раз покупать новое ведро чтобы налить в него воду.

Comments

[andreyz40r]

Получается всё дело в том, что со второй(и далее) итерации nextRest успевает получить ссылку на объект list, пока тот не затёрт инструкцией var list = {}?

[Иван Корюков]

andreyz40r, именно так

Answer 2

[Владимир]

В JS есть существует "поднятие" переменных.
Иными словами ваш код равнозначен следующему:

function arrayToList(arr) {
  var i;                 // На самом деле именно здесь определяются все переменные
  var nextRest;          // данной функции объявленные
  var list;              //  через ключевое слово "var"

  for (i = arr.length - 1; i >= 0; --i) {
    nextRest = list || null;
    list = {};

    list["value"] = arr[i];
    list["rest"] = nextRest;
  }

  return list;
}

Если вы хотите чтобы данного поднятия не происходило, то определяйте переменные через ключевое слово let. Для let поднятие переменных не происходит.

Answer 3

[Stalker_RED]

Создаются, и соеденяются "цепочкой", так чтобы каждый элемент ссылался на соседний.
В этом и есть смысл односвязного списка.