Doman Code - metoda map a pętle for

doman-code-metoda-map-a-petle-for.js

// Zapraszam na: 
// - mój kanał YouTube Doman Code: https://www.youtube.com/c/domancode
// - fan page Facebook: https://www.facebook.com/profile.php?id=100082090551019

// inicjalizacja przykładowej tablicy
const exampleArray = ["Kanał YouTube Doman Code", "Fan Page Doman Code", "Grupe HTML, CSS i JS: pierwsze kroki"];

// 1. inicjalizacja pustej tablicy w której będziemy trzymać wynik działania naszej transformacji
const resultArrayClassicFor = [];

// 2. index = O => inicjalizacja licznika z wartością 0 (od 0 rozpoczynają się indeksy w tablicy) 
// 3. index < exampleArray.length => nasza tablica ma 3 elementy więc ostatni index bedzie wynosił 2,
// dlatego gdy index uzyska wartość 3, pętla sie zakończy (nie mamy elementu z indeksem 3)
// 4. inkrementacja => zwiększenie wartości index o 1, po każdym wykonaniu iteracji pętli
for (let index = 0; index < exampleArray.length; index++) {
  // 4. arrayElement => pobranie elementu z tablicy dla danej iteracji
  const arrayElement = exampleArray[index];

  // 5. dokonanie transformacji elementu dla danej iteracji pętli
  // w tym przypadku dopisanie na początku każdego elementu słowa "Polecam"
  const recommendString = `Polecam ${arrayElement}`;

  // 6. zwracamy wynik transformacji do naszej tablicy wynikowej 
  resultArrayClassicFor.push(recommendString);

  // posiadamy dostęp do indeksu (index) w danej iteracji
  // posiadamy dostęp do aktualnego elementu (arrayElement) w danej iteracji
  // posiadamy dostęp całkowitej tablicy (exampleArray)
}

// 7. Wyświetlamy w konsoli wynik naszej wynikowej tablicy (orginalna tablica jest w nienaruszonym stanie)
console.log(resultArrayClassicFor); // Przykładowo 1 element (czyli o indeksie 0) będzie: "Polecam Kanał YouTube Doman Code"

// Numeracja poniżej dla porównania z powyższą pętlą for
// 1. inicjalizacja pustej tablicy w której będziemy trzymać wynik działania naszej transformacji
const resultArrayForOf = [];

// 4. arrayElement => pobranie elementu z tablicy dla danej iteracji
for (const arrayElement of exampleArray) {
  // 5. dokonanie transformacji elementu dla danej iteracji pętli
  // w tym przypadku dopisanie na początku każdego elementu słowa "Polecam"
  const recommendString = `Polecam ${arrayElement}`;

  // 6. zwracamy wynik transformacji do naszej tablicy wynikowej 
  resultArrayForOf.push(recommendString);

  // posiadamy dostęp do indeksu (index) w danej iteracji
  // posiadamy dostęp do aktualnego elementu (arrayElement) w danej iteracji
  // posiadamy dostęp całkowitej tablicy (exampleArray)
}

// 7. Wyświetlamy w konsoli wynik naszej wynikowej tablicy (orginalna tablica jest w nienaruszonym stanie)
console.log(resultArrayForOf); // Przykładowo 1 element (czyli o indeksie 0) będzie: "Polecam Kanał YouTube Doman Code"

// 1. resultArrayMap będzie naszą wynikową tablicą jak powyższe resultArrayClassicFor oraz resultArrayForOf;
// 4. arrayElement => pobranie elementu z tablicy dla danej iteracji
// również index posiada odpowienią wartość dla danej iteracji zgodny z odpowiadającym mu arrayElement
const resultArrayMap = exampleArray.map((arrayElement, index, currentArray) => {
  // 5. dokonanie transformacji elementu dla danej iteracji pętli
  // w tym przypadku dopisanie na początku każdego elementu słowa "Polecam"
  const recommendString = `Polecam ${arrayElement}`;

  // 6. zwracamy wynik transformacji do naszej tablicy wynikowej
  return recommendString;
});

// 7. Wyświetlamy w konsoli wynik naszej wynikowej tablicy (orginalna tablica jest w nienaruszonym stanie)
console.log(resultArrayMap); // Przykładowo 1 element (czyli o indeksie 0) będzie: "Polecam Kanał YouTube Doman Code"