Inkrementacja i dekrementacja: prefix vs postfix

Operatory inkrementacji (++) i dekrementacji (–) pozwalają na skrótowe powiększenie lub zmniejszenie wartości zmiennej o 1.

Inkrementacja i dekrementacja

				
					let x = 1;
x++; // <- inkrementacja

console.log(x); // 2

x--; // <- dekrementacja

console.log(x); // 1
				
			

Prefix vs. postfix

Operatory inkrementacji i dekrementacji możemy używać przed zmienną (jako prefix) oraz po niej (jako postfix). Dla samej wartości zmiennej nie ma to znaczenia – w każdym przypadku będzie ona odpowiednio zmieniona: zwiększona lub zmniejszona.

Inkrementacja jako prefix i postifx

				
					let x = 1;
x++; // <- postfix

console.log(x); // 2

++x; // <- prefix

console.log(x); // 3
				
			

Prefix vs. postfix a zwracana wartość

Różnica między postfixem a prefixem zaczyna być widoczna, kiedy np. spróbujemy przypisać rezultat operacji do zmiennej. Okazuje się bowiem, że postfix (x++) najpierw zwraca wartość zmiennej (jeszcze nie zmodyfikowanej), a dopiero później dokonuje inkrementacji czy dekrementacji. Z kolei prefix (++x) najpierw dokonuje modyfikacji, a następnie zwraca już tą nową wartość.

Inkrementacja i dekrementacja w javascript postfix vs. prefix

Inkrementacja jako postfix:

				
					let x = 1;
const y = x++;

console.log(x); // 2
console.log(y); // 1  <-- poprzednia wartość
				
			

Inkrementacja jako prefix:

				
					let x = 1;
const y = ++x;

console.log(x); // 2
console.log(y); // 2  <-- nowa wartość
				
			

Analogicznie działa postfix i prefix w przypadku dekrementacji.

Logowanie inkrementacji (i dekrementacji) jako postfix w console.log

Taka samą sytuację zaobserwujemy, gdy będziemy chcieli bezpośrednio wylogować inkrementację (lub dekrementację). Gdy umieszczamy jakieś wyrażenie w console.log, logowane jest to, co dane wyrażenie zwraca. Jeśli więc użyjemy postfixu, możemy się zaskoczyć wynikiem.

				
					let x = 1;
console.log(x++) // 1

// x zostało zmienione, ale console.log wyświetla to, co dane wyrażenie zwraca. Jak już wiemy, postfix zwraca poprzednią wartość zmiennej, a dopeiro później ją modyfikuje. Stąd taki wynik w konsoli

console.log(x); // 2
				
			

Gdy użyjemy prefixu, wynik w console.log będzie od razu tym zmodyfikowanym, bo prefix najpierw zmienia wartość, a dopiero później ją zwraca.

				
					let x = 1;
console.log(++x) // 2

console.log(x); // 2
				
			

Dokumentacje dla obu operatorów znajdziesz pod poniższymi linkami:
Inkrementacja
Dekrementacja

Wartościowe materiały prosto na Twoją skrzynkę mailową

Zapisz się do newslettera i nie przegap kolejnych artykułów, które pogłębią Twoją wiedzę o Java Script. Absolutne zero spamu.

Uzupełniając powyższe pole wyrażam zgodę na zapis do newslettera, aby otrzymać więcej materiałów i ciekawych linków z portalu javascriptbeztajemnic.pl. Zero spamu. Mogę w każdej chwili wycofać zgodę zgodnie z Polityką Prywatności.