Useful JavaScript features

Folgende Features können wir hier anwenden:

• Early returns
• Template literals
• Rest and Spread Operators
• Useful array methods

Using array spread

Wir können Array.from durch einen Spread-Operator ersetzen:

// instead of
const slides = Array.from(carousel.querySelectorAll('.carousel-slide'));
const dots = Array.from(carousel.querySelectorAll('.carousel-dot'));

// use spread
const slides = [...carousel.querySelectorAll('.carousel-slide')];
const dots = [...carousel.querySelectorAll('.carousel-dot')];

Using template literals

// instead of
contents.style.transform = 'translateX(-' + destination + ')';

// use this
contents.style.transform = `translateX(-${destination})`;

Early returns

// instead of
dotsContainer.addEventListener('click', e => {
  const dot = e.target.closest('button');
  if (dot) {
    // do sth.
  }
});

// use this
dotsContainer.addEventListener('click', e => {
  const dot = e.target.closest('button');
  if (!dot) return;

  // do sth.
});

JavaScript array features

Bei der Suche nach dem targetIndex im Dots Container Event Handler haben wir eine for Schleife verwendet. Diese können wir durch findIndex ersetzen.

// instead of
let clickedDotIndex;

for (let index = 0; index < dots.length; index++) {
  if (dots[index] === dot) {
    clickedDotIndex = index;
  }
}

// use this
const clickedDotIndex = dots.findIndex(d => d === dot);