Пошук уроків, статей та іншого контенту
Дізнайтеся, як створювати змінні за допомогою let, const і var, чим вони відрізняються та який спосіб оголошення варто використовувати в сучасному JavaScript.
Змінна — це ім’я, під яким програма зберігає певне значення. Значення змінної можна використати пізніше або змінити під час виконання програми.
Наприклад:
let userName = "Олена";
console.log(userName);У цьому прикладі:
let — ключове слово для оголошення змінної;
userName — ім’я змінної;
"Олена" — значення змінної;
console.log() — виводить значення в консоль.
Створення змінної називається оголошенням:
let age;Змінна age створена, але поки не має явно заданого значення. Її значенням буде undefined.
Присвоїти значення можна пізніше:
let age;
age = 25;
console.log(age); // 25Також оголошення і присвоєння можна виконати одним рядком:
let age = 25;Після оголошення змінної з let її значення можна змінити:
let score = 10;
score = 20;
console.log(score); // 20Знак = у JavaScript означає присвоєння. Він записує значення праворуч у змінну ліворуч.
letlet використовують для змінних, значення яких може змінюватися.
let temperature = 18;
temperature = 21;
console.log(temperature); // 21Змінну, оголошену через let, не можна оголосити повторно в тій самій області видимості:
let message = "Привіт";
// Помилка: змінну message уже оголошено
// let message = "До побачення";Якщо значення потрібно змінити, повторно писати let не треба:
let counter = 0;
counter = counter + 1;
counter = counter + 1;
console.log(counter); // 2Для скорочення можна використовувати оператор +=:
let counter = 0;
counter += 1;
counter += 1;
console.log(counter); // 2constconst використовують для оголошення змінної, якій не можна повторно присвоїти інше значення.
const country = "Україна";
console.log(country); // УкраїнаПісля створення константи спроба змінити її значення спричинить помилку:
const birthYear = 1995;
// Помилка: не можна повторно присвоїти значення const
// birthYear = 2000;Для const значення потрібно вказати одразу під час оголошення:
// Помилка: const потрібно ініціалізувати під час оголошення
// const color;Тому такий код правильний:
const color = "blue";const і об’єктиconst забороняє змінювати посилання на об’єкт, але не забороняє змінювати властивості самого об’єкта.
const user = {
name: "Олена",
age: 25
};
user.age = 26;
console.log(user.age); // 26Але замінити весь об’єкт не можна:
const user = {
name: "Олена"
};
// Помилка: не можна присвоїти новий об’єкт змінній const
// user = { name: "Андрій" };Так само можна змінювати елементи масиву, оголошеного через const:
const colors = ["red", "green"];
colors.push("blue");
console.log(colors); // ["red", "green", "blue"]Однак замінити весь масив не можна:
// Помилка: не можна присвоїти новий масив змінній const
// colors = ["black"];varvar — старий спосіб оголошення змінних у JavaScript. Він використовувався до появи let і const у сучасному стандарті JavaScript.
var message = "Привіт";
message = "Вітаю";
console.log(message); // ВітаюЗмінну, оголошену через var, можна оголосити повторно:
var city = "Київ";
var city = "Львів";
console.log(city); // ЛьвівТака поведінка може призводити до помилок у великих програмах. Саме тому в сучасному JavaScript зазвичай використовують let і const.
let — значення можна змінювати.
const — значення не можна повторно присвоювати.
var — значення можна змінювати.
let count = 1;
count = 2;
const limit = 10;
// limit = 20; // Помилка
var total = 5;
total = 8;let — повторне оголошення в тій самій області видимості заборонене.
const — повторне оголошення заборонене.
var — повторне оголошення дозволене, але небажане.
let name = "Олена";
// let name = "Андрій"; // Помилка
const language = "JavaScript";
// const language = "Python"; // Помилка
var version = 1;
var version = 2; // Допустимо, але краще так не робитиОбласть видимості визначає, де саме можна використовувати змінну.
let і const мають блочну область видимості. Блоком є код усередині фігурних дужок {}:
if (true) {
let message = "Повідомлення всередині блоку";
const number = 10;
console.log(message);
console.log(number);
}
// Помилка: message недоступна за межами блоку
// console.log(message);
// Помилка: number недоступна за межами блоку
// console.log(number);Змінна var не обмежується блоком if або циклу:
if (true) {
var message = "Повідомлення з var";
}
console.log(message); // Повідомлення з varТака поведінка var часто створює неочікувані результати. Для нових програм краще використовувати let або const.
Змінна, оголошена через var усередині функції, доступна лише в цій функції:
function showMessage() {
var message = "Привіт із функції";
console.log(message);
}
showMessage();
// Помилка: message існує лише всередині showMessage
// console.log(message);Оголошення змінних обробляються JavaScript до виконання коду. Цю особливість називають підняттям оголошень або hoisting.
Змінна var до свого оголошення має значення undefined:
console.log(value); // undefined
var value = 10;Фактично JavaScript обробляє цей код приблизно так:
var value;
console.log(value); // undefined
value = 10;let і const також відомі JavaScript до місця оголошення, але використовувати їх раніше не можна:
// Помилка ReferenceError
// console.log(value);
let value = 10;Це допомагає раніше помічати помилки. На практиці оголошуйте змінні до їх використання.
У сучасному JavaScript дотримуйтеся такого правила:
Використовуйте const, якщо змінну не потрібно переприсвоювати.
Використовуйте let, якщо значення змінюватиметься.
Не використовуйте var у новому коді без спеціальної причини.
Приклад:
const productName = "Ноутбук";
const price = 30000;
let quantity = 1;
quantity = 2;
const totalPrice = price * quantity;
console.log(productName);
console.log(totalPrice); // 60000const тут використано для productName, price і totalPrice, оскільки їхні значення не змінюються. Для quantity використано let, оскільки кількість товару змінилася.
Імена змінних мають відповідати певним правилам:
можуть містити літери, цифри, символ _ і $;
не можуть починатися з цифри;
не можуть містити пробіли;
не можуть збігатися із зарезервованими словами JavaScript;
враховують регістр: name і Name — різні імена.
Правильні імена:
let userName;
let age2;
let _privateValue;
let $element;Некоректні імена:
// let 2users; // Не можна починати з цифри
// let user name; // Не можна використовувати пробіл
// let const; // const — зарезервоване словоДля складених імен часто використовують стиль camelCase:
const firstName = "Олена";
const userAge = 25;
const isLoggedIn = true;Намагайтеся давати змінним зрозумілі імена:
const price = 100;
const quantity = 3;
const total = price * quantity;Такий код зрозуміліший за варіант із неінформативними іменами:
const a = 100;
const b = 3;
const c = a * b;const productName = "Кава";
const price = 80;
let quantity = 2;
let total = price * quantity;
console.log(`Товар: ${productName}`);
console.log(`Кількість: ${quantity}`);
console.log(`Сума: ${total} грн`);
quantity = 3;
total = price * quantity;
console.log(`Нова кількість: ${quantity}`);
console.log(`Нова сума: ${total} грн`);Результат:
Товар: Кава
Кількість: 2
Сума: 160 грн
Нова кількість: 3
Нова сума: 240 грнУ цьому прикладі:
productName і price оголошені через const, бо вони не змінюються;
quantity оголошена через let, бо її значення змінюється;
total також оголошена через let, бо після зміни кількості обчислюється нова сума.
const без початкового значення// Помилка
// const username;
// Правильно
const username = "Олена";letlet score = 10;
// Неправильно
// let score = 20;
// Правильно
score = 20;constconst siteName = "Fullstack";
// Помилка
// siteName = "Інший сайт";Якщо значення справді має змінюватися, використовуйте let:
let siteName = "Fullstack";
siteName = "Інший сайт";var у блокахif (true) {
var result = "готово";
}
console.log(result);result доступна за межами блоку, хоча логічно могла бути потрібна лише всередині нього. Безпечніший варіант:
if (true) {
const result = "готово";
console.log(result);
}
// result більше недоступна за межами блоку// Помилка
// console.log(userName);
const userName = "Олена";Спочатку оголошуйте змінну, а потім використовуйте її.
Змінна зберігає значення та має ім’я.
let використовують, коли значення може змінюватися.
const використовують, коли змінну не потрібно переприсвоювати.
var — застарілий спосіб, який краще не використовувати в новому коді.
let і const мають блочну область видимості.
const забороняє переприсвоєння, але властивості об’єктів і елементи масивів можуть змінюватися.
Для зрозумілого коду використовуйте описові імена змінних.
Якщо сумніваєтеся, починайте з const, а на let переходьте лише тоді, коли значення справді потрібно змінювати.