Proměnné a datové typy v JavaScriptu. Část 3 Kurzu JavaScriptu od začátečníka po pokročilého v 10 blogových příspěvcích

Toto je část 3 série blogových příspěvků o JavaScriptu, která vám pomůže prozkoumat téma proměnných a datových typů v JavaScriptu. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste mohli začít programovat v JavaScriptu. Bez dalších okolků, pojďme začít s třetím tutoriálem.

Proměnné a datové typy v JavaScriptu – obsah:

1. Proměnné
2. Základní datové typy v JavaScriptu

V tomto blogovém příspěvku budeme pokračovat tam, kde jsme skončili v druhém blogovém příspěvku. V této fázi byste měli mít otevřený prohlížeč Google Chrome a konkrétně otevřenou konzoli JavaScriptu. Pokud jste je z nějakého důvodu zavřeli, bylo by dobré je znovu otevřít.

Pokud jste na Macu, klávesová zkratka pro otevření konzole je stisknout “Option + Command + J”, poté co otevřete Chrome. Pokud používáte zařízení se systémem Windows, můžete použít klávesovou zkratku “Control + Shift + J” pro otevření konzole JavaScriptu, jakmile otevřete Chrome. Nebo můžete také přejít do nabídky v horní části a jít na Zobrazit -> Vývojář -> Konzole JavaScriptu.

Proměnné

Proměnné v JavaScriptu nebo jakémkoli jiném programovacím jazyce jsou extrémně běžné. A to z dobrého důvodu. Proměnné mají velmi kritickou roli v programování. Stručně řečeno, proměnné vám umožňují ukládat nějaká data, přesouvat je, měnit, aktualizovat nebo mazat ve vašem programu. Je to tak důležitý koncept, že existují 3 způsoby, jak můžete vytvářet proměnné. Programovací termín pro vytváření proměnných se nazývá “deklarace proměnných”, což v podstatě znamená, že deklarujeme proměnnou v paměti počítače.

Pro vytvoření proměnných použijeme jedno z 3 klíčových slov a to jsou: “var”, “let” a “const”. Jedna z prvních věcí, které byste měli vědět o těchto 3 klíčových slovech, je, že až do roku 2015 se používalo pouze klíčové slovo “var” a klíčová slova “let” a “const” byla zavedena se standardem JavaScriptu nazvaným ES6 nebo ES2015.

Pokud nemáte ponětí, co je ES6 nebo ES2015, zde je to, co byste o tom měli vědět. Když JavaScript poprvé vyšel, různé společnosti implementovaly různé verze JavaScriptu a musel existovat standard, aby váš kód běžel předvídatelně a spolehlivě ve všech hlavních prohlížečích. Takže organizace zvaná ECMA (Evropská asociace výrobců počítačů) přišla s sadou standardů JavaScriptu, které by prohlížeče měly implementovat. Takže pokud dodržujete tyto standardy při psaní JavaScriptu, váš kód by měl běžet předvídatelně podle těchto standardů. Tento standard se nazývá EcmaScript a od roku 1997 vydávají aktualizované standardy. A od roku 2015 vydávají tyto standardy každoročně, a proto je nejnovější vydaný standard nazván ES2021 k datu psaní tohoto blogového příspěvku.

Ale ne všechny verze jsou stejné, některé rozdíly ve verzích nejsou tak velké, zatímco některé přinášejí docela zásadní změny do jazyka. Poslední velké změny se staly s ES2015, také nazývaným ES6, protože to byla verze šest standardizace ECMAScript. Jedna z významných změn se týkala deklarací proměnných.

Před ES6 se používalo pouze klíčové slovo “var” a to byla jediná cesta, jak deklarovat proměnné, a proto název “var”. Klíčové slovo var přicházelo s flexibilitou, která mohla způsobit nežádoucí problémy. Protože bylo výrazně flexibilní, bylo snazší udělat chyby s proměnnými, pokud jste byli méně opatrní, než byste měli být. Například, pokud jste deklarovali proměnnou s názvem “user1”, nemůžete znovu deklarovat proměnnou s názvem user1 s novými klíčovými slovy “let” a “const”, ale mohli byste to udělat s klíčovým slovem “var”. A pokud zapomenete, že už máte user1 ve svém programu, při druhé deklaraci user1 s informacemi jiného uživatele byste přepsali skutečné informace prvního uživatele, což by efektivně smazalo informace prvního uživatele.

// to může způsobit zmatek
var user1 = "John";
var user1 = "Jack";
// pokud se pokusíte udělat to samé 
// s let nebo const dostanete chybu
let user1 = "John";
let user1 = "Jack";
// stejně tak dostanete chybu
// pokud se pokusíte udělat to samé s klíčovým slovem const
const user1 = "John";
const user1 = "Jack";

