Розуміння змінних у JavaScript

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

Що таке змінна?

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

Навіщо нам потрібні змінні?

• Повторне використання: Зберігання значень, які можна використовувати кілька разів.
• Динамічні зміни: Зміна збереженого значення під час виконання програми.
• Читабельність: Використання зрозумілих імен для полегшення розуміння коду.

Оголошення змінних у JavaScript

В JavaScript змінні можна оголошувати за допомогою трьох ключових слів:

1. var

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

var name = "John";  
console.log(name); // Output: John

2. let

Введене в ES6 (ECMAScript 2015), let є блоковим за областю видимості, тобто його значення обмежується блоком, у якому воно було оголошене. Це найкраще використовувати для змінних, які потрібно змінювати.

let age = 25;  
age = 30;  
console.log(age); // Output: 30

3. const

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

const PI = 3.14;  
console.log(PI); // Output: 3.14

Правила для іменування змінних

При іменуванні змінних існують деякі базові правила та конвенції:

1. Дозволені символи: Імена змінних можуть містити літери, цифри, підкреслення (_) і знаки долара ($). Вони повинні починатися з літери, підкреслення або знака долара.

let _value = 10; let $name = "Jane";

1. Чутливість до регістру: Імена змінних чутливі до регістру. Наприклад, name і Name є різними змінними.
2. Зарезервовані слова: Ви не можете використовувати зарезервовані слова JavaScript (як if, else, return тощо) як імена змінних.
3. Описові імена: Використовуйте зрозумілі та описові імена для покращення читабельності.

let _value = 10;
let $name = "Jane";

Область видимості змінних:

1. Глобальна область видимості:

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

var globalVar = "I'm global!";  
function showGlobalVar() {  
 console.log(globalVar);  
}  
showGlobalVar(); // Output: I'm global!

2. Локальна область видимості:

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

function localScope() {  
 let localVar = "I'm local!";  
 console.log(localVar);  
}  
localScope(); // Output: I'm local!  
// console.log(localVar); // Error: localVar is not defined

3. Блочна область видимості:

Змінні, оголошені за допомогою let чи const, обмежені блоком (наприклад, циклами, умовними операторами), в якому вони були оголошені.

if (true) {  
 let blockVar = "I'm block-scoped!";  
 console.log(blockVar); // Output: I'm block-scoped!  
}  
// console.log(blockVar); // Error: blockVar is not defined

Підйом змінних (Hoisting)

У JavaScript оголошення змінних піднімаються на початок їх області видимості під час виконання програми. Однак піднімаються лише оголошення, а не присвоєння.

console.log(hoistedVar); // Output: undefined  
var hoistedVar = "I was hoisted!";

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

console.log(hoistedLet); // Error: Cannot access 'hoistedLet' before initialization  
let hoistedLet = "I was hoisted!";

Найкращі практики використання змінних

1.
Використовуйте let та const: Використовуйте let для змінних, які можуть змінюватися, і const для тих, що мають залишатися сталими.
2. Вибирайте описові імена: Використовуйте змістовні імена змінних, щоб зробити код більш зрозумілим.
3. Уникайте глобальних змінних: Мінімізуйте використання глобальних змінних, щоб уникнути непередбачуваних побічних ефектів.
4. Ініціалізуйте змінні: Завжди ініціалізуйте змінні зі значенням, щоб уникнути значення undefined.
5. Дотримуйтесь послідовності в іменуванні: Використовуйте стиль camelCase для імен змінних (наприклад, userName, totalAmount).

Висновок

Змінні є основною концепцією в JavaScript, що дозволяє створювати динамічні та гнучкі програми. Розуміючи, як оголошувати, обмежувати область видимості та ефективно використовувати змінні, ви можете писати більш чистий і зручний для підтримки код. Незалежно від того, чи ви початківець чи досвідчений розробник, дотримання найкращих практик гарантує, що ваші змінні працюватимуть ефективно в рамках ваших застосунків.

https://github.com/nehatanwardev/jstutorial/blob/main/03variables.js

Перекладено з: Understanding Variables in JavaScript