Operatory

W JavaScript operator to specjalny symbol lub słowo kluczowe służące do wykonania operacji na jednym lub więcej operandach, a wynik tej operacji prowadzi do zmiany wartości lub do stworzenia nowej wartości. Operand to wartość na której wykonywana jest operacja. Operatory mogą być różnorodne: od arytmetycznych (takich jak +, -, *, / do manipulowania liczbami), przez porównawcze (==, !=, ===, !== do porównywania wartości), po logiczne (&&, ||, ! do operacji na wartościach logicznych) i inne.

Operatory można podzielić ze względu na ilość operandów, na których operują:

1. Operatory unarne: Działają na jednym operandzie. Przykłady to negacja logiczna !, inkrementacja ++ i dekrementacja --.
2. Operatory binarne: Wymagają przynajmniej dwóch operandów. Należą tu operatory arytmetyczne jak +, -, *, /, operatory porównania jak ==, !=, >, <, oraz operatory logiczne && i ||.
3. Operator ternarny: Działają na trzech operandach. W JavaScript istnieje tylko jeden operator ternarny: operator warunkowy ?:.

Kolejność wywoływania

Stosując operatory musimy mieć na uwadze kolejność ich wykonywania, to JavaScript narzuca ich kolejność nie my. Oto ogólna kolejność wywoływania operatorów, od najwyższego priorytetu do najniższego:

1. Operatory unarne: np. typeof, ++, --, !, +
2. Mnożenie i dzielenie: *, /, %.
3. Dodawanie i odejmowanie: +, -.
4. Operatory porównawcze: >, <, >=, <=.
5. Równość: ==, !=, ===, !==.
6. Operatory logiczne: &&, ||.
7. Przypisanie: =, +=, -=, *=, /=, itd.

Mając na uwadze to, że sami możemy zwiększyć priorytet stosując (), tak jak w działaniach matematycznych.

Przykład:

let result = 3 + 4 * 2 / (1 - 5) ** 2;

W tym przykładzie:

1. Najpierw wykonuje się działanie w nawiasach (1 - 5).
2. Następnie obliczana jest potęga **.
3. Po tym wykonuje się mnożenie * i dzielenie /.
4. Następnie realizowane jest dodawanie +.
5. Na końcu wykona się przypisanie wyniku =

Operatory unarne

Inkrementacja ++

Operator przekształca operand w liczbę i dodaje do niej liczbę 1. Jeżeli nie ma takiej możliwości to zwraca NaN. Wyróżniamy dwa sposoby użycia tego operatora:

Postinkrementacja

let a = 5; 
let c = a++;
//c == 5
//a == 6

Takie użycie powoduje, że najpierw JavaScript przypisuje oryginalną wartość do nowej zmiennej a następnie zwiększa ją o 1.

Preinkrementacja

let x = 5; 
let y = ++x;
//y == 6
//x == 6

Takie użycie powoduje, że najpierw JavaScript zwiększa o 1 zmienną a następnie nową wartość przypisuje do nowej zmiennej.

Ten operator częściej stosuje się bez przypisywania do nowej zmiennej, np w pętlach:

let a = 5;
a++;

Dekrementacja —

Operator działa analogicznie jak ++ z tym że odejmuje 1 od operandu.

+

Operator ten występuje z jednym operandem jak i z dwoma. Z jednym służy do konwersji operand-a na liczbę.

1. Przykład +

let numString = "123"; // string
let numNumber = +numS; // number

+false; // 0
+true;  // 1

2. Przykład +

// Załóżmy, że otrzymujemy datę jako string z API
let dateString = "2023-01-01T12:00:00.000Z";

// Konwertujemy string na timestamp
let timestamp = +new Date(dateString);

console.log(timestamp); // Wypisze timestamp daty

3. Przykład +

// Użytkownik wpisuje wiek w formularzu
let ageString = document.getElementById('ageInput').value;

// Konwertujemy string na liczbę
let ageNumber = +ageString;

if (ageNumber >= 18) {
  console.log("Użytkownik jest pełnoletni.");
} else {
  console.log("Użytkownik jest niepełnoletni.");
}

Negacja !

