Pułapka: zapomniany break i porównanie ścisłe w case
Operator ? : - skrócony if
Rozgrzewka · 3 minuty
Rozgrzewka: if, else if
W funkcji getDiscount z poprzedniej lekcji rabat zależał od koloru (zielony LUB niebieski) ORAZ kwoty zakupów. Jaki operator łączył te dwa warunki?
Ile bloków else if może stać między if a else?
Dlaczego warunek (a || b) && c wymaga nawiasu wokół ||?
Część 1 · Instrukcja switch
switch - znacie to już z PHP
W kursie PHP, na lekcji 05, pisaliście switch w PHP. W JavaScript budowa jest taka sama: switch, w nawiasie jedna wartość, gałęzie case zakończone break, na końcu default.
let day = "wt";
switch (day) {
case"pn":
console.log("siłownia");
break;
case"wt":
console.log("nauka JS");
break;
default:
console.log("wolne");
}
Różnica względem PHP: JavaScript porównuje wartość w case ze zmienną ściśle (jak ===) - PHP robi to luźno (jak ==). Liczba 10 i tekst "10" to dla JS switch dwie różne rzeczy.
let label;
if (level === 1) {
label = "łatwy";
} else if (level === 2) {
label = "średni";
} else if (level === 3) {
label = "trudny";
} else {
label = "nieznany";
}
switch
let label;
switch (level) {
case 1: label = "łatwy"; break;
case 2: label = "średni"; break;
case 3: label = "trudny"; break;
default: label = "nieznany";
}
MDN: Conditionals (sekcja przed składnią switch: „For cases where you just want to set a variable to a certain choice of value… the syntax can be a bit cumbersome, especially if you've got a large number of choices. In such a case, switch statements are your friend”)
Część 3 · pułapka
Bez break: przeciek do sąsiada
let n = 2;
let message = "";
switch (n) {
case 1:
message += "jeden ";
case 2:
message += "dwa ";
case 3:
message += "trzy ";
default:
message += "inne";
}
console.log(message);
// dwa trzy inne
JavaScript znajduje pasujący case 2 i od tego miejsca wykonuje wszystko w dół, aż trafi na break albo koniec bloku - nawet default. To zjawisko nazywa się „fall-through” (przeciek). Nie jest błędem składni, więc nikt Was nie ostrzeże.
MDN: Web/JavaScript/Reference/Statements/switch („If break is omitted, execution will proceed to the next case clause… This behavior is called fall-through”)
Część 4 · operator ? :
Jedna linia: warunek ? tak : nie
if … else w czterech liniach
let label;
if (age >= 18) {
label = "dorosły";
} else {
label = "niepełnoletni";
}
to samo w jednej
let label = age >= 18 ? "dorosły" : "niepełnoletni";
console.log(label);
Nazwa: operator warunkowy (ternary). Czytacie: „jeśli age >= 18, to "dorosły", inaczej "niepełnoletni"”. Do jednego prostego wyboru, który od razu ma trafić do zmiennej - kilka gałęzi to wciąż switch albo if.
Ciekawostka z Wikipedii: taki operator pojawił się już w 1963 roku w języku CPL, w innym zapisie. Dzisiejszy zapis warunek ? tak : nie wprowadził język C i to on stał się wzorem dla JavaScriptu.
MDN: Learn_web_development/Core/Scripting/Conditionals (sekcja „Ternary operator”: „can take up a lot less code than an if...else block if you have two choices…”) · ciekawostka: „The construct first appeared in CPL in 1963… C introduced the syntax a ? b : c… which is widely used by other languages with C-like syntax” · en.wikipedia.org/wiki/%3F
Egzamin EE.09
Tak pytają na egzaminie
1. Dany jest kod w języku JavaScript:
var x = 10;
switch(x) { case"10": alert("Test instrukcji switch"); }
Alert nie zostanie wyświetlony, ponieważ
nie zastosowano instrukcji break.
nie zastosowano wyrażenia default.
wartość zmiennej x nie została zdefiniowana przed instrukcją switch.
w instrukcji switch w wyrażeniu case nie dostosowano zapisu wartości do typu zmiennej x.
2. Instrukcją równoważną funkcjonalnie do przedstawionej instrukcji JavaScript
switch (operation) { case 1: result = a + b; break; case 2: result = a - b; break; case 3: result = a * b; break; case 4: result = a / b; break; }