Ale není to tak, že byste nikde neviděli klíčové slovo “var”, určitě ho uvidíte, zejména v některých kurzech JavaScriptu pro začátečníky. Zejména pokud jsou starší pár let, existuje spousta tutoriálů, které vám stále ukazují starý způsob psaní JavaScriptu. Ale realita je taková, že to už prostě není nejlepší praxe. Místo toho je nejlepší praxí používat klíčová slova “let” nebo “const” při deklaraci proměnných, v závislosti na vašich potřebách. Ale o jaké potřeby se bavíme? Stručně řečeno, pokud plánujete změnit hodnotu uvnitř proměnné, budete chtít použít klíčové slovo “let”, pokud víte, že hodnotu v proměnné nezměníte, budete chtít použít “const”. Pojďme se podívat na některé příklady deklarací proměnných pomocí jak let, tak const.

// můžeme použít "let" když chceme sledovat úroveň hry uživatele
// protože víme, že se změní
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// můžeme použít klíčové slovo "const" při deklaraci ID uživatele
// protože víme, že ho nezměníme
const userId = 1010101999;

Pokud jste si také všimli z výše uvedeného kódu, s nejnovějšími nejlepšími praktikami píšeme klíčová slova pro deklaraci pouze jednou, a to při prvním deklarování proměnné. Když chceme později změnit hodnotu uvnitř proměnné, nepoužíváme žádné klíčové slovo před názvem proměnné.

Když chceme přistupovat k datům, která tyto proměnné nebo konstanty obsahují, můžeme jednoduše použít jejich název. Například, pokud chceme uživateli ukázat jeho úroveň hry a jeho ID uživatele, uděláme to následujícím kódem:

// můžeme přidat userID na konec věty s plusovým znakem
// to vysvětlíme později v tutoriálu
alert("Vaše uživatelské ID je: " + userId);
// můžeme také uživateli ukázat jeho úroveň hry takto
alert("Vaše aktuální úroveň hry je: " + gameLevel);
// alternativně můžeme přímo zobrazit 
// obsah proměnných tím, že je ukážeme uvnitř alertu
alert(userId);
alert(gameLevel);

Spuštění posledních dvou bloků kódu by poskytlo následující výstupy:

Jak pojmenovat své proměnné?

Při pojmenovávání svých proměnných existují určitá pravidla a konvence, které byste měli zvážit. První úvaha je, jaké znaky můžete použít k pojmenování svých proměnných? Mohou začínat nebo končit číslem? Existuje nějaká obecná nepsaná pravda o pojmenovávání vašich proměnných? Pojďme na to odpovědět a ještě více.

Různé programovací jazyky mají různé konvence pro pojmenovávání proměnných. V JavaScriptu je konvencí pojmenovávat je tím, co se nazývá “camel casing”, a to vypadá takto. Pokud má název proměnné pouze jedno slovo, pak to slovo napíšete celé malými písmeny. Pokud je v názvu proměnné více slov, pak napíšete první slovo malými písmeny a všechna následující slova začnete velkým písmenem a napíšete je bez mezer nebo jiných znaků. Například, pokud děláme hru, mohli bychom pojmenovat proměnné takto:

// proměnná s jedním slovem
let strength = 50;
// popisný název, který zahrnuje více slov
let numberOfArrowsLeft = 145;

Kromě používání abecedních znaků můžeme také používat čísla, dolarový znak a znak podtržení v názvech proměnných. Je důležité poznamenat, že nemůžete začít název proměnné číslem, ale můžete ji skončit číslem.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Všimněte si, že jen proto, že je to možné, nechceme pojmenovávat naše proměnné nejasnými názvy nebo symboly. A to je další téma samo o sobě. Při pojmenovávání proměnných je konvencí mít jasné a popisné názvy. Například, pokud bychom chtěli pojmenovat proměnnou, která označuje, kolik šípů zbývá v toulci lukostřelce, měli bychom použít popisný název, jako je ten, který jsme použili v předchozím příkladu. Pokud bychom použili jen:

let x = 145;

Tento název by nám nic neřekl o tom, jakou hodnotu drží. A dokonce i pár dní po napsání tohoto kódu bychom museli číst okolní kód, abychom pochopili, co by ta proměnná mohla znamenat. Proto je pro vaši vlastní jasnost při psaní kódu a pro vaše budoucí já, které by mohlo kód přezkoumávat, opravdu důležité zvyknout si pojmenovávat své proměnné jasným a popisným způsobem. To se také stane ještě důležitějším, když začnete pracovat s jinými lidmi a ukazovat jim svůj kód.

V tuto chvíli si možná říkáte: Je skvělé, že můžeme přesouvat data a dokonce je měnit pomocí proměnných. Ale o jakých datech se tu bavíme? Proč jsme některé části dali do uvozovek a některé části ne? Abychom na to všechno odpověděli, podívejme se na základní datové typy v JavaScriptu.

Základní datové typy v JavaScriptu

