Объясните пожалуйста как работает функция в примере

Question

const adTemplate = document.querySelector('#card').content.querySelector('.popup');

const ad = adTemplate.cloneNode(true);

const renderNewAd = (adData) => {
  const photosContainer = ad.querySelector('.popup__photos');
  const featuresContainer = ad.querySelector('.popup__features');
  ad.querySelector('.popup__avatar').src = adData.author.avatar;
  ad.querySelector('.popup__title').textContent = adData.offer.title;
  ad.querySelector('.popup__text--address').textContent = adData.offer.address;
  ad.querySelector('.popup__text--price').innerHTML = `${adData.offer.price} <span>₽/ночь</span>`;
  ad.querySelector('.popup__type').textContent = ACCOMODATION_TYPES[adData.offer.type]['type'];
  ad.querySelector('.popup__text--capacity').textContent = `${adData.offer.rooms} ${getWordForm(adData.offer.rooms, ROOMS_WORD_FORMS)} для ${adData.offer.guests} ${getWordForm(adData.offer.guests, GUESTS_WORD_FORMS)}`;
  ad.querySelector('.popup__text--time').textContent = `Заезд после ${adData.offer.checkin}, выезд до ${adData.offer.checkout}`;
  ad.querySelector('.popup__description').textContent = adData.offer.description;
  getPhotos(photosContainer, adData.offer.photos);
  getFeatures(featuresContainer, adData.offer.features);
  return ad;
};

const ADS_COUNT = 10;

const adsData = getAdsData(ADS_COUNT);

adsData.forEach(ad => {
  console.log(renderNewAd(ad))
});

Подскажите пожалуйста, что конкретно происходит если объявить переменную ad за функцией и внутри функции renderAd

ad - это клонированный шаблон из разметки,

функция renderAd - это функция генерация DOM-элементов, принимает в себя объект с данными, которые подставляются в разметку

функция getAdsData - это функция генерации объектов с данными для подстановки в DOM-элементы

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

что я имею на выходе: если объявить переменную внутри функции, то все работает так как и должно

если объявить переменную за функцией(как в примере), то на выходе получается 10 одинаковых DOM-элементов

я не понимаю почему так происходит, опытные товарищи, пожалуйста не проходите мимо, помогите новичку)

Answer 1

За функцией вы один раз создали клонированный объект и используете его много раз, изменяя его и возвращая один и тот же объект. Получается не "10 одинаковых DOM-элементов", а один и тот же элемент.

А при объявлении внутри функции будет каждый раз новая переменная и новый клон. Тогда будет создано 10 элементов, а не один.

БЛОГ НА HUSL

Объясните пожалуйста как работает функция в примере

Ответы (1 шт):