Pętle

Pętle w programowaniu są kluczowymi konstrukcjami, które pozwalają na wielokrotne wykonanie określonego fragmentu kodu. Działają na zasadzie iteracji, gdzie kod jest wykonywany do momentu spełnienia określonego warunku. W JavaScript występuje pięć rodzai pętli:

while

Pętla while wykonuje blok kodu tak długo, jak długo spełniony jest określony warunek.

let countdown = 10;

while (countdown >= 0) {
  console.log(countdown);
  countdown--;
}

console.log("Start!");

W tym przykładzie, pętla while rozpoczyna się od wartości 10 i kontynuuje działanie, dekrementując wartość zmiennej countdown o 1 w każdej iteracji, aż osiągnięta zostanie wartość 0. Po każdym przejściu pętli, aktualna wartość countdown jest wyświetlana w konsoli. Gdy wartość osiąga 0, pętla się zatrzymuje, a program wyświetla komunikat „Start!”, sygnalizując zakończenie odliczania.

do/while

Pętla do...while zapewnia, że blok kodu zostanie wykonany przynajmniej raz, a następnie będzie kontynuowany do momentu, gdy warunek przestanie być spełniony. Tutaj w przeciwieństwie do pętli while warunek jest wykonany na końcu iteracji a nie na początku.

let input;
do {
  input = prompt("Podaj liczbę większą od 10", "");
} while (parseInt(input) <= 10);
alert("Dziękuję!");

for

Klasyczna pętla for w JavaScript jest jednym z najczęściej używanych mechanizmów do iteracji, czyli powtarzania określonego bloku kodu wielokrotnie.

Ogólny schemat tej pętli:

for(inicjalizacja; warunek; inkrementacja) {
  instrukcja
}

Gdzie:

1. Inicjalizacja: Jest to pierwsza część pętli, która wykonuje się tylko raz, przed pierwszym przebiegiem pętli. Zwykle służy do zadeklarowania i inicjalizacji zmiennej licznika.
2. Warunek: Ta część jest sprawdzana przed każdym przebiegiem pętli. Jeśli warunek jest prawdziwy (true), pętla kontynuuje wykonanie. Jeśli warunek jest fałszywy (false), wykonanie pętli jest zakończone.
3. Inkrementacja: Wykonuje się po każdym przebiegu pętli i zazwyczaj służy do aktualizacji zmiennej licznika. Może to być inkrementacja (zwiększenie), dekrementacja (zmniejszenie), lub inna operacja modyfikująca zmienną licznika w taki sposób, aby ostatecznie warunek przestał być spełniony.

Przykład:

const numbers = [];
for (let i = 1; i <= 10; i++) {
  numbers.push(i);
}
console.log(numbers);
// Wynik: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Gdzie:

• Inicjalizacja: let i = 1
• Warunek: i <= 10
• Inkrementacja: i++

Pętla for w JavaScript jest niezwykle elastyczna, co pozwala na pominięcie jednego lub więcej jej składników: inicjalizacji, warunku oraz inkrementacji. Pozwala to na różne, ciekawe zastosowania pętli for, które mogą być dostosowane do specyficznych potrzeb programistycznych.

Pominięcie inicjalizacji

let i = 0; // Zmienna licznika zainicjalizowana poza pętlą

for (; i < 5; i++) {
  console.log(i);
}

Pominięcie warunku

for (let i = 0; ; i++) {
  if (i >= 5) break;
  console.log(i);
}

Pominięcie inkrementacji

for (let i = 0; i < 5;) {
  console.log(i);
  i += 2; // Zwiększamy `i` o 2 z każdą iteracją
}

Pominięcie wszystkich składników

Teoretycznie możliwe jest pominięcie wszystkich trzech składników pętli for, co skutkuje pętlą nieskończoną, podobną do while(true)

for (;;) {
  let response = prompt("Wpisz 'exit', aby zakończyć");
  if (response === "exit") break;
}

for/of

Pętla for...of umożliwia iterację przez iterowalne obiekty (takie jak tablice, stringi, Mapy, NodeLists itp.) w bardziej zwięzły i czytelny sposób.

