Объясните строчку кода?

Question

[Иван]

<input id="1">
<input id="2">
<input id="3">

document.addEventListener("DOMContentLoaded", function() {
  var ids = ["1", "2", "3"];
	for (var id of ids) {
    var input = document.getElementById(id);
    input.value = localStorage.getItem(id);
    (function(id, input) {
      input.addEventListener("change", function() {
        localStorage.setItem(id, input.value);
      });
    })(id, input);
  } 
});

что обозначает в конце (id, input);?
почему оно идёт после закрытия функции, но перед точкой с запятой?

Answer 1

[Евгений Самсонов]

Таким образом вызывается анонимная функция. Скобками обрамляем анонимную функцию и c помощью (id, input) вызываем её с параметрами id и input

(
function(id, input) {
    input.addEventListener("change", function() {
        localStorage.setItem(id, input.value);
    });
}
)(id, input);

Чтобы было понятно, это можно записать так

var fun = function(id, input) {
    input.addEventListener("change", function() {
        localStorage.setItem(id, input.value);
    });
}

fun(id, input);

Answer 2

[Дмитрий Дерепко]

(function - это инициализация анонимной функции.
})(id, input); - здесь идет вызов этой функции, передавая туда 2 аргумента из цикла
id - это переменная, которая инициализирована в for'е
input - это переменная с первой внутренней строчки for'а ( var input = document.getElementById(id);)

Если боитесь, можете переписать это так.
Только в этом случае к myFunction будет иметь доступ как минимум весь скоуп, а как максимум, любой модуль, куда будет подключен этот js файл.

function myFunction (id, input) {
      input.addEventListener("change", function() {
        localStorage.setItem(id, input.value);
      });
}
document.addEventListener("DOMContentLoaded", function() {
  var ids = ["1", "2", "3"];
  for (var id of ids) {
    var input = document.getElementById(id);
    input.value = localStorage.getItem(id);
    myFunction(id, input);
  } 
});

Answer 3

[profesor08]

Обозначает передачу параметров в самовызывающуюся функцию function(id, input), которая тут вообще ненужна, и не понятно зачем она там.

Comments

[Иван]

profesor08 она здесь для того, чтобы следить за изменением, если я правильно понимаю

[profesor08]

document.addEventListener("DOMContentLoaded", function() {
  var ids = ["1", "2", "3"];
  for (var id of ids) {
    const input = document.getElementById(id);
    input.value = localStorage.getItem(id);
    input.addEventListener("change", function() {
      localStorage.setItem(id, input.value);
    });
  } 
});

[Иван]

profesor08, в таком случае в локалстор закинется лишь последний элемент. проверял только что

[profesor08]

BenderIsGreat34, можно ссылочку на пример сей чудотворной магии? Вангую косяки с id и наименованием.

[kova1ev]

может быть, поменять var на let?

[Stalker_RED]

profesor08, там var id, этот трюк с iife для тех случаев, когда let еще не завезли.

[profesor08]

Stalker_RED, это только для тех случаев, когда охота поговнокодить, других оправданий нет, разве что есть пристрастие стрелять себе в ногу. Там уже используется for..of.

ids.forEach(function(id) {
    const input = document.getElementById(id);
    input.value = localStorage.getItem(id);
    input.addEventListener("change", function() {
      localStorage.setItem(id, input.value);
    });
  });

[JorJeG]

profesor08, сможешь ответить почему с forEach работает, а с for..of нет?

[Александр Шохров]

JorJeG, насколько я понимаю, без анонимной функции id и input внутри обработчика связываются с переменными в скоупе цикла, т. о. после последней итерации все три обработчика будут нацелены на последний инпут. А когда используется обёртка из анонимной функции, id и input превращаются внутри неё в "значения аргументов" этой функции (фактически в две новые переменные) и отделяются от скоупа цикла, как бы "замораживаются" (в данном случае). Что позволяет привязать каждый обработчик к нужному инпуту. Хотя мб можно было бы поставить общий обработчик 'change' на родителя инпутов и сравнивать id'ы там, но кто его знает контекст.

[profesor08]

JorJeG, вместо var используй const или let, за подробностями об их работе - в учебник https://learn.javascript.ru/