Как можно переписать код в несколько функций?

Question

[denis_diz]

Только начинаю изучать и разбираться в JS, как переписать код, чтобы получилось несколько функций вместо использования метода map?

Код:

similarOffers.map(({author, offer}) => {

  // сделать 1 функцию
  const popupTitle = advertElement.querySelector('.popup_title');
  popupTitle.textContent = offer.title;

  // сделать 2 функцию
  const popupAddress = advertElement.querySelector('.popup_address');
  popupAddress.textContent = offer.address;

  // сделать 3 функцию
  const popupDescription = advertElement.querySelector('.popup_description');
  popupDescription.textContent = offer.description;

  // сделать 4 функцию
  const popupPrice = advertElement.querySelector('.popup_price');
  popupPrice.textContent = offer.price;

  // сделать 5 функцию
  const popupAvatar = advertElement.querySelector('.popup_avatar');
  popupAvatar.src = author.avatar;

  // сделать 6 функцию
  const popupFeatures = advertElement.querySelector('.popup_features');
  while (popupFeatures.firstChild) {
    popupFeatures.removeChild(popupFeatures.firstChild);
  }
  for (let ind = 0; ind < offer.features.length; ind++) {
    const feature = document.createElement('li');
    feature.classList.add('popup_feature', `popup_feature-${offer.features[ind]}`);
    popupFeatures.appendChild(feature);
  }

  // сделать 7 функцию
  const popupType =  advertElement.querySelector('.popup_type');
  popupType.textContent = offerTypeToReadable[offer.type];

  // сделать 8 функцию
  const popupCapacity = advertElement.querySelector('.popup_capacity');
  popupCapacity.textContent = `${offer.rooms} комнаты для ${offer.guests} гостей`;

  // сделать 9 функцию
  const popupTime = advertElement.querySelector('.popup_time');
  popupTime.textContent = `Заезд после ${offer.checkin}, выезд до ${offer.checkout}`;

  // сделать 10 функцию
  const popupPhotos = advertElement.querySelector('.popup_photos');
  const imgPopupPhotos = advertElement.querySelector('.popup_photo');
  popupPhotos.textContent = '';
  for(let ind = 0, img; ind <= offer.photos.length -1; ind++) {
    img = imgPopupPhotos.cloneNode();
    img.src = offer.photos[ind];
    popupPhotos.appendChild(img);
  }

  fragment.appendChild(advertElement);
});


const mapPlace = document.querySelector('#map-place');
mapPlace.append(fragment);

Answer 1

[Yuriy Vorobyov]

Выносите за пределы map, например, этот кусок:

// сделать 1 функцию
  const popupTitle = advertElement.querySelector('.popup_title');
  popupTitle.textContent = offer.title;

Обворачиваете в функцию:

const poputTitleContent = title => {
  const popupTitle = advertElement.querySelector('.popup_title');
  popupTitle.textContent = title;
};

или на традиционный вариант:

function poputTitleContent(title) {
  const popupTitle = advertElement.querySelector('.popup_title');
  popupTitle.textContent = title;
}

Затем внутри map заменяете тот код на вызов функции:

similarOffers.map(({author, offer}) => {

  poputTitleContent(offer.title);

  // ... остальной код

};

Думаю, дальше сами справитесь

Comments

[denis_diz]

Большое спасибо за помощь