Operator negacji odwraca wartość logiczną operandu. Jeśli operand jest prawdziwy (truthy), ! konwertuje go na false, a jeśli jest fałszywy (falsy), na true.

1. Przykład !

let user = {};
if (!user.name) {
  console.log("Nazwa użytkownika nie istnieje.");
}

Używamy ! do sprawdzenia, czy właściwość nie istnieje lub jest fałszywa.

2. Przykład !

if (!functionThatReturnsTrueOrFalse()) {
  console.log("Funkcja zwróciła fałsz.");
}

Wykorzystanie ! do bezpośredniego sprawdzania wyniku funkcji.

3. Przykład !

let value = 5;
console.log(!!value); // Zwraca true

Podwójna negacja

Pozostałe operatory unarne to: ~,delete, typeof, void

Operatory binarne

+

Operator + z dwoma operandami w JavaScript jest najczęściej używany jako operator dodawania liczbowego, ale może również służyć do łączenia (konkatenacji) stringów. Kiedy oba operandy są liczbami, + sumuje je. Na przykład:

let sum = 10 + 5; // 15

Gdy przynajmniej jeden z operandów jest stringiem, + łączy je w jeden string, czyli

let message = "Masz " + 5 + " nowych wiadomości"; // "Masz 5 nowych wiadomości"

let sum1 = "5" + "3";//  "53"
let sum2 = 5 + "3";//  "53"

Operator ten jest bardzo elastyczny i jego zachowanie zależy od typów operandów, które przyjmuje.

Operatory porównania >,<,<=, >=

• > (większe niż): Sprawdza, czy lewy operand jest większy od prawego.
• < (mniejsze niż): Sprawdza, czy lewy operand jest mniejszy od prawego.
• <= (mniejsze bądź równe): Sprawdza, czy lewy operand jest mniejszy lub równy prawemu.
• >= (większe bądź równe): Sprawdza, czy lewy operand jest większy lub równy prawemu.

W przeciwieństwie do operatora +, gdzie string miał większy priorytet, w operatorach porównania to liczby mają większy priorytet.

W przeciwieństwie do operatora + gdzie stringi mogą „dominować”. Dla operatorów porównania, jak >, <, <=, >=, jeśli jeden z operandów jest liczbą, a drugi stringiem, JavaScript próbuje prze konwertować string na liczbę. Na przykład:

if(10 > "2") {
  console.log("Kod się wykona");
}

tutaj string „2” jest konwertowany na liczbę, więc porównanie to 10 > 2, co jest true.

if("10" > "2") {
  console.log("Nie wykona się");
}

w tym przypadku następuje porównanie dwóch stringów.

if ("dwa" > 2) {
  console.log("Nie wykona się");
}

ciąg „dwa” jest konwertowany na number w tym przypadku dostaniemy NaN.

==

Operator równości porównuje dwie wartości, jednak w przypadku różnych typów danych, próbuje je dopasować (np. konwertując string na liczbę) przed porównaniem. W efekcie, porównanie

if(5 == '5') {
  console.log("Kod się wykona");
}

ponieważ mimo różnych typów danych (liczba i string), są one traktowane jako równoważne po konwersji. Konwersja typów działa zgodne z zasadami opisanymi tutaj – Konwersje typów w JavaScript

===

Z kolei operator === (ścisła równość) porównuje zarówno wartość, jak i typ danych. Nie dokonuje konwersji typów. W przypadku 5 === '5' wynik będzie false, ponieważ mamy do czynienia z różnymi typami danych: liczbą i stringiem.

Równość == nie jest zalecana do użycia, prawie w każdym przypadki powinniśmy korzystać ze ścisłej równości.

!= i !==

Operator != (nierówność) porównuje dwie wartości pod kątem ich nierówności, ale podobnie jak ==, dokonuje konwersji typów przed porównaniem. Na przykład, 5 != '5' zwróci false, ponieważ string '5′ jest konwertowany na liczbę.

Natomiast operator !== (ścisła nierówność) porównuje wartości pod kątem nierówności zarówno wartości, jak i typu danych, bez dokonywania konwersji typów. W przypadku 5 !== '5' wynik będzie true, ponieważ mamy do czynienia z różnymi typami danych: liczbą i stringiem.

