Змінні

Найчастіше застосункам на JavaScript потрібно працювати з інформацією. Ось два приклади:

1. Онлайн-магазин – інформацією можуть бути товари, які продаються, і вміст кошика.
2. Застосунок для чату – інформація може включати користувачів, повідомлення та багато іншого.

Змінні використовуються для зберігання цієї інформації.

Змінна

Змінна це “іменована частинка сховища”, в якій зберігаються дані. Ми можемо використовувати змінні, щоб зберігати товари, відвідувачів та інші дані.

Щоб створити змінну, використовуйте ключове слово let.

Цей рядок нижче створить (інакше кажучи, оголосить) змінну з ім’ям “message”:

let message;

Тепер ми можемо покласти деякі дані в цю змінну, використовуючи оператор присвоєння =:

let message;

message = 'Привіт'; // збереження рядка 'Привіт' у змінній `message`

Тепер рядок збережено в частину пам’яті, яка зв’язана з цією змінною. Ми можемо отримати доступ до даних, використовуючи ім’я змінної:

let message;
message = 'Привіт!';

alert(message); // показує вміст змінної

Щоб писати менше коду, ми можемо суміщати оголошення змінної та її присвоєння в одному рядку:

let message = 'Привіт!'; // оголошення змінної і присвоєння значення

alert(message); // Привіт!

Ми також можемо оголосити декілька змінних в одному рядку:

let user = 'Іван', age = 25, message = 'Привіт';

Таке оголошення може виглядати коротшим, проте ми не рекомендуємо так писати. Заради кращої читабельності, будь ласка, оголошуйте змінні з нового рядка.

Багаторядковий спосіб трохи довший, проте його легше читати:

let user = 'Іван';
let age = 25;
let message = 'Привіт';

Деякі люди також оголошують змінні в такому багаторядковому стилі:

let user = 'Іван',
  age = 25,
  message = 'Привіт';

…або навіть у стилі “кома спочатку”:

let user = 'Іван'
  , age = 25
  , message = 'Привіт';

Технічно, всі ці способи роблять одне й те ж. Тому це питання особистого смаку та естетики.

var message = 'Привіт';

Аналогія з життя

Ми легко зрозуміємо концепцію “змінної”, якщо уявимо її у вигляді “коробки” для даних з унікальною назвою на наклейці.

Наприклад, змінну message можна уявити як коробку з написом "Повідомлення" зі значенням "Привіт!" всередині:

Ми можемо покласти будь-яке значення в цю коробку.

Ми також можемо змінювати його стільки разів, скільки захочемо:

let message;

message = 'Привіт!';

message = 'Світ!'; // значення змінено

alert(message);

Коли значення змінюється, старі дані видаляються зі змінної:

Ми також можемо оголосити дві змінні та скопіювати дані з однієї в іншу.

let hello = 'Привіт світ!';

let message;

// копіюємо 'Привіт світ' з hello в message
message = hello;

// тепер дві змінні мають однакові дані
alert(hello); // Привіт світ!
alert(message); // Привіт світ!

let message = "Це";

// повторне 'let' призведе до синтаксичної помилки
let message = "Той"; // SyntaxError: 'message' has already been declared

Іменування змінних

В JavaScript є два обмеження, які стосуються імен змінних:

1. Ім’я має містити лише букви, цифри або символи $ і _.
2. Перший символ не має бути числом.

Ось приклади допустимих імен:

let userName;
let test123;

Для написання імені, яке містить декілька слів, зазвичай використовують “верблюжий регістр” (camelCase). Тобто слова йдуть одне за одним, і кожне слово пишуть із великої букви й без пробілів: myVeryLongName. Зауважте, що перше слово пишеться з маленької букви.

Що цікаво – знак долара '$' і знак підкреслення '_' також можна використовувати в іменах. Це звичайні символи, такі ж, як і букви, без будь-якого особливого значення.

Ці імена також допустимі:

let $ = 1; // оголошено змінну з ім’ям "$"
let _ = 2; // а тепер змінна з ім’ям "_"

alert($ + _); // 3

Приклади недопустимих імен змінних:

let 1a; // не може починатися з цифри

let my-name; // дефіс '-' недопустимий в імені

let назва = '...';
let 我 = '...';

let let = 5; // не можна назвати змінну "let", помилка!
let return = 5; // також не можна називати змінну "return", помилка!

// "use strict" в цьому прикладі не використовується

