Proměnné

Většinu času potřebuje JavaScriptová aplikace pracovat s informacemi. Zde jsou dva příklady:

  1. Internetový obchod – informace mohou zahrnovat prodávané zboží a nákupní košík.
  2. Aplikace pro chat – informace mohou zahrnovat uživatele, zprávy a mnoho dalšího.

K ukládání těchto informací se používají proměnné.

Proměnná

Proměnná je „pojmenovaný úložiště“ pro data. Můžeme použít proměnné k ukládání dobrot, návštěvníků a dalších dat.

Chcete-li vytvořit proměnnou v JavaScriptu, použijte let klíčové slovo.

Níže uvedené prohlášení vytváří (jinými slovy:deklaruje ) proměnná s názvem „zpráva“:

let message;

Nyní do něj můžeme vložit některá data pomocí operátoru přiřazení = :

let message;

message = 'Hello'; // store the string 'Hello' in the variable named message

Řetězec je nyní uložen do oblasti paměti spojené s proměnnou. Můžeme k němu přistupovat pomocí názvu proměnné:

let message;
message = 'Hello!';

alert(message); // shows the variable content

Abychom byli struční, můžeme deklaraci proměnné a přiřazení spojit do jednoho řádku:

let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!

Můžeme také deklarovat více proměnných na jednom řádku:

let user = 'John', age = 25, message = 'Hello';

Může se to zdát kratší, ale nedoporučujeme to. Pro lepší čitelnost použijte prosím jeden řádek na proměnnou.

Víceřádková varianta je o něco delší, ale lépe čitelná:

let user = 'John';
let age = 25;
let message = 'Hello';

Někteří lidé také definují více proměnných v tomto víceřádkovém stylu:

let user = 'John',
 age = 25,
 message = 'Hello';

…Nebo dokonce ve stylu „čárka-první“:

let user = 'John'
 , age = 25
 , message = 'Hello';

Technicky všechny tyto varianty dělají totéž. Je to tedy věc osobního vkusu a estetiky.

var místo let

Ve starších skriptech můžete také najít další klíčové slovo:var místo let :

var message = 'Hello';

var klíčové slovo je téměř stejně jako let . Deklaruje také proměnnou, ale trochu jiným způsobem „staré školy“.

Mezi let jsou drobné rozdíly a var , ale pro nás zatím nezáleží. Podrobně se jim budeme věnovat v kapitole Staré "var".

Analogie ze skutečného života

Koncept „proměnné“ snadno pochopíme, pokud si ji představíme jako „schránku“ pro data s jedinečným názvem.

Například proměnná message lze si představit jako rámeček označený "message" s hodnotou "Hello!" v něm:

Do pole můžeme vložit jakoukoli hodnotu.

Můžeme jej také změnit, kolikrát chceme:

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

Při změně hodnoty se z proměnné odstraní stará data:

Můžeme také deklarovat dvě proměnné a kopírovat data z jedné do druhé.

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!
Dvojité deklarování vyvolá chybu

Proměnná by měla být deklarována pouze jednou.

Opakovaná deklarace stejné proměnné je chyba:

let message = "This";

// repeated 'let' leads to an error
let message = "That"; // SyntaxError: 'message' has already been declared

Měli bychom tedy jednou deklarovat proměnnou a pak se na ni odkázat bez let .

Funkční jazyky

Je zajímavé poznamenat, že existují funkční programovací jazyky, jako je Scala nebo Erlang, které zakazují měnit hodnoty proměnných.

V takových jazycích, jakmile je hodnota uložena „v krabici“, je tam navždy. Pokud potřebujeme uložit něco jiného, ​​jazyk nás nutí vytvořit nový box (deklarovat novou proměnnou). Ten starý nemůžeme znovu použít.

I když se to na první pohled může zdát trochu zvláštní, tyto jazyky jsou docela schopné seriózního vývoje. Kromě toho existují oblasti, jako jsou paralelní výpočty, kde toto omezení přináší určité výhody. Studium takového jazyka (i když ho nebudete brzy používat) se doporučuje pro rozšíření mysli.

Pojmenování proměnných

Názvy proměnných v JavaScriptu mají dvě omezení:

  1. Název musí obsahovat pouze písmena, číslice nebo symboly $ a _ .
  2. První znak nesmí být číslice.

Příklady platných jmen:

let userName;
let test123;

Pokud název obsahuje více slov, běžně se používá camelCase. To znamená:slova jdou jedno za druhým, každé slovo kromě prvního začíná velkým písmenem:myVeryLongName .

Co je zajímavé – znak dolaru '$' a podtržítko '_' lze použít i ve jménech. Jsou to běžné symboly, stejně jako písmena, bez zvláštního významu.

Tato jména jsou platná:

let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3

Příklady nesprávných názvů proměnných:

let 1a; // cannot start with a digit

let my-name; // hyphens '-' aren't allowed in the name
Na případu záleží

Proměnné s názvem apple a APPLE jsou dvě různé proměnné.

Nelatinková písmena jsou povolena, ale nedoporučuje se

Je možné použít jakýkoli jazyk, včetně cyrilice nebo dokonce hieroglyfů, jako je tento:

let имя = '...';
let 我 = '...';

Technicky zde není žádná chyba. Takové názvy jsou povoleny, ale existuje mezinárodní konvence používat v názvech proměnných angličtinu. I když píšeme malý scénář, může mít před sebou dlouhou životnost. Lidé z jiných zemí si ji možná budou muset nějakou dobu přečíst.

Vyhrazená jména

Existuje seznam vyhrazených slov, která nelze použít jako názvy proměnných, protože je používá samotný jazyk.

Například:let , class , return a function jsou rezervovány.

Níže uvedený kód zobrazuje chybu syntaxe:

