17 лютого 2022 р.

Змінні

Найчастіше застосункам на 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 замість let

У старих скриптах ви можете знайти інше ключове слово: var замість let:

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

Ключове слово var майже таке, як let. Воно теж оголошує змінну, але дещо іншим, “застарілим” способом.

Є деякі відмінності між let і var, але вони поки що не мають для нас значення. Ми дізнаємося більше про ці відмінності в розділі Застаріле ключове слово "var".

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

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

Наприклад, змінну 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

Тому ми маємо оголосити змінну лише раз, а потім просто посилатися на неї, без let.

Функційне програмування

Цікаво зазначити, що функційні мови програмування, такі як Scala або Erlang, забороняють змінювати значення змінних.

У таких мовах збережені в “коробку” значення залишаються там назавжди. Якщо нам потрібно зберегти щось інше, мова змусить нас створити нову коробку (оголосити нову змінну). Ми не можемо використати стару змінну.

Хоча на перший погляд це може здатися дивним, проте ці мови цілком підходять для серйозної розробки. Ба більше, є такі галузі, як от паралельні обчислення, де це обмеження дає певні переваги. Вивчення такої мови (навіть якщо ви не плануєте користуватися нею найближчим часом) рекомендується для розширення кругозору.

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

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

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

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

let userName;
let test123;

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

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

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

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

alert($ + _); // 3

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

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

let my-name; // дефіс '-' недопустимий в імені
Регістр має значення

Змінні з іменами apple і AppLE – це дві різні змінні.

Не-латинські букви дозволені, але не рекомендуються

Можна використовувати будь-яку мову, включно з кирилицею або навіть ієрогліфами, наприклад:

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

Технічно тут немає помилки. Такі імена дозволені, проте є міжнародна традиція використовувати англійську мову в іменах змінних (наприклад, yaLyublyuUkrainu => iLoveUkraine). Навіть якщо ми пишемо маленький скрипт, у нього може бути тривале життя попереду. Людям з інших країн, можливо, доведеться прочитати його не один раз.

Зарезервовані слова

Є список зарезервованих слів, які не можна використовувати як імена змінних, тому що ці слова використовує сама мова.

Наприклад: let, class, return і function зарезервовані.

Такий код видаватиме синтаксичну помилку:

let let = 5; // не можна назвати змінну "let", помилка!
let return = 5; // також не можна називати змінну "return", помилка!
Створення змінної без використання use strict

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

// "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.

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

Перевикористовувати чи створювати?

І остання примітка. Є ліниві програмісти, які замість оголошення нових змінних повторно використовують наявні.

У результаті їхні змінні схожі на коробки, в які люди кидають різні речі, не змінюючи на них наклейки. Що зараз міститься всередині коробки? Хто знає? Нам необхідно підійти поближче і перевірити.

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

Додаткова змінна – це добро, а не зло.

Сучасні JavaScript-мініфікатори і браузери оптимізують код досить добре, тому додаткові змінні не погіршують продуктивність. Використання різних змінних для різних значень може навіть допомогти рушію оптимізувати ваш код.

Підсумки

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

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

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

Завдання

важливість: 2
  1. Оголосіть дві змінні: admin та name.
  2. Присвойте значення "Іван" змінній name.
  3. Скопіюйте значення зі змінної name в admin.
  4. Виведіть значення змінної admin, використовуючи функцію alert (яка повинна показати “Іван”).

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

let admin, name; // можна оголошувати дві змінні через кому

name = "Іван";

admin = name;

alert( admin ); // "Іван"
важливість: 3
  1. Створіть змінну із назвою нашої планети. Як би ви назвали таку змінну?
  2. Створіть змінну для зберігання імені поточного відвідувача сайту. Як би ви назвали таку змінну?

Змінна для нашої планети

Ось приклад:

let ourPlanetName = "Земля";

Зверніть увагу, ми могли використати коротше ім’я planet, але тоді буде незрозуміло, яку планету ми маємо на увазі. Краще описати вміст змінної детальніше. Принаймні до тих пір, поки ім’я змінної неСтанеЗанадтоДовгим.

Ім’я поточного відвідувача

let currentUserName = "Іван";

Знову ж таки, ми можемо скоротити ім’я до userName, якщо ми точно знатимемо, що це поточний відвідувач.

Сучасні редактори й автодоповнювачі дозволяють легко писати довгі імена змінних. Не економте букв. Імена з трьох слів цілком нормальні.

Якщо в вашому редакторі немає автодоповнювача, скористайтеся іншим.

важливість: 4

Переглянемо наступний код:

const birthday = '18.04.1982';

const age = someCode(birthday);

В нас є константа birthday, а також age, яка вираховується за допомогою функції, використовуючи значення із birthday (в даному випадку деталі не мають значення, тому код функції не розглядається).

Чи можна використовувати великі букви для імені birthday? А для age? Чи для обох змінних?

const BIRTHDAY = '18.04.1982'; // використовувати великі букви?

const AGE = someCode(BIRTHDAY); // а тут?

Зазвичай, ми використовуємо великі букви для констант, які “жорстко закодовані” (hardcoded). Інакше кажучи, коли значення константи відоме до початку виконання скрипта і записується безпосередньо в код.

В нашому випадку, birthday саме така змінна. Тому для неї ми можемо використати великі букви.

На відмінну від попередньої, константа age обчислюється під час виконання скрипта. Сьогодні в нас один вік, а через рік вже зовсім інший. Змінна є константою, тому що не змінюється під час виконання коду. Але вона “трохи менша” константа, ніж birthday: вона обчислюється, тому ми повинні зберегти її в нижньому регістрі.

Навчальна карта

Коментарі

прочитайте це, перш ніж коментувати…
  • Якщо у вас є пропозиції, щодо покращення підручника, будь ласка, створіть обговорення на GitHub або одразу створіть запит на злиття зі змінами.
  • Якщо ви не можете зрозуміти щось у статті, спробуйте покращити її, будь ласка.
  • Щоб вставити код, використовуйте тег <code>, для кількох рядків – обгорніть їх тегом <pre>, для понад 10 рядків – використовуйте пісочницю (plnkr, jsbin, codepen…)