num = 5; // якщо змінна "num" не існувала, її буде створено

alert(num); // 5

"use strict";

num = 5; // помилка: num не оголошено

Константи

Щоб оголосити константу (незмінювану) змінну, використовуйте ключове слово const замість let:

const myBirthday = '18.04.1982';

Змінні, оголошені за допомогою const, називаються “константами”. Їхні значення не можна перепризначити. Спроба це зробити призведе до помилки:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // помилка, не можна перевизначати константу!

Коли програміст впевнений, що змінна ніколи не буде змінюватися, він може оголосити її через const, що гарантує постійність і буде зрозумілим для кожного.

Константи в верхньому регістрі

Широко поширена практика використання констант як псевдонімів для значень, які важко запам’ятати і які відомі до початку виконання скрипту.

Такі константи пишуться в верхньому регістрі з використанням підкреслень.

Наприклад, створімо константи, в які запишемо значення кольорів у так званому “вебформаті” (в шістнадцятковій системі):

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

// ...коли потрібно вибрати колір
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Переваги:

• COLOR_ORANGE набагато легше запам’ятати, ніж "#FF7F00".
• Набагато легше припуститися помилки в "#FF7F00", ніж під час введення COLOR_ORANGE.
• Під час читання коду COLOR_ORANGE набагато зрозуміліше, ніж #FF7F00.

Коли ми маємо використовувати для констант великі букви, а коли звичайні? Давайте це з’ясуємо.

Назва “константа” лише означає, що змінна ніколи не зміниться. Але є константи, які відомі нам до виконання скрипту (наприклад, шістнадцяткове значення для червоного кольору), а є константи, які вираховуються в процесі виконання скрипту, але не змінюються після їхнього початкового присвоєння.

Наприклад:

const pageLoadTime = /* час, потрачений на завантаження вебсторінки */;

Значення pageLoadTime невідоме до завантаження сторінки, тому її ім’я записано звичайними, а не великими буквами. Але це все ще константа, тому що вона не змінює значення після присвоєння.

Інакше кажучи, константи з великими буквами використовуються як псевдоніми для “жорстко закодованих” значень.

Придумуйте правильні імена

У розмові про змінні необхідно згадати ще одну дуже важливу річ – правильні імена змінних.

Такі імена повинні мати чіткий і зрозумілий сенс, який описує дані, що в них зберігаються.

Іменування змінних – одна з найважливіших і найскладніших навичок у програмуванні. Швидкий погляд на імена змінних може показати, який код був написаний початківцем, а який досвідченим розробником.

У реальному проєкті більшість часу тратиться на змінення і розширення наявної кодової бази, а не на написання чогось цілком нового. Коли ми повертаємося до якогось коду після виконання чогось іншого впродовж тривалого часу, набагато легше знайти інформацію, яку добре позначено. Або, інакше кажучи, коли змінні мають хороші імена.

Будь ласка, приділяйте час на обдумування правильного імені для змінної перед її оголошенням. Робіть так, і будете винагороджені.

Декілька хороших правил:

• Використовуйте імена, які легко прочитати, як-от userName або shoppingCart.
• Уникайте використання абревіатур або коротких імен, таких як a, b та c, окрім тих випадків, коли ви точно знаєте, що так потрібно.
• Робіть імена максимально описовими і лаконічними. Наприклад, такі імена погані: data і value. Такі імена нічого не говорять. Їх можна використовувати лише тоді, коли з контексту очевидно, на які дані або значення посилається змінна.
• Погоджуйте з вашою командою (та з самим собою), які терміни будуть використовуватися у проєкті. Якщо відвідувач сайту називається “user”, тоді ми маємо давати відповідні імена іншим пов’язаним змінним: currentUser або newUser, замість currentVisitor або newManInTown.

Звучить легко? Це дійсно так, проте на практиці створення зрозумілих і коротких імен – рідкість. Дійте.

Підсумки

Ми можемо оголосити змінні для збереження даних за допомогою ключових слів var, let чи const.

• let – це сучасний спосіб оголошення.
• var – це застарілий спосіб оголошення змінної. Зазвичай ми не використовуємо його взагалі, але ми розглянемо тонкі відмінності від let в розділі Застаріле ключове слово "var", на випадок, якщо це все-таки знадобиться.
• const – це як let, але значення змінної не може змінюватися.

Змінні мають називатися так, щоб ми могли легко зрозуміти, що в середині них.