let let = 5; // can't name a variable "let", error!
let return = 5; // also can't name it "return", error!
Úkol bez use strict

Normálně musíme proměnnou před jejím použitím definovat. Ale za starých časů bylo technicky možné vytvořit proměnnou pouhým přiřazením hodnoty bez použití let . Toto stále funguje, pokud nevložíme use strict v našich skriptech, aby byla zachována kompatibilita se starými skripty.

// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5

Toto je špatný postup a v přísném režimu by to způsobilo chybu:

"use strict";

num = 5; // error: num is not defined

Konstanty

Chcete-li deklarovat konstantní (neměnnou) proměnnou, použijte const místo let :

const myBirthday = '18.04.1982';

Proměnné deklarované pomocí const se nazývají „konstanty“. Nelze je přeřadit. Pokus o to by způsobil chybu:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

Když si je programátor jistý, že se proměnná nikdy nezmění, může ji deklarovat pomocí const zaručit a jasně sdělit tuto skutečnost všem.

Velká konstanta

Existuje rozšířená praxe používat konstanty jako aliasy pro obtížně zapamatovatelné hodnoty, které jsou známy před spuštěním.

Takové konstanty jsou pojmenovány pomocí velkých písmen a podtržítek.

Udělejme například konstanty pro barvy v takzvaném „webovém“ (hexadecimálním) formátu:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Výhody:

  • COLOR_ORANGE je mnohem snáze zapamatovatelný než "#FF7F00" .
  • Je mnohem snazší napsat chybně "#FF7F00" než COLOR_ORANGE .
  • Při čtení kódu COLOR_ORANGE je mnohem smysluplnější než #FF7F00 .

Kdy použít velká písmena pro konstantu a kdy ji normálně pojmenovat? Pojďme si to ujasnit.

Být „konstanta“ znamená, že se hodnota proměnné nikdy nemění. Existují však konstanty, které jsou známy před spuštěním (jako hexadecimální hodnota pro červenou) a existují konstanty, které jsou vypočítány za běhu, během provádění, ale po jejich počátečním přiřazení se nemění.

Například:

const pageLoadTime = /* time taken by a webpage to load */;

Hodnota pageLoadTime není známa před načtením stránky, takže je pojmenována normálně. Ale je to stále konstantní, protože se po přiřazení nemění.

Jinými slovy, konstanty pojmenované velkými písmeny se používají pouze jako aliasy pro „pevně zakódované“ hodnoty.

Pojmenujte věci správně

Když mluvíme o proměnných, je tu ještě jedna nesmírně důležitá věc.

Název proměnné by měl mít jasný a zřejmý význam a měl by popisovat data, která ukládá.

Pojmenování proměnných je jednou z nejdůležitějších a nejkomplexnějších dovedností v programování. Rychlý pohled na názvy proměnných může odhalit, který kód byl napsán začátečníkem oproti zkušenému vývojáře.

Ve skutečném projektu se většinu času stráví úpravami a rozšiřováním stávající kódové základny, než psaním něčeho zcela samostatného od začátku. Když se vrátíme k nějakému kódu poté, co jsme chvíli dělali něco jiného, ​​je mnohem snazší najít dobře označené informace. Nebo jinými slovy, když proměnné mají dobré názvy.

Věnujte prosím čas přemýšlení o správném názvu proměnné, než ji deklarujete. Pokud tak učiníte, bohatě se vám odvděčí.

Některá pravidla, která je dobré dodržovat, jsou:

  • Používejte názvy čitelné pro člověka, například userName nebo shoppingCart .
  • Držte se dál od zkratek nebo krátkých názvů jako a , b , c , pokud opravdu nevíte, co děláte.
  • Vytvářejte názvy maximálně popisné a výstižné. Příklady špatných jmen jsou data a value . Taková jména nic neříkají. Je v pořádku je použít pouze v případě, že z kontextu kódu je výjimečně zřejmé, na která data nebo hodnotu proměnná odkazuje.
  • Dohodněte se na podmínkách ve svém týmu a ve své vlastní mysli. Pokud se návštěvník webu nazývá „uživatel“, měli bychom pojmenovat související proměnné currentUser nebo newUser místo currentVisitor nebo newManInTown .

Zní to jednoduše? To skutečně je, ale vytváření popisných a výstižných názvů proměnných v praxi není. Jděte do toho.

Znovu použít nebo vytvořit?

A poslední poznámka. Existují někteří líní programátoři, kteří místo deklarování nových proměnných mají tendenci znovu používat ty stávající.

Výsledkem je, že jejich proměnné jsou jako krabice, do kterých lidé vhazují různé věci, aniž by měnili své nálepky. Co je nyní uvnitř krabice? Kdo ví? Musíme přijít blíž a zkontrolovat.

Takoví programátoři ušetří trochu na deklaraci proměnných, ale ztratí desetkrát více na ladění.

Další proměnná je dobro, ne zlo.

Moderní minimalizátory JavaScriptu a prohlížeče optimalizují kód dostatečně dobře, takže nezpůsobí problémy s výkonem. Použití různých proměnných pro různé hodnoty může dokonce pomoci motoru optimalizovat váš kód.

Shrnutí

Proměnné pro ukládání dat můžeme deklarovat pomocí var , let nebo const klíčová slova.

  • let – je moderní deklarace proměnné.
  • var – je deklarace proměnné ze staré školy. Normálně to vůbec nepoužíváme, ale probereme jemné rozdíly oproti let v kapitole Staré "var", pro případ, že byste je potřebovali.
  • const – je jako let , ale hodnotu proměnné nelze změnit.

Proměnné by měly být pojmenovány způsobem, který nám umožní snadno pochopit, co se v nich skrývá.