How can the code be rewritten into multiple functions?

Question

JavaScript

I'm just starting to learn and understand JS, how to rewrite the code to get several functions instead of using the map method?

The code:

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

Move outside the map, for example, this piece:

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

Wrap it in a function:

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

or the traditional version:

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

Then inside map, replace that code with a function call:

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

  poputTitleContent(offer.title);

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

};

I think you can handle it yourself