Inkrementacja i dekrementacja w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Inkrementacja to zwiększenie wartości zmiennej liczbowej o 1, a dekrementacja — zmniejszenie jej o 1. W JavaScript służą do tego operatory:

Infografika: inkrementacja i dekrementacja w JavaScript — operatory ++ i -- zwiększające i zmniejszające wartość zmiennej o 1, różnica między post i pre oraz zastosowanie w pętli for.
  • ++ — zwiększa wartość zmiennej o 1,
  • -- — zmniejsza wartość zmiennej o 1.

To jedne z najczęściej używanych operatorów w językach programowania — głównie do sterowania pętlami i zliczania. Bardzo często pojawiają się w pytaniach egzaminacyjnych z kwalifikacji INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych).

Przykład inkrementacji

let zmienna = 5;
zmienna++;
console.log(zmienna); // 6

Polecenie:

zmienna++;

jest w tym kontekście równoważne zapisom:

zmienna += 1;
zmienna = zmienna + 1;

Każdy z tych zapisów zwiększa wartość zmiennej o jeden. To najczęstsze pytanie egzaminacyjne: rezultat zmienna++; jest identyczny z zmienna += 1;.

Tak samo działa w prostym przykładzie:

var x = 10;
x++;
console.log(x); // 11

Po wykonaniu zmienna x przyjmuje wartość 11.

Przykład dekrementacji

let liczba = 10;
liczba--;
console.log(liczba); // 9

Zapis liczba--; jest równoważny liczba -= 1;.

Postinkrementacja a preinkrementacja

Operator ++ (i analogicznie --) może występować przed lub po nazwie zmiennej. Różnica ujawnia się dopiero wtedy, gdy operator jest częścią większego wyrażenia — gdy wynik jest od razu przypisywany lub używany.

Post (x++) — najpierw zwraca, potem zwiększa

let x = 3;
let a = x++; // a = 3, x = 4

Najpierw a dostaje aktualną wartość x (3), dopiero potem x rośnie do 4.

Pre (++x) — najpierw zwiększa, potem zwraca

let y = 3;
let b = ++y; // b = 4, y = 4

Najpierw y rośnie do 4, potem ta nowa wartość trafia do b.

Kiedy nie ma różnicy?

Jeśli instrukcja stoi samodzielnie (np. zmienna++;), efekt końcowy jest taki sam jak przy ++zmienna; — wartość zmiennej zwiększa się o 1. Różnica istnieje tylko w wyrażeniu, którego wynik jest dalej używany.

Pre/post w bardziej złożonych wyrażeniach

To częsta pułapka egzaminacyjna — trzeba dokładnie prześledzić kolejność.

Przykład 1 — post-dekrementacja w przypisaniu

var a = 5;
var b = a--;  // b = 5, a = 4   (najpierw przypisanie, potem -1)
a *= 3;       // a = 4 * 3 = 12

Po wykonaniu: a = 12, b = 5.

Przykład 2 — ++undefined daje NaN

var x = 1;
var y;             // y = undefined
++y;               // NaN — bo y nie jest liczbą
document.write(++x);  // wypisze 2  (x = 2)
document.write(" ");
document.write(x--);  // wypisze 2  (potem x = 1)

Kluczowe pułapki w tego typu zadaniach:

  • ++ na zmiennej undefined daje NaN (Not a Number) — operator próbuje zwiększyć coś, co nie jest liczbą,
  • document.write(++x) wypisuje nową wartość (pre — najpierw zwiększa),
  • document.write(x--) wypisuje starą wartość (post — najpierw wypisz, potem zmniejsz).

Inkrementacja w pętlach

Najczęstsze zastosowanie ++ to sterowanie pętlą for:

for (let i = 0; i < 6; i++) {
    console.log(i);
}

Pętla wykona się 6 razy — dla i od 0 do 5. Po każdej iteracji i++ zwiększa licznik o 1, a warunek i < 6 przerywa pętlę, gdy i osiągnie 6.

Liczenie iteracji pętli

Aby ustalić, ile razy pętla for się wykona, sprawdzaj wszystkie trzy elementy:

for (inicjalizacja; warunek; krok)
  • inicjalizacja — wartość startowa licznika,
  • warunek — kiedy pętla działa (gdy true),
  • krok — co dzieje się po każdej iteracji (zwykle i++ lub i--).

Wypisanie sześciu kolejnych liczb parzystych

Jeśli zadanie brzmi „wypisz 6 kolejnych liczb parzystych", możliwe są dwie poprawne konstrukcje:

Wariant z krokiem i += 2:

for (let i = 2; i <= 12; i += 2) {
    document.write(i + " ");
}
// 2 4 6 8 10 12

Wariant z i++ i mnożeniem przez 2:

for (let i = 1; i <= 6; i++) {
    document.write(i * 2 + " ");
}
// 2 4 6 8 10 12

Obie wypiszą 6 kolejnych liczb parzystych. Kluczowe jest, by liczba iteracji wynosiła 6 i by w każdej iteracji wypisywana była kolejna liczba parzysta.

Częste pomyłki — nie myl tego!

  • x++++x — jako samodzielna instrukcja dają ten sam efekt, ale w wyrażeniu typu a = x++ różnią się wynikiem.
  • x++ to nie x + 1x++ zmienia wartość zmiennej, x + 1 tylko wylicza wartość, nie zmieniając x.
  • ++undefined to NaN, a nie 1 — typowy dystraktor w zadaniach o niezainicjowanej zmiennej.
  • document.write(x--) wypisuje starą wartośćx zmieni się dopiero po wypisaniu.
  • for (i = 0; i < 6; i++) to 6 iteracji (od 0 do 5), a nie 7 — wartość początkowa jest wliczana, a warunek zatrzymuje pętlę przy 6.
  • i += 2 to nie inkrementacja w ścisłym sensie — to dodanie 2; inkrementacja zawsze oznacza +1.

Najważniejsze do zapamiętania

W JavaScript zmienna++ jest równoważne zapisom zmienna += 1 i zmienna = zmienna + 1. Operator może występować przed zmienną (preinkrementacja — najpierw zwiększa, potem zwraca) lub po niej (postinkrementacja — najpierw zwraca, potem zwiększa) — różnica liczy się w wyrażeniach. Pętla for (let i = 0; i < n; i++) wykonuje się n razy. Operator ++ na zmiennej undefined daje NaN.