Вторая программа “Сеньор Помидор” 25/25. В чем принципиальная разница?

Курсы Знакомство с событиями
1

Вопрос к теме “Области видимости” и “Замыкания”. Подскажите, пожалуйста, в чем принципиальное отличие этого кода:

var thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPhoto = document.querySelector('.full-picture');

var addFullPhoto = function (thumbnail, photo){
  thumbnail.addEventListener('click', function(){
    fullPhoto.src = photo;
    });
  };
   
for (var i = 0; i<thumbnails.length;i++){
  addFullPhoto(thumbnails[i],pictures[i]);
};

От этого:

var thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPhoto = document.querySelector('.full-picture');

for(var i=0;i<thumbnails.length;i++){
    var addThumbnailsClickHandler = function(thumbnail,photo){
    thumbnail.addEventListener('click', function(){
        fullPhoto.src=photo;
      });
  }
  addThumbnailsClickHandler(thumbnails[i],pictures[i]);
  }

Почему в задании говорится, что нужно создать функцию, и потом вызвать ее из цикла. Можно ведь написать функцию внутри цикла и вызывать ее на каждой итерации цикла?
К слову, системой принимается и тот и тот вариант как верный.

2

ну если опустить тот момент, что много ошибок в именах переменных, то в втором случае мы функцию не видим извне цикла
инкапсуляция в данном случае проводится в зависимости от задач заказчика, можно и спрятать внутрь циклов или еще чего-нибудь, сделав приватными, можно и сделать доступными, для использования в каком-нибудь еще месте кода

1 лайк
3

Теперь ошибок в переменных нет? :slight_smile:

По поводу основного вопроса: правильно ли я понял, что принципиальное отличие в области видимости функции, и способ решения подбирается в зависимости от того, нужно будет вызывать функцию извне или нет?

4

верно, но обычно это прячут внутри объектов, через конструктор функции, тут на курсах такое не объясняют

1 лайк
5

Спасибо большое!

А можете посоветовать литературу? Не только по этому моменту, но и в общем по JS.

6

Для начала онлайн учебник Ильи Кантора, он кстати недавно обновился. Читайте его прям с начала, т. к. на курсах не все преподают

А там уж вас потянет в сторону фреймворков и практики.

1 лайк
7

Еще раз БОЛЬШОЕ СПАСИБО!

8

Наверное спрошу глупость, но по мне - тут какой-то детектив))
Я не понимаю, как программа понимает зависимость от того, по какой картинке мы кликнули, и какую ставить.
Вот пользователь кликнул–> запускается функция, которая “живет” в данных счетчика :rofl:…Я дальше нимагу понять))
Спасибо!

9

Прошло много времени, но все равно попробую объяснить.
Программа на каждую картинку “вешает” обработчик события. Так же как ссылка на странице “ждет” клика мыши, так же и картинка будет “ждать” клика, чтобы выполнить код. Процесс раздачи обработчиков происходит в цикле и проходит по всем картинкам. Этот процесс производится скриптом, без участия пользователя.
При этом, в самом обработчике мы указываем, что именно нужно сделать. Каждой картинке задается свой собственный .scr