Různé datové typy jsou dobré v různých věcech. V tomto tutoriálu o základních datových typech v JavaScriptu uvidíme 3 nejzákladnější typy dat, které se běžně používají v JavaScriptu. Později v sérii se naučíme o dalších datových typech v JavaScriptu. Jakmile se naučíte tyto první 3 základní datové typy, bude mnohem snazší naučit se další datové typy. 3 datové typy, které uvidíme v tomto tutoriálu, jsou: Řetězce, Čísla a Booleany. Bez dalších okolků, pojďme začít s prvním.

Řetězce

Pokud jste sledovali tutoriál od začátku, už jste pracovali s datovým typem řetězec! Když jsme napsali alert, který říkal “Ahoj, světe!”, používali jsme datový typ řetězec k uložení textu, který jsme napsali. V JavaScriptu existují 3 způsoby, jak reprezentovat řetězce. První je obklopit svůj text dvojitými uvozovkami. Druhý je obklopit svůj text jednoduchými uvozovkami. A třetí je obklopit svůj text zpětnými apostrofy. Všechny tři vypadají takto:

const string1 = "Nějaký text zde.";
const string2 = 'Nějaký text zde.';
const string3 = `Nějaký text zde.`;

Jak vidíte, ten se “zpětnými apostrofy” vypadá docela podobně jako jednoduché uvozovky, ale je to trochu uvolněnější. Použití zpětných apostrofů k vytváření řetězců je funkce, která byla zavedena s ES6, aby usnadnila práci s textovými daty. Poskytuje více výhod než předchozí dvě. Podle konvence můžete vidět, že se buď dvojité uvozovky, nebo zpětné apostrofy používají častěji. Zpětné apostrofy najdete na levém klíči čísla 1 na vaší klávesnici.

Použití dvojitých uvozovek vypadá povědoměji a je snazší pochopit na první pohled, ale zpětné apostrofy přicházejí s více výhodami celkově. V tomto příkladu všechny 3 fungují stejným způsobem, protože je to jednoduchý příklad. Abychom zobrazili všechny tři najednou, nebo dokonce ve stejném řádku, můžeme napsat jejich názvy a použít mezi nimi plusový znak, čímž je spojíme.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Jak vidíte, všechny 3 jsou zobrazeny hned po sobě. To je proto, že jsme právě řekli interpreteru, aby spojil řetězce. Pokud chceme přidat mezery mezi nimi, můžeme vždy přidat tu mezeru s dalším řetězcem.<p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

Můžeme také zkontrolovat datový typ proměnné napsáním “typeof” před ní. Například:

alert(typeof string1);

Čísla

Když pracujeme s čísly v JavaScriptu, obvykle používáme datový typ “Number”. Je to nejjednodušší způsob, jak začít, a má téměř žádnou křivku učení.

Když napíšete číslo, je reprezentováno v číselném typu. A pokud přiřadíme toto číslo proměnné nebo konstantě, také budou mít datový typ číslo.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Kromě běžných čísel máme, JavaScript také poskytuje další funkce, které nám mohou pomoci psát bezpečnější a předvídatelnější kód. Například, v JavaScriptu můžeme mít něco, co se nazývá “Nekonečno”, a to je přesně to, co to zní. Navíc může být pozitivní nekonečno a negativní nekonečno. Pojďme se podívat, jak to vypadá na příkladu.

// můžeme dělit nulou a to nevyvolá chybu
// místo toho vrátí Nekonečno
alert(13 / 0);

// podobně můžeme také získat negativní nekonečno
alert(-25 / 0);

Jak jste již viděli na několika příkladech, můžeme také provádět aritmetické operace s čísly. Od základního sčítání, odčítání, násobení, dělení až po další programově specifické aritmetické operace. O těch se dozvíme více v dalším tutoriálu.

Booleany

Booleany jsou v programování extrémně běžné. Většinu času nebudeme výslovně používat jejich názvy, ale budeme používat jejich jednoduchou vlastnost v pozadí. Boolean může mít dvě hodnoty: “true” a “false” a jsou přesně to, co zní. Mnoho času se ocitnete při psaní kódu, abyste provedli porovnání a závěr na základě výsledku tohoto porovnání.

Mnoho z těchto porovnání vychází z reálných životních scénářů a následuje jednoduchou logiku. Je světlo zapnuté nebo vypnuté? Prší venku? Máte hlad? Je toto číslo větší než to druhé číslo? Je tento odstavec delší než následující? Je uživatel na velké obrazovce?

Existuje mnoho případů, kdy nechcete mít jen číselnou hodnotu nebo hodnotu řetězce, ale skutečně chcete odpověď ano nebo ne. Stručně řečeno, v těchto chvílích budeme používat datový typ boolean.

// je první číslo větší než druhé
alert(13 > 12);

// zkontrolujte typ proměnné
let isRainyOutside = true;
alert(typeof isRainyOutside);

Spuštění tohoto kódu by nám dalo následující výstup:

Teď už víte o proměnných a datových typech v JavaScriptu. V dalším blogovém příspěvku použijeme tyto datové typy k tomu, abychom začali dělat rozhodnutí v našem kódu a mnohem více!

Pokud se vám náš obsah líbí, nezapomeňte se připojit k Facebookové komunitě!