Základy JavaScriptu: jak učinit životní rozhodnutí pomocí prohlášení if / else

Řekněme, že jdete po rušné ulici uprostřed města. Chystáte se přejít silnici, když si všimnete, že semafor pro chodce zčervenal. Co děláš?

Zastavíš se, že?

A co se stane, když světlo znovu zezelená? Začnete chodit.

Tuto analogii můžeme také vložit do kódu. Zní to jako: „Pokud světlo zčervená, přestaňte chodit. Jinak pokračujte v chůzi “.

A to je, můj příteli, základ prohlášení if / else.

Příkaz if / else

Příkaz if / else pomáhá řídit, co váš program dělá v určitých situacích. Vypadá to takto:

if (podmínka) {
  // Dělej něco
} jinde {
  // Udělejte něco jiného
}

Podmínka říká JavaScript, co je třeba zkontrolovat před pokračováním. Pokud se podmínka vyhodnotí jako true, provede JavaScript kód v bloku if.

Pokud je podmínka vyhodnocena jako falešná, provede JavaScript kód z jiného bloku.

V příkladu semaforu kontrolujeme, zda je světlo červené:

// Poznámka: Tento příklad zatím neobsahuje platný kód
pokud (světlo je červené) {
  přestaň chodit
} jinde {
  pokračujte v chůzi
}

Pokud potřebujete zkontrolovat více než jednu podmínku, můžete použít jiné, pokud, což jde mezi tím, zda a další.

Kdy byste potřebovali takovou druhou podmínku?

Řekněme, že chcete přejít malou silnici. Pokud tam nejsou žádná auta, čekali byste, až semafor zezelená? Pořád křížíte, že?

V kódu by to vypadalo takto:

pokud (světlo je červené) {
  // Přestaňte chodit
} jinak pokud (auta kolem) {
  // Přestaňte chodit
} jinak pokud (ještě jedna podmínka) {
  // Ještě jednu věc
} jinde {
  // Proveďte poslední věc
}

V tomto případě, pokud se první podmínka vyhodnotí jako true, provede JavaScript kód v bloku if.

Pokud je první podmínka vyhodnocena jako false, JavaScript zkontroluje podmínku v dalším bloku if a zjistí, zda je vyhodnocena jako true. Pokud jsou bloky vyčerpány, pokračuje dál a dál.

Při kontrole, zda se stav vyhodnocuje jako pravdivý nebo nepravdivý, se JavaScript opírá o dvě věci:

  1. Porovnání operátorů
  2. Truthy a falešné hodnoty

Nejprve si povíme o operátorech porovnání.

Porovnání operátorů

Existují čtyři hlavní typy operátorů porovnání:

  1. Větší než (>) nebo větší nebo rovno (> =)
  2. Menší než (<) nebo menší nebo rovno (<=)
  3. Přísně se rovná (===) nebo se rovná ==
  4. Přísně nerovný (! ==) nebo nerovný! =

První dva typy operátorů porovnání jsou jednoduché. Používáte je k porovnání čísel.

24> 23 // Pravda
24> 24 // False
24> = 24 // Pravda
24 <25 // Pravda
24 <24 // False
24 <= 24 // Pravda

Další dva typy operátorů porovnání jsou také docela jednoduché. Používáte je ke kontrole, zda jsou věci stejné nebo nerovné.

24 === 24 // Pravda
24! == 24 // False

Existuje však rozdíl mezi přísně rovnými (===) vs rovnými (==) a přísně nerovnými (! ==) vs. nerovnými (! =):

'24' === 24 // False
'24' == 24 // Pravda
'24'! == 24 // Pravda
'24'! = 24 // False

Jak vidíte z výše uvedeného příkladu, když porovnáte řetězec 24 vs číslo 24, === se vyhodnocuje jako false, zatímco == se vyhodnocuje jako true.

Proč je to tak? Pojďme se podívat na rozdíl mezi přísně rovnými a rovnými.

=== vs == (nebo! == vs! =)

JavaScript je volně psaný jazyk. To znamená, že když deklarujeme proměnné, nezáleží na tom, jaký typ hodnoty jde do proměnné.

Můžete deklarovat jakýkoli primitiv nebo objekt a JavaScript provede zbytek automaticky za vás:

const aString = 'Nějaký řetězec'
const aNumber = 123
const aBoolean = true

Při porovnávání věcí s přísně rovnými (===) nebo přísně nerovnými (! ==) JavaScript kontroluje typ proměnné. To je důvod, proč se řetězec 24 a číslo 24 nerovná.

