Operatory w JavaScript: przewodnik z przykładami

Operatory to sposób, w jaki wyrażenia wykonują pracę

Każda nietrywialna linijka JavaScript jest zbudowana z operatorów: symboli, które biorą jedną lub dwie wartości i tworzą nową. + dodaje, === porównuje, && łączy wartości logiczne, ? : wybiera jedną z dwóch wartości. Większość znasz z innych języków, ale kilka ma specyficzne dla JavaScript dziwactwa, które warto poznać od razu.

Przejdziemy przez nie według kategorii, a na koniec zostawimy te, po które sięgasz najrzadziej, ale które mają znaczenie, gdy są potrzebne.

Operatory arytmetyczne

Podstawowe działają tak, jak się spodziewasz:

console.log(7 + 3);    // 10
console.log(7 - 3);    // 4
console.log(7 * 3);    // 21
console.log(7 / 3);    // 2.3333...
console.log(7 % 3);    // 1   (remainder)
console.log(7 ** 3);   // 343 (exponent)

Kilka rzeczy, na które warto zwrócić uwagę:

• / zawsze dzieli zmiennoprzecinkowo. 7 / 2 to 3.5, a nie 3. Jeśli chcesz liczbę całkowitą, użyj Math.floor(7 / 2) albo Math.trunc(7 / 2).
• % to reszta z dzielenia, a nie matematyczne modulo. Zachowuje znak lewego operandu: -7 % 3 to -1, a nie 2.
• + jest przeciążony. Jeśli którakolwiek strona jest stringiem, łączy zamiast dodawać: "3" + 1 to "31". Więcej o tym za chwilę.

Inkrementacja i dekrementacja

let count = 5;
count++;           // post-increment: count is now 6
console.log(count);

let other = ++count;  // pre-increment: count becomes 7 first, then assigned
console.log(other, count);

Różnica między count++ a ++count ma znaczenie tylko wtedy, gdy używasz wartości wyrażenia w tej samej linijce. Jako osobna instrukcja oba robią to samo. Większość przewodników stylu woli count += 1, bo jest jaśniejsze.

Operator + ma dwie osobowości

Na tym każdy potyka się przynajmniej raz:

console.log(1 + 2);         // 3
console.log("1" + 2);       // "12"
console.log(1 + "2");       // "12"
console.log("price: " + 5); // "price: 5"

Jeśli którykolwiek operand jest stringiem, + staje się łączeniem stringów i zamienia drugą stronę na string. Wszystkie inne operatory arytmetyczne działają odwrotnie: zamieniają stringi na liczby:

console.log("10" - 2);   // 8
console.log("10" * 2);   // 20
console.log("10" / "2"); // 5

Wniosek: gdy budujesz stringi, wybieraj template literals (`price: ${5}`). Gdy liczysz, upewnij się, że dane wejściowe naprawdę są liczbami: Number(x) albo parseInt(x, 10) konwertuje jawnie.

Operatory porównania

Porównania zwracają wartości logiczne. Są dwie odmiany: ścisła i luźna.

console.log(5 === 5);    // true
console.log(5 === "5");  // false  (different types)
console.log(5 == "5");   // true   (== coerces)
console.log(5 !== "5");  // true
console.log(5 != "5");   // false

=== i !== są ścisłe: ta sama wartość i ten sam typ. == i != przed porównaniem konwertują typy, co prowadzi do niespodzianek, takich jak null == undefined równe true czy [] == false równe true. Domyślnie używaj === i !==. Jedyny popularny wyjątek to x == null, wygodny skrót na pytanie "czy x to null albo undefined?"

Operatory porządku działają na liczbach tak, jak się spodziewasz, a na stringach alfabetycznie:

console.log(3 < 5);         // true
console.log(5 >= 5);        // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");           // true (uppercase sorts before lowercase)

Porównywanie stringów opiera się na kodach znaków, więc rozróżnia wielkość liter. Jeśli potrzebujesz sortowania przyjaznego ludziom, użyj String.prototype.localeCompare.

Operatory logiczne

&& (AND), || (OR) i ! (NOT) łączą wartości logiczne, ale są ciekawsze, niż sugerowałaby czysta algebra Boole'a.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Haczyk: && i || nie zwracają true ani false. Zwracają jeden ze swoich operandów. && zwraca pierwszą wartość falsy albo ostatnią, jeśli wszystkie są truthy. || zwraca pierwszą wartość truthy albo ostatnią, jeśli wszystkie są falsy.

console.log("hi" && 42);      // 42     (both truthy, returns last)
console.log(0 && "hi");       // 0      (first falsy)
console.log("" || "fallback"); // "fallback"
console.log("name" || "anon"); // "name"

Dlatego widać wzorce takie jak const displayName = user.name || "Guest": weź pierwszą rzecz, która nie jest pusta. To zwięzłe, ale uważaj: || traktuje 0, "" i false jako powód do użycia wartości zapasowej. Jeśli to u ciebie poprawne wartości, użyj zamiast tego ?? (niżej).

Oba operatory działają też na skróty (short-circuit): jeśli lewa strona już przesądza o wyniku, prawa w ogóle się nie wykonuje.

const user = null;
// Safe - the right side is skipped because user is falsy.
user && user.sendEmail();

Operator nullish coalescing ??

?? działa jak ||, ale reaguje tylko na null lub undefined, a nie na 0, "" czy false.

