Коли ви починаєте вивчати JavaScript, перш за все ви повинні розуміти, як використовувати змінні. Змінні - це своєрідні контейнери для значень всіх можливих типів, наприклад, number (числовий тип), string (рядки) або array (масив). Кожна змінна отримує ім'я, яке згодом може бути використане у коді програми (наприклад, щоб прочитати його значення).
У цій короткій статті ви дізнаєтеся, як використовувати змінні. Також дізнаєтеся про відмінності між різними оголошеннями змінних.
Різниця між оголошенням, ініціалізацією та присвоєнням
Перед тим, як приступити до вивчення різних типів оголошень змінних, давайте подивимося на життєвий цикл змінної, який зображений на малюнку нижче.
Оголошення: Змінна записується за допомогою заданого імені у відповідному фрагменті коду (пояснено нижче - наприклад, всередині функції).
Ініціалізація: При оголошенні змінної вона автоматично ініціалізується, що означає виділення пам'яті для змінної.
Присвоєння: Це коли конкретне значення присвоюється змінній.
Типи оголошень
Примітка: в той час як var була доступна в JavaScript з початкової версії , то let і const стали доступними тільки в ES6 (ES2015) і вище.
var
Синтаксис:
var x; // Оголошення та ініціалізація
x = "Hello World"; // Присвоєння
// Все в одному
var y = "Hello World";
Таке оголошення є найбільш популярним, так як не було ніякої альтернативи, поки не з'явилася ECMAScript 6. Змінні, оголошені як var доступні лише в межах певної функції. Якщо немає такої функції, то змінні доступні глобально.
Наприклад:
function sayHello(){
var hello = "Hello World";
return hello;
}
console.log(hello);
Це призведе до помилки ReferenceError: hello is not defined, так як змінна hello доступна тільки всередині функції SayHello. Але наступний приклад коду буде працювати, так як змінна буде оголошена глобально – сам само, де і console.log(hello) розташований:
var hello = "Hello World";
function sayHello(){
return hello;
}
console.log(hello);
let
Синтаксис:
let x; // Оголошення та ініціалізація
x = "Hello World"; // Присвоєння
// Все в одному
let y = "Hello World";
let – це нащадок var у сучасному JavaScript. Сфера його застосування не обмежується лише функціями, let також використовується у блоці виразів. Блок виразу – це все всередині { та }, (наприклад, умова if або цикли). Перевага let: це зменшує ймовірність помилок, оскільки змінні доступні тільки в невеликих областях.
Приклад:
var name = "Peter";
if(name === "Peter"){
let hello = "Hello Peter";
} else {
let hello = "Hi";
}
console.log(hello);
Це призведе до помилки ReferenceError: hello is not defined, так як hello доступна тільки всередині блоку - в цьому випадку у блоці конструкції if. Але наступний код буде працювати:
var name = "Peter";
if(name === "Peter"){
let hello = "Hello Peter";
console.log(hello);
} else {
let hello = "Hi";
console.log(hello);
}
const
Синтаксис:
const x = "Hello World";
Технічно константа не є змінною. Особливістю константи є те, що вам потрібно присвоїти їй значення при оголошенні і не буде ніякого способу, аби переприсвоїти це значення. Константна обмежується областями блоків, як let. Константи слід використовувати всякий раз, коли значення не повинно змінюватися в процесі виконання програми, інакше буде повідомлення про помилку при спробі переприсвоїти константі значення.
Приклад:
function sayHello(){
hello = "Hello World";
return hello;
}
sayHello();
console.log(hello);
Програма вище буде виводити Hello World на консоль, так як немає ніякого оголошення перед присвоєнням hello = і, отже, змінна є глобальною.
Перестановки та Temporal Dead Zone
Ще одна відмінність між var і let/const відноситься до перестановок. Оголошення змінної буде завжди розміщуватись у верхній частині поточної області. Це означає наступне:
console.log(hello);
var hello;
hello = "I'm a variable";
це рівносильно цьому:
var hello;
console.log(hello);
hello = "I'm a variable";
Ознакою такої поведінки є те, що обидва приклади будуть виводити undefined на консоль. Якщо var hello; не завжди буде зверху, то виникне помилка ReferenceError.
Така поведінка називається перестановка var угору, а також let /const. Як згадувалося вище, якщо доступ до змінної var відбувався до її оголошення, то на консоль виведеться undefined, оскільки це значення JavaScript присвоює при ініціалізації.
Але доступ до let/const змінних перед їх оголошенням видасть повідомлення про помилку. Це пов'язано з тим, що вони не доступні до того, як їх було оголошено в коді. Період між введенням області дії змінної і її оголошенням називається Temporal Dead Zone - тобто період, в якому змінна не доступна.
Висновок
Щоб зменшити сприйнятливість до помилок, слід використовувати const і let всякий раз, коли це можливо. Якщо вам потрібно використати var, то не забудьте перемістити оголошення у верхню частину, так як це дозволяє уникнути небажаних помилок.
Ще немає коментарів