LUB ||

Operator logiczny || zwraca true jeśli którykolwiek z podanych operandów jest prawdziwy (czyli „truthy”).

if (true || false) {
  //warunek jest prawdziwy
}

Warto też pamiętać, że niektóre rzeczy jak 0, null są „falsy” (traktowane jak fałsz), a inne jak liczby różne od zera są „truthy”.

if (0 || null || 34) {
  //warunek jest prawdziwy, bo 34 jest wartością "truthy"
}

Dzięki czemu || jest niezwykle użyteczny do przypisywania domyślnych wartości lub warunkowego wywoływania funkcji.

function greet(name) {
  // Używamy operatora || do przypisania domyślnego imienia, jeśli name jest falsy (np. null, undefined, '')
  let userName = name || "Gość";
  console.log("Witaj, " + userName);
}

greet("Anna"); // Wyświetli: Witaj, Anna
greet();       // Wyświetli: Witaj, Gość

Można go także użyć do wywołania funkcji tylko wtedy, gdy jakiś warunek nie jest spełniony, np

function userHasAccess() {
  // Na potrzeby przykładu, zwróćmy false, symulując brak dostępu
  return false;
}

function showAccessDenied() {
  console.log("Dostęp zabroniony. Nie masz uprawnień do tej sekcji.");
}

// Sprawdzenie dostępu użytkownika i ewentualne wywołanie funkcji pokazującej brak dostępu
userHasAccess() || showAccessDenied();

ORAZ &&

Operator logiczny && zwraca true jeśli wszystkie z podanych operandów jest prawdziwych (czyli „truthy”).

if (true && false) {
  //warunek NIE jest spełniony
}

Operator && w JavaScript najpierw ocenia wyrażenie po lewej stronie. Jeśli jest ono truthy, sprawdza wyrażenie po prawej. Całe wyrażenie && zwraca wartość z prawej strony, jeśli obie strony są truthy. Jeśli lewa strona jest falsy, zwraca jej wartość i nie ocenia prawej strony.

let settings = user && user.getSettings();

if (settings) {
  console.log("Ustawienia użytkownika zostały załadowane.");
}

W tym kodzie, settings zostanie przypisane wartością zwróconą przez user.getSettings(), ale tylko wtedy, gdy obiekt user istnieje (czyli jest truthy). Jeśli user jest falsy (np. null lub undefined), wyrażenie user && user.getSettings() zwróci user, a metoda getSettings() nie zostanie wywołana, co zapobiega błędom.

?? nullish coalescing

Służy do zwracania prawej strony operacji, jeśli lewa strona jest null lub undefined. Różnica między operatorem ?? a || polega na tym, że || zwraca prawą stronę, jeśli lewa jest jakąkolwiek wartością falsy (np. 0, '', false), podczas gdy ?? zwraca prawą stronę tylko wtedy, gdy lewa strona jest dokładnie null lub undefined.

let userAge = null;
let defaultAge = 25;
let age = userAge ?? defaultAge; // Zwróci 25, ponieważ userAge jest null

let userName = '';
let defaultName = 'Gość';
let name = userName ?? defaultName; // Zwróci '', ponieważ userName jest pustym stringiem, a nie null/undefined

Różnica pomiędzy operatorem ||

let userDefinedItemsPerPage = null;
let defaultItemsPerPage = 10;

let itemsPerPageWithOR = userDefinedItemsPerPage || defaultItemsPerPage;
console.log(itemsPerPageWithOR); // Wypisze 10, co jest poprawne

// Zmieniamy paginację na 0
userDefinedItemsPerPage = 0;

// Ponownie używając operatora ||
itemsPerPageWithOR = userDefinedItemsPerPage || defaultItemsPerPage;
console.log(itemsPerPageWithOR); // Wypisze 10, co jest niepoprawne, ponieważ ustawiliśmy ja na 0

// Używając operatora ??
let itemsPerPageWithNullish = userDefinedItemsPerPage ?? defaultItemsPerPage;
console.log(itemsPerPageWithNullish); // Wypisze 0, co jest poprawnym wynikiem

Opisałem te najpopularniejsze operatory, miej na uwadze, że jest ich o wiele więcej.