const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
  console.log(number * 2);
}

const elements = document.querySelectorAll('div');

for (const element of elements) {
  // Zmiana koloru tła każdego elementu div
  element.style.backgroundColor = 'red';
}

for/of i obiekty

Standardowe obiekty JavaScript nie są bezpośrednio iterowalne za pomocą for...of. Jednak można wykorzystać metody takie jak Object.keys(), Object.values() i Object.entries() w połączeniu z pętlą for...of, aby iterować przez klucze, wartości lub pary klucz-wartość obiektów.

Object.keys

Metoda Object.keys(obj) zwraca tablicę zawierającą klucze obiektu obj. Możemy następnie użyć pętli for...of do iteracji przez te klucze.

const person = { name: "Alice", age: 25, city: "Warsaw" };

for (const key of Object.keys(person)) {
  console.log(key); // Wyświetla klucze: name, age, city
}

Object.values

Metoda Object.values(obj) zwraca tablicę zawierającą wartości obiektu obj. Umożliwia to łatwą iterację przez wszystkie wartości obiektu za pomocą pętli for...of.

const person = { name: "Alice", age: 25, city: "Warsaw" };

for (const value of Object.values(person)) {
  console.log(value); // Wyświetla wartości: Alice, 25, Warsaw
}

Object.entries

Metoda Object.entries(obj) zwraca tablicę zawierającą pary klucz-wartość obiektu obj jako tablice [klucz, wartość]. Dzięki temu możemy iterować przez obiekt, mając jednocześnie dostęp do kluczy i wartości.

const person = { name: "Alice", age: 25, city: "Warsaw" };

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`); // Wyświetla pary klucz-wartość: name: Alice, age: 25, city: Warsaw
}

for/in

Pętla for...in jest używana do iteracji po kluczach obiektu JavaScript, co jest przydatne przy pracy z obiektami.

const person = { name: "Anna", age: 30, city: "Kraków" };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// Wyniki: "name: Anna", "age: 30", "city: Kraków"

break i continue

W JavaScript, instrukcje break i continue pomagają w kontrolowaniu przepływu pętli. Pozwalają na przedwczesne przerwanie iteracji lub pominięcie części iteracji i kontynuowanie pętli. Dodatkowo, JavaScript oferuje możliwość stosowania etykiet (labels), które w połączeniu z break i continue umożliwiają precyzyjne sterowanie nawet w zagnieżdżonych pętlach.

break

Instrukcja break pozwala na natychmiastowe zakończenie wykonywania całej pętli i przejście do pierwszej instrukcji znajdującej się poza pętlą.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Zakończenie pętli, gdy i osiągnie wartość 5
  }
  console.log(i);
}
// Wydrukuje liczby od 0 do 4

continue

Instrukcja continue powoduje pominięcie pozostałej części kodu w bieżącej iteracji pętli i przejście do kolejnej iteracji.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // Pominięcie iteracji, gdy i jest równe 5
  }
  console.log(i);
}
// Wydrukuje liczby od 0 do 4 i od 6 do 9

Etykiety

Etykiety pozwalają na nazwanie pętli lub bloku kodu, co w połączeniu z break lub continue umożliwia przerwanie lub kontynuację pracy określonej pętli w zagnieżdżonej strukturze.

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // Przerwanie zewnętrznej pętli
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}
// Wydrukuje pary i, j do momentu i = 1, j = 1,
//i = 0, j = 0
//i = 0, j = 1
//i = 0, j = 2
//i = 1, j = 0

outerLoop: for (let i = 0; i < 3; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      continue outerLoop; // Pominięcie bieżącej iteracji zewnętrznej pętli
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}
// Pomija drukowanie dla i = 1, j = 1, kontynuując z i = 2
//i = 0, j = 0
//i = 0, j = 1
//i = 0, j = 2
//i = 1, j = 0
//i = 2, j = 0
//i = 2, j = 1
//i = 2, j = 2

Użycie etykiet z break i continue oferuje dodatkową kontrolę nad złożonymi pętlami zagnieżdżonymi.