Привіт, #SweaterSeason! Якщо ви натрапили на цю статтю, можливо, ви шукаєте відповідь на запитання, у чому різниця між var, let і const в JavaScript (JS). Не переживайте, я вам допоможу, розробник. let і const — це нові можливості ES6, які з'явилися в 2015 році. До цього часу єдиним способом оголошення змінних був var. Це одна з тем, про які я давно хотів написати блог, оскільки вона може бути одночасно заплутаною і цікавою!
Джерело: @Snoopy (Twitter)
Невелика примітка: Це процес навчання для мене також, тому, будь ласка, терпіть, якщо я не буду до кінця зрозумілим, адже пишу це з перспективи початківця.
Перед тим як почати, я поясню ці три варіанти оголошення змінних у трьох аспектах: функціональний та блочний скоуп (scope), оновлення та повторне оголошення, і висмикування (hoisting), щоб підкреслити схожості та відмінності.
Зміст
Джерело: @mpjme (https://twitter.com/mpjme)
var
var може робити багато речей, оскільки змінні, оголошені через var, можуть бути сфокусовані глобально чи локально, або ви могли чути термін "функціональний скоуп (function scope)". Наприклад,
var welcome = 'Ласкаво просимо до Sweater Season!' // глобальний скоуп
function fallActivities() {
var activities = 'купити гарбуз і зробити Jack O Lantern';
// локальний скоуп
consoleelcome); // Ласкаво просимо до Sweater Season!
log(activities); // ReferenceError: activities is not defined
Глобальний скоуп (Global scope) означає, що змінна може бути доступною поза функцією, оскільки вона оголошена поза функцією, в той час як локальний скоуп (local scope) означає, що змінна визначена всередині функції, і тому не може бути викликана поза нею.
Ми також можемо оновлювати змінну, оголошену через var.
var welcome = 'Ласкаво просимо до Sweater Season';
console.log(welcome); // Ласкаво просимо до Sweater Season
welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
console.log(welcome); // Pumpkin Spice Latte! Halloween! Червоні листя!
Ми також можемо повторно оголосити змінну, оголошену через var.
var welcome = 'Ласкаво просимо до Sweater Season';
console.log(welcome); // Ласкаво просимо до Sweater Season
var welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
console.log(welcome); // Pumpkin Spice Latte! Halloween! Червоні листя!
При висмикуванні (hoisting) за допомогою var, значення змінної ініціалізується як undefined. Зверніть увагу на це, оскільки для let і const це буде інша ситуація. Висмикування (Hoisting) — це механізм у JS, коли змінна чи функція оголошуються на початку скоупа до виконання коду.
function fallActivities() {
console.log(activities) // undefined
var activities = 'купити гарбуз і зробити Jackах та оновлення змінних через `var` робить це корисним, особливо при написанні невеликих програм, або коли потрібно переозначити значення змінної, якщо це необхідно.
Але що, якщо ви вже використовували ці змінні в інших частинах коду, але забули про це! Це може призвести до великої кількості багів 🐞, і, ймовірно, вам доведеться витратити годинник на відлагодження тієї \*маленької\* помилки, яку ви зробили ТІЛЬКИ ТОМУ, ЩО ЗАБУДЕ ЛИ ПРО ТЕ, ЩО ВЖЕ ВИКОРИСТОВУВАЛИ ЦЮ ЗМІННУ!
_Джерело: QuickMeme (http://www._
_Це чому… `let` і `const` приходять на допомогу! [(повернутися до початку)](#ec14)
## let
`let` — це мій улюблений та найкращий спосіб оголошення змінних. Він працює дуже схоже на `var`, але відмінність у тому, що `let` має **блочний скоуп (block-scoped)**. Блок — це все,() {
let hello = 'Привіт, Осінь!іт, Осінь!
console.log(hello); // ReferenceError: hello is not defined
Іншими словами, якщо ми спробуємо викликати змінну hello поза блоком, буде повернено помилку ReferenceError.
Як і var, змінні, оголошені через let, можна оновлювати, однак їх неможливо повторно оголосити.
Так, можна оновити:
let welcome = 'Ласкаво просимо до Sweater Season';
console.log(welcome); // Ласкаво просимо до Sweater Season
welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
console.log(welcome); // Pumpkin Spice Latte! Halloween! Червоні листя!
Але буде помилка, якщо спробувати повторно оголосити:
let welcome = 'Ласкаво просимо до Sweater Season';
let welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
// SyntaxError: Identifier 'welcome' has already been declared
Однак, якщо та сама змінна буде оголошена в іншому скоупі, помилки не буде.
let welcome = 'Ласкаво просимо до Sweater Season';
function fall() {
let welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
console.log(welcome);
// Pumpkin Spice Latte! Halloween! Червоні листя!
console.log(welcome); // Ласкаво просимо до Sweater Season
Причина проста, оскільки, як зазначалося раніше, let має блочний скоуп (block-scoped) Можна уявити ситуацію так, ніби є "Чарлі Браун", який навчається в Школі А, і є ще один "Чарлі Браун", але він ходить в Школу Б. Школа — це скоуп, а вони двоє різні люди з одним і тим самим ім'ям.
Ми все ще можемо висмикувати (hoist) змінну let, але замість undefined, як у випадку з var, отримаємо помилку ReferenceError.
function fallActivities() {
console.log(activities) // ReferenceError: Cannot access 'activities' before initialization
let activities = 'купити гарбуз і зробити Jackнутися до початку)](#ec14)
На цьому етапі у вас може виникнути питання, чим відрізняються **функціональний скоуп (function-scoped)** та **блочний скоуп (block-scoped)**. У двох словах, змінна, огередині функції:
function fallActivities(activity) {
for (var i = 0; i < activity.length; i++) {
var name = activity[i]
activity = ['похід', 'Halloween', 'Pumpkin Patch', 'Читати комікси про Снупі на осінь', 'Jack O Lantern'];
fallActivities(activity);
```
Але якщо ми змінимо var на let:
function fallActivities(activity) {
for (let i = 0;
activity = ['похід', 'Halloween', 'Pumpkin Patch', 'Читати комікси про Снупі на осінь', 'Jack O Lantern'];
fallActivities(activity);
Оскільки i і name огол блоком отримаємо помилку ReferenceError. Це і є блочний скоуп (block-scoped).
Сподіваюся, це прояснить деякі питання перед тим, як ми перейдемо до const! 🙂
const
Оскільки більшість моментів вже розглянуто в прикладі з let, я швидко розгляну const.
const є досить очевидним. Змінні const зберігають постійні значення. Хоча природа const значно відрізняється від let, обидва мають багато схожих рис.
Як і змінні, оголошені через let, змінні const мають блочний скоуп (block-scoped). Сподіваюся, приклади вище вже пояснили, що таке блочний скоуп.
Оголошення const, як і let, не ініціалізуються, коли вони висмикуються (hoisted) вгору.
Змінні const неможливо повторно оголосити, як і змінні let. Але на відміну від let, змінні const неможливо оновлювати.
let welcome = 'Ласкаво просимо до Sweater Season';
const snoopy = 'Snoopy виглядає так мило в светрах!!';
welcome = 'Pumpkin Spice Latte! Halloween! Червоні листя!';
snoopy = 'Snoopy виглядає погано в светрах!' // TypeError: Assignment to constant variable.
Джерело: Tenor
Ох, JavaScript сходить з розуму, коли ви намагаєтесь переназначити змінну const, як і Снупі.
Висновок
Перш ніж попрощатись, давайте підсумуємо, що ми щойно обговорили:
var: функціональний скоуп (function-scoped), можна оновлювати та повторно оголошувати.
let: блочний скоуп (block-scoped), можна оновлювати, неможливо повторно оголосити.
const: блочний скоуп (block-scoped), неможливо оновлювати та повторно оголошувати.
Завжди найкраща практика — використовувати let та const. Ви можете іноді зустрічати приклади з var, але для вашого та вашої команди користі більше буде, якщо ви використовуватимете лише let і const для створення кращих програм 🙂
Гаразд, насолоджуйтесь своїм PSL і давайте насолоджуватись красою червоних листків, поки погода не стане холоднішою!
Фото Патріка Томассо на Unsplash
Посилання
- Var, Let, and Const — What’s the Difference? (freecodecamp.org)
- var vs let vs const in Javascript (ui.dev)
- MDN: var
- MDN: let
- MDN: const
- Mozilla: const
- W3School: Hoisting
- Блочний скоуп, функціональний скоуп та локальний скоуп у JS (Stack Overflow)
- Веселі осінні активності (The Oprah Magazine)
Перекладено з: The Difference of “var” vs “let” vs “const” in Javascript