JavaScript · lekcja 06

Operatory 2/2:
porównujemy i łączymy warunki

Dzisiaj:

Dwa znaki równości: == kontra ===
Reszta porównań: < > <= >= i != !==
Operatory logiczne: &&, || i !
Ćwiczenie przy komputerze: warunek złożony z wiekiem i dowodem

Rozgrzewka · 3 minuty

Rozgrzewka: operatory arytmetyczne

Co zwróci "5" + 3 w JavaScript?
Czym różni się x++ od ++x?
Jaki jest krótszy zapis działania x = x + 10?

Część 1 · Operatory porównania

== kontra ===

Operator porównania sprawdza, czy dwie wartości są sobie równe, i zwraca true albo false. W JavaScript są dwa znaki równości: == porównuje same wartości i po drodze zamienia typ, === porównuje wartość i typ naraz - nic nie zamienia. To jak dwa sita: jedno przepuszcza 5 i "5" razem, drugie tylko wtedy, gdy typ też się zgadza.

Ciekawostka z MDN: null i undefined to w == wyjątek specjalny - jeśli jedna strona to null albo undefined, druga też musi nią być, żeby wynik był true. Dlatego 0 == null daje false, mimo że 0 samo w sobie liczy się jako falsz.

MDN: Learn_web_development/Core/Scripting/Math (sekcja „Comparison operators”) · ciekawostka: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality („If one of the operands is null or undefined, the other must also be null or undefined to return true. Otherwise return false.”, tłum. własne: „Jeśli jeden z operandów to null lub undefined, drugi też musi być null lub undefined, żeby zwrócić true. W przeciwnym razie zwraca false.”)

Część 2 · Reszta porównań

Mniejsze, większe, różne

Oprócz równości JavaScript ma cztery znaki do porównywania liczb, takie same jak w matematyce, i dwa znaki „różne”.

Zapis	Nazwa	Przykład	Wynik
`<`	mniejszy niż	`10 < 6`	`false`
`>`	większy niż	`10 > 20`	`false`
`<=`	mniejszy lub równy	`3 <= 2`	`false`
`>=`	większy lub równy	`5 >= 4`	`true`
`!=`	różne (dopuszcza różne typy)	`5 != "5"`	`false`
`!==`	różne wartości lub różne typy	`5 !== "5"`	`true`

MDN: Math (sekcja „Comparison operators”, tabela operatorów)

Część 3 · Operatory logiczne

&&, || i !

&& (AND) łączy warunki: całość jest prawdziwa tylko wtedy, gdy WSZYSTKIE warunki są prawdziwe. || (OR) łączy warunki inaczej: całość jest prawdziwa, gdy CHOĆ JEDEN warunek jest prawdziwy. ! (NOT) odwraca wartość - zamienia true na false i odwrotnie.

MDN: Learn_web_development/Core/Scripting/Conditionals (sekcja „Logical operators: and, or, and not”)

Część 4 · Łączenie warunków

Warunek złożony

Warunki porównania można łączyć operatorem logicznym w jedno wyrażenie. Przykład: żeby ktoś mógł wypożyczyć coś tylko dla dorosłych, musi mieć skończone 18 lat i mieć przy sobie dowód - obie rzeczy naraz, więc &&.

Część 5 · Częsty błąd

Pułapka: = zamiast ==

Jeden znak = to przypisanie (wstawia nową wartość do zmiennej), dwa znaki == (albo trzy ===) to porównanie. Pomylenie ich w warunku if to jeden z najczęstszych błędów początkujących - kod się uruchamia bez czerwonego komunikatu, ale działa źle.

ESLint, reguła no-cond-assign (eslint.org/docs/latest/rules/no-cond-assign) blokuje dokładnie ten błąd

Egzamin EE.09 / E.14

Tak pytają na egzaminie

1. W języku skryptowym JavaScript operatory: ||, && należą do grupy operatorów

bitowych.
logicznych.
przypisania.
arytmetycznych.

2. W ramce przedstawiono kod JavaScript z błędem logicznym. Program powinien wypisywać informację, czy liczby są sobie równe czy nie, lecz nie wykonuje tego. Wskaż odpowiedź, która dotyczy błędu.

var x = 5;
var y = 3;
if (x = y)  document.getElementById("demo").innerHTML = 'zmienne są równe';
else        document.getElementById("demo").innerHTML = 'zmienne się różnią';

Nieprawidłowo zadeklarowano zmienne.
Przed klauzulą else nie powinno być średnika.
W klauzuli if występuje przypisanie zamiast porównania.
Instrukcje wewnątrz sekcji if oraz else powinny być zamienione miejscami.

CKE, E.14, czerwiec 2019, zadanie 31 · CKE, E.14, styczeń 2017, zadanie 40 (bank pytań, przedmiot strony, temat javascript)

Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: porównania i warunek złożony

Otwórz swój plik script.js (ten sam, w którym pracowaliście na poprzedniej lekcji).
Dopisz let x = "5"; i let y = 5;, wypisz w konsoli x == y oraz x === y.
Zadeklaruj let age = 20; i let hasIdCard = true;, wypisz w konsoli age >= 18 && hasIdCard.
Zmień age na 16 i sprawdź wynik jeszcze raz - zobaczysz, że && wymaga prawdy z obu stron.
Zapisz plik, odśwież page.html w przeglądarce i sprawdź wynik w konsoli (F12 → Console).
Dla chętnych: zapisz zmiany w swoim repozytorium - commit „Dodaje porównania i operatory logiczne”.

Na koniec

Sprawdź się

Czym różni się == od ===?
Kiedy wyrażenie z && zwraca true?
Jaki błąd kryje się w warunku if (x = y)?

Na następnej lekcji: instrukcje warunkowe if, else i else if.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`==` i `!=` (dopuszczają różne typy)	ESLint, reguła `eqeqeq`, wymusza `===` i `!==` - eliminuje niespodzianki przy zamianie typu.	narzędzia
`if (x = y)` zamiast `if (x == y)`	ESLint, reguła `no-cond-assign`, blokuje przypisanie wewnątrz warunku `if`.	narzędzia
`&&` i `\|\|` liczone ręcznie na kartce	Krótkie spięcie (short-circuit): `user && user.name` sprawdza, czy `user` istnieje, zanim odczyta jego pole - częsty wzorzec w kodzie produkcyjnym.	nadal w użyciu
Warunek złożony `age >= 18 && hasIdCard`	Ten sam wzorzec waliduje formularze rejestracji: np. `age >= 18 && consent === true`.	nadal w użyciu

ESLint, reguła eqeqeq (eslint.org/docs/latest/rules/eqeqeq) · ESLint, reguła no-cond-assign (eslint.org/docs/latest/rules/no-cond-assign)