'24' === 24 // False
'24'! == 24 // Pravda

Při porovnávání věcí se stejnými (==) nebo nerovnými (! =) JavaScript převádí (nebo vrhá) typy, takže se navzájem shodují.

Obecně se JavaScript pokusí převést všechny typy na čísla, pokud používáte převaděč. V níže uvedeném příkladu je řetězec 24 před porovnáním převeden na číslo 24.

Proto při použití řetězce == odpovídá řetězec 24 číslu 24.

'24' == 24 // Pravda
'24'! = 24 // False

Booleovci mohou být také převedeni na čísla. Když JavaScript převede booleovské číslo na číslo, true se stane 1 a false se stane 0.

0 == false // True
1 == true // pravda
2 == true // False

Automatická konverze typu (při použití operátorů porovnání) je jednou z běžných příčin těžko dostupných chyb. Kdykoli porovnáte rovnost, vždy používejte přísné verze (=== nebo! ==).

Porovnání objektů a polí

Zkuste porovnat objekty a pole s === nebo ==. Budete velmi překvapeni.

const a = {isHavingFun: true}
const b = {isHavingFun: true}
console.log (a === b) // false
console.log (a == b) // false

Ve výše uvedeném příkladu vypadají a a b přesně stejně. Oba jsou objekty, mají stejné hodnoty.

Zvláštní je, že a === b bude vždy falešná. Proč?

Řekněme, že máte identického dvojče / sestry. Vypadáte přesně stejně jako vaše dvojče. Stejná barva vlasů, stejná tvář, stejné oblečení, stejné všechno. Jak mohou lidé vás odlišit? Bude to těžké.

V JavaScriptu má každý objekt „identifikační kartu“. Tato identifikační karta se nazývá odkaz na objekt. Když porovnáte objekty s operátory rovnosti, požádáte JavaScript, aby zkontroloval, zda tyto dva objekty mají stejnou referenci (stejnou identifikační kartu).

Je překvapením, že a === b bude nyní vždycky nepravdivé?

Pojďme to trochu vylepšit a přiřaďte k b.

const a = {isHavingFun: true}
const b = a

V tomto případě se a === b vyhodnotí jako true, protože b nyní ukazuje na stejný odkaz jako a.

console.log (a === b) // true

Truthy a Falsy

Pokud napíšete jednu podmínku (jako hasApples v příkladu níže) jako podmínku příkazu if / else, JavaScript zkontroluje truthy nebo falešnou hodnotu.

const hasApples = 'true'
if (hasApples) {
  // Jezte jablko
} jinde {
  // Koupit jablka
}

Falešná hodnota je hodnota, která se při převodu na booleovskou hodnotu vyhodnotí jako falešná. V JavaScriptu existuje šest možných falešných hodnot:

  1. Nepravdivé
  2. nedefinováno
  3. nula
  4. 0 (číselná nula)
  5. „“ (prázdný řetězec)
  6. NaN (není číslo A)

Truthy value, na druhé straně, je hodnota, která se vyhodnotí jako true, když se převede na booleovský jazyk. V případě čísel se vše, co není 0, převede na true.

V JavaScriptu je velmi podporována automatická konverze typu na truthy a falešné hodnoty, protože zkracují a zrozumitelnější kód.

Pokud například chcete zkontrolovat, zda je řetězec prázdný, můžete řetězec ihned použít ve stavu.

const str = ''
if (str) {
  // Pokud není řetězec prázdný, udělejte něco
} jinde {
  // Pokud je řetězec prázdný, udělejte něco
}

Zabalení

if / else příkazy slouží k ovládání toho, co váš program dělá v konkrétních situacích. To vám umožní určit, zda se budete chtít vydat na cestu nebo přes silnici, v závislosti na podmínkách, které vám jsou dány.

Při kontrole, zda je podmínka pravdivá nebo nepravdivá, se Javascript opírá o dvě věci:

  1. operátory porovnání
  2. truthy / falešné hodnoty

Pokud se vám tento článek líbil, budete se rádi učit Naučte se JavaScript - kurz, který vám pomůže naučit se stavět skutečné komponenty od nuly pomocí Javascriptu. Klikněte sem a dozvíte se více o Naučte se JavaScript, pokud máte zájem.

(Mimochodem, pokud se vám tento článek líbil, ocenil bych, kdybyste jej mohli sdílet. )

Původně zveřejněno na zellwk.com.