Operatory w JavaScript
1. Wprowadzenie
Operatory w JavaScript to symbole lub słowa kluczowe, które pozwalają wykonywać operacje na wartościach — takich jak dodawanie, porównywanie, przypisywanie, łączenie tekstów, sprawdzanie warunków czy praca z typami danych. JavaScript posiada wiele typów operatorów, które dzielimy na kategorie w zależności od ich zastosowania.
2. Podział operatorów w JavaScript
- Operatory przypisania
- Operatory arytmetyczne
- Operatory porównania
- Operatory logiczne
- Operatory inkrementacji i dekrementacji
- Operatory łańcuchów (stringów)
- Operatory warunkowe (ternary)
- Operatory bitowe
- Operatory typów (typeof, instanceof)
- Operatory zasięgu (spread i rest)
- Operator opcjonalnego łańcuchowania (?.)
- Operator nullish coalescing (??)
3. Operatory przypisania
Służą do przypisywania wartości zmiennym.
| Operator | Przykład | Opis |
|---|---|---|
= |
x = 5 |
Przypisanie wartości 5 do zmiennej x |
+= |
x += 2 |
Dodaje 2 do x (x = x + 2) |
-= |
x -= 3 |
Odejmuje 3 od x (x = x - 3) |
*= |
x *= 4 |
Mnoży x przez 4 |
/= |
x /= 2 |
Dzieli x przez 2 |
%= |
x %= 5 |
Przypisuje resztę z dzielenia |
**= |
x **= 2 |
Podnosi do potęgi (x = x ** 2) |
Przykład:
4. Operatory arytmetyczne
Służą do wykonywania operacji matematycznych.
| Operator | Przykład | Wynik | Opis |
|---|---|---|---|
+ |
5 + 3 |
8 |
Dodawanie |
- |
5 - 3 |
2 |
Odejmowanie |
* |
5 * 3 |
15 |
Mnożenie |
/ |
6 / 2 |
3 |
Dzielenie |
% |
7 % 3 |
1 |
Reszta z dzielenia |
** |
2 ** 3 |
8 |
Potęgowanie |
Przykład:
Uwaga: Operator + może służyć także do łączenia stringów.
5. Operatory inkrementacji i dekrementacji
Służą do zwiększania lub zmniejszania wartości zmiennej o 1.
| Operator | Przykład | Wynik |
|---|---|---|
++ |
x++ |
Zwiększa wartość o 1 (po zwróceniu wartości) |
-- |
x-- |
Zmniejsza wartość o 1 (po zwróceniu wartości) |
++x |
Zwiększa wartość o 1 (przed zwróceniem wartości) | |
--x |
Zmniejsza wartość o 1 (przed zwróceniem wartości) |
Przykład:
6. Operatory porównania
Porównują wartości i zwracają wynik logiczny true lub false.
| Operator | Przykład | Wynik | Opis |
|---|---|---|---|
== |
5 == "5" |
true |
Porównanie wartości (bez typu) |
=== |
5 === "5" |
false |
Porównanie wartości i typu |
!= |
5 != 4 |
true |
Różne wartości |
!== |
5 !== "5" |
true |
Różne wartości lub typy |
> |
6 > 5 |
true |
Większe niż |
< |
3 < 5 |
true |
Mniejsze niż |
>= |
5 >= 5 |
true |
Większe lub równe |
<= |
4 <= 6 |
true |
Mniejsze lub równe |
Przykład:
Najlepsza praktyka:
Zawsze używaj === i !==, aby unikać nieoczekiwanych konwersji typów.
7. Operatory logiczne
Służą do łączenia lub negowania warunków logicznych.
| Operator | Przykład | Wynik | Opis |
|---|---|---|---|
&& |
true && false |
false |
AND – zwraca true, jeśli oba warunki są prawdziwe |
| | |
true | | false |
true |
OR – zwraca true, jeśli przynajmniej jeden warunek jest prawdziwy |
! |
!true |
false |
NOT – neguje wartość logiczną |
Przykład:
Short-circuiting (skrótowe działanie):
Operator && zatrzymuje się, gdy pierwszy operand to false.
Operator || zatrzymuje się, gdy pierwszy operand to true.
8. Operator warunkowy (ternary)
Skrócona forma instrukcji if...else.
Składnia:
Przykład:
9. Operatory łańcuchowe (Stringowe)
Operator + służy do łączenia tekstów (konkatenacji).
Przykład:
Od ES6 możesz używać template strings:
10. Operatory typów
typeof
Zwraca typ danej wartości.
Przykład:
instanceof
Sprawdza, czy obiekt jest instancją określonej klasy lub konstruktora.
Przykład:
11. Operatory rozproszenia (spread) i reszty (rest)
Spread (...) – rozprasza elementy tablicy lub obiektu
Rest (...) – zbiera wiele wartości do jednej zmiennej
12. Operator opcjonalnego łańcuchowania (?.)
Pozwala bezpiecznie odwoływać się do zagnieżdżonych właściwości obiektów, nawet jeśli któreś z nich nie istnieje.
Przykład:
Bez ?. kod powyżej spowodowałby błąd.
13. Operator nullish coalescing (??)
Zwraca prawą wartość tylko wtedy, gdy lewa jest null lub undefined (a nie dla 0 lub false).
Przykład:
14. Operatory bitowe (rzadziej używane)
Działają na poziomie bitów (binarnie).
| Operator | Opis | Przykład |
|---|---|---|
& |
AND | 5 & 1 → 1 |
| |
OR | 5 | 1→5 |
^ |
XOR | 5 ^ 1 → 4 |
~ |
NOT | ~5 → -6 |
<< |
Przesunięcie w lewo | 5 << 1 → 10 |
>> |
Przesunięcie w prawo | 5 >> 1 → 2 |
Używane głównie w niskopoziomowych operacjach lub optymalizacji.
15. Kolejność wykonywania operatorów
JavaScript wykonuje operacje zgodnie z priorytetem operatorów. Np. mnożenie ma wyższy priorytet niż dodawanie.
Przykład:
Aby zmienić kolejność — użyj nawiasów:
16. Dobre praktyki
- Używaj
===i!==zamiast==i!= - Pamiętaj o kolejności operatorów
- Korzystaj z operatora warunkowego dla prostych warunków
- Używaj
??zamiast||, gdy chcesz ignorować tylkonulliundefined - Zwracaj uwagę na konwersję typów przy użyciu operatora
+
17. Podsumowanie
| Typ operatora | Przykład | Opis |
|---|---|---|
| Przypisania | x = 5, x += 2 |
Przypisanie wartości |
| Arytmetyczne | +, -, *, /, %, ** |
Operacje matematyczne |
| Porównania | ===, >, < |
Porównywanie wartości |
| Logiczne | &&, | |, ! |
Łączenie warunków |
| Inkrementacji | ++, -- |
Zwiększanie / zmniejszanie |
| Warunkowy | ?: |
Skrócony if...else |
| Typów | typeof, instanceof |
Sprawdzanie typu |
| Spread / Rest | ... |
Rozpraszanie lub zbieranie danych |
| Nullish | ?? |
Wartość domyślna dla null i undefined |
| Opcjonalne łańcuchowanie | ?. |
Bezpieczny dostęp do właściwości |
18. Wnioski
- Operatory są podstawowym narzędziem logiki i matematyki w JavaScript.
- Ich prawidłowe użycie wpływa na czytelność i bezpieczeństwo kodu.
- Znajomość priorytetów i różnic między operatorami (np.
==vs===,||vs??) to klucz do unikania błędów. - W nowoczesnym kodzie warto korzystać z ES6+ operatorów, takich jak
?.,??,...— które upraszczają składnię i zwiększają bezpieczeństwo.
Podsumowanie praktyczne:
* Używaj ===, let / const, operatorów logicznych i warunkowych z rozwagą.
* Pamiętaj, że JavaScript potrafi automatycznie konwertować typy — dlatego zawsze testuj swój kod z różnymi danymi wejściowymi.