Rozgrzewka: tablice z poprzedniej lekcji

1. Jaką metodą dopiszecie nowy element na końcu tablicy?
2. Jak znajdziecie indeks danego elementu w tablicy?
3. Jaka metoda tnie napis na kawałki tablicy według separatora?

for: wskaźnik przesuwający się po szufladkach

W PHP foreach ($games as $game) samo przechodziło przez tablicę, bez licznika. W JavaScript zaczynamy od pętli for - jest dłuższa, ale pokazuje dokładnie, co dzieje się pod spodem: licznik i rośnie od 0, dopóki jest mniejszy niż .length.

const fruits = ["jabłko", "gruszka", "banan"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// jabłko
// gruszka
// banan

Akumulator: rosnący wynik przy każdym przebiegu

const numbers = [4, 8, 15, 16, 23, 42];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
console.log(sum);  // 108

sum to akumulator: zmienna, która zbiera wynik po trochu, przebieg po przebiegu. Musi mieć wartość początkową 0 - inaczej dodawanie nie zadziała poprawnie (kolejny slajd).

Zapomniana wartość startowa: wynik zaczyna się od undefined

const fruits = ["jabłko", "gruszka", "banan"];
let text;                       // brak wartości = undefined
for (let i = 0; i < fruits.length; i++) {
  text += fruits[i];
}
console.log(text);  // undefinedjabłkogruszkabanan

Zmienna bez wartości ma wartość undefined. Doklejenie napisu do undefined zamienia je w tekst "undefined" - i tak zostaje na początku wyniku. Poprawka: let text = "";

for...of: element po elemencie, bez indeksu

const fruits = ["jabłko", "gruszka", "banan"];
for (const fruit of fruits) {
  console.log(fruit);
}
// jabłko
// gruszka
// banan

Ten sam wynik co for z indeksem, krótszym zapisem. Przyda się, gdy nie potrzebujecie numeru szufladki, tylko samej wartości.

forEach(): funkcja wywołana dla każdej przegródki

const fruits = ["jabłko", "gruszka", "banan"];
fruits.forEach(function (fruit) {
  console.log(fruit);
});
// jabłko
// gruszka
// banan

Podajecie forEach() funkcję (jak „maszynkę” z lekcji o funkcjach PHP) - metoda sama wywołuje ją raz dla każdego elementu, przekazując element jako argument.

Ciekawostka z MDN: pętli forEach() nie da się przerwać w środku, tak jak pętli for instrukcją break - jedyny sposób to rzucenie wyjątku. Jeśli trzeba zakończyć przechodzenie po tablicy wcześniej, forEach() jest złym narzędziem do tego zadania, lepiej wrócić do zwykłej pętli for albo for...of.

Tak pytają na egzaminie

result = 0;
for (i = 0; i < tab.length; i++) {
  result += tab[i];
}

var text;
for (var i = 0; i < tab.length; i++) {
  text += tab[i] + "<br>";
}

Ćwiczenie: sumowanie i sklejanie tablicy

1. Otwórz script.js z poprzednich lekcji (w folderze swojego projektu).
2. Utwórz const numbers = [4, 8, 15, 16, 23, 42];
3. Pętlą for zsumuj elementy w akumulatorze sum (pamiętaj o let sum = 0; przed pętlą), wypisz console.log(sum);
4. Do tablicy fruits z poprzednich lekcji dopisz pętlę for, która sklei wszystkie elementy w jeden napis w zmiennej joined - zacznij od let joined = "";, żeby uniknąć pułapki z undefined.
5. Wypisz console.log(joined);
6. Dla chętnych w domu: przepisz pętlę sklejającą na for...of i sprawdź, czy wynik jest taki sam.

A jak to wygląda w produkcji?