const count = 0;

console.log(count || 10);   // 10  (0 is falsy, so fallback wins)
console.log(count ?? 10);   // 0   (0 isn't nullish, so kept)

const name = undefined;
console.log(name ?? "Anon"); // "Anon"

Używaj ??, gdy poprawna wartość może być falsy: liczniki, puste stringi, jawne false. Używaj ||, gdy każda wartość falsy ma oznaczać "brak". We współczesnym kodzie ?? to bezpieczniejszy wybór domyślny dla opcjonalnych wartości z wartością domyślną.

Operatory przypisania

= przypisuje. Formy złożone łączą przypisanie z innym operatorem:

let x = 10;
x += 5;    // x = x + 5  → 15
x -= 3;    // 12
x *= 2;    // 24
x /= 4;    // 6
x %= 4;    // 2
x **= 3;   // 8
console.log(x);

Są też logiczne operatory przypisania: ||=, &&= i ??=, które przypisują tylko wtedy, gdy obecna wartość spełnia warunek:

const config = { timeout: 0, retries: null };

config.timeout ??= 5000;   // only assigns if null/undefined; 0 stays
config.retries ??= 3;      // null, so assigned
config.host ||= "localhost"; // undefined is falsy, so assigned

console.log(config);

Przydają się do uzupełniania wartości domyślnych bez rozwlekłych instrukcji if.

Operator ternarny

condition ? a : b to wersja if/else w postaci wyrażenia. Zwraca a, gdy warunek jest truthy, a w przeciwnym razie b:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);

const count = 1;
const label = count === 1 ? "item" : "items";
console.log(`${count} ${label}`);

Operator ternarny świetnie sprawdza się przy krótkim wybieraniu wartości. Staje się nieczytelny, gdy tylko zaczniesz go zagnieżdżać: jeśli piszesz a ? b : c ? d : e, sięgnij po if/else albo obiekt z mapowaniem.

typeof i instanceof

typeof zwraca string opisujący typ operandu:

console.log(typeof 42);         // "number"
console.log(typeof "hi");       // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← historical bug, can't be fixed
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

Dwie pułapki warte zapamiętania: typeof null to "object" (błąd z 1995 roku, który jest już na stałe), a tablice też zgłaszają "object". Do tablic używaj Array.isArray(x), a do null x === null.

instanceof sprawdza, czy obiekt został utworzony z konkretnego konstruktora:

class Dog {}
const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Object);  // true (every object is)
console.log([] instanceof Array);    // true

Spread i rest używają tego samego ...

... zobaczysz w dwóch miejscach. Jako spread rozkłada obiekt iterowalny na pojedyncze elementy:

const nums = [1, 2, 3];
const more = [0, ...nums, 4];
console.log(more);                // [0, 1, 2, 3, 4]

const user = { name: "Ada" };
const full = { ...user, age: 30 };
console.log(full);                // { name: "Ada", age: 30 }

console.log(Math.max(...nums));   // 3

Jako rest zbiera wiele wartości w jedną tablicę, zwykle w parametrach funkcji albo w destrukturyzacji:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

const [first, ...others] = [10, 20, 30, 40];
console.log(first, others);    // 10 [20, 30, 40]

Ta sama składnia, odwrotne zadania. Spread rozpakowuje, rest zbiera. O tym, który jest który, decyduje kontekst: w wywołaniu lub literale rozkłada, w liście parametrów lub wzorcu destrukturyzacji zbiera.

Priorytet operatorów (w razie wątpliwości dodaj nawiasy)

Operatory mają priorytet, który decyduje, który wykona się pierwszy, gdy je mieszasz. Mnożenie wygrywa z dodawaniem, porównanie z operatorami logicznymi i tak dalej:

console.log(1 + 2 * 3);          // 7,  not 9
console.log((1 + 2) * 3);        // 9
console.log(true || false && false);  // true, because && binds tighter than ||

Pełna tabela jest długa i nikt nie pamięta jej całej. Prosty nawyk pokrywa 99% przypadków: gdy mieszasz operatory i nie masz pewności co do kolejności, dodaj nawiasy. Kod czyta się lepiej i nie zależy od pamięci czytelnika.

Operatory bitowe (rzadko to, czego chcesz)

Dla kompletności: &, |, ^, ~, <<, >> i >>> działają na binarnej reprezentacji liczb całkowitych. Zobaczysz je w kodzie graficznym, niskopoziomowych protokołach i w API, które używają masek bitowych jako flag.

console.log(5 & 3);   // 1   (0101 & 0011 = 0001)
console.log(5 | 3);   // 7
console.log(5 ^ 3);   // 6
console.log(~5);      // -6
console.log(1 << 3);  // 8

Popularna, ale wątpliwa sztuczka: n | 0 obcina liczbę do 32-bitowej liczby całkowitej i kiedyś nadużywano tego jako szybszego Math.trunc. Nie rób tego: Math.trunc jest czytelniejsze i działa dla liczb spoza zakresu 32 bitów.

Dalej: if/else

Operatory tworzą wartości, a if/else używa tych wartości, żeby wybrać gałąź kodu do wykonania. Większość tego, co zrobisz z powyższymi operatorami porównania i logicznymi, to przekazywanie ich wyników do instrukcji warunkowych, i właśnie o tym jest następna strona.