Уроки JavaScript – Все, що потрібно знати про змінні

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

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

 

Ви можете вільно використовувати кожен з цих видів змінних, оскільки всі вони «нетипізовані», — тобто, це означає, що змінна може містити значення будь-якого типу даних. Змінні JavaScript відрізняються один від одного тим, як ви можете взаємодіяти зі змінною пізніше.

 

Нижче показаний приклад синтаксису оголошення змінної в JavaScript.

ВАЖЛИВО! Ви повинні завжди спочатку оголошувати змінну, а потім тільки використовувати її.

 

var someVariable; // оголошення змінної
someVariable = 'якесь значення'; // привласнення значення змінній
var someVariable = 'якесь значення'; // скорочений варіант оголошення: одночасно оголошення та привласнення значення

 

 

Ви можете оголосити кілька змінних в одному виразі:

// Створюємо три змінні в одному виразі
var variableOne = 'Перша змінна',
   variableTwo = 'Друга змінна',
   variableThree = 'Третя змінна';

 

 

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

var example = 'якесь значення'; // змінна example містить значення 'якесь значення'
example = 'нове значення'; // тепер змінна example містить значення 'нове значення'

 

 

 

Оголошення змінної за допомогою ключового слова let

 

Синтаксис змінної let виглядає так:

let someVariable = 'значення змінної';

 

У стандарті ECMAScript для JavaScript, який був представлений в 2015 році (ES2015), було введено ключове слово let для змінної. Нововведення було направлено на підтримку філософії, згідно з якою змінні повинні існувати тільки там, де вони необхідні.

Як і змінна var, змінні let також можуть бути перевизначені в будь-якій точці програмного коду. Є 3 основних відмінності між змінними let і var:

  • На верхньому рівні let, на відміну від var, не створює властивості для глобального об’єкту.
  • Змінні let не ініціалізуються, поки їх визначення не буде оцінено. Тому, на відміну від var, змінні let не «піднімаються» в верхню частину блоку. Спроба отримати до них доступ призведе до помилки ReferenceError.
  • Змінні, оголошені з використанням ключового слова var, потрапляють в безпосереднє тіло функції, а змінні let – в безпосередній обгортковий блок, який позначений символами {} (фігурні дужки).

 

 

 

Оголошення змінної за допомогою ключового слова const

 

Синтаксис змінної const виглядає так:

const someVariable = 'значення змінної';

 

У стандарті ECMAScript шостої версії (ES6) для JavaScript, що також був представлений в 2015 році, було введено ключове слово const, яке також дозволяє визначати нову змінну.

Як і в випадку зі змінною let, у змінної const є своя область дії блоку. Між цими змінними є одна принципова відмінність.

Як тільки змінна const ініціалізована, її значення не може бути змінене, якщо змінна не є частиною об’єкта, що надає методи, які змінюють її вміст. Візьмемо для прикладу наступний масив:

const arr = ['Іван', 'Степан', 'Олексій'];
// виклик в консолі логу для arr[1] поверне 'Іван'
// Метод нижче перевизначає 'Іван' в 'Михайло'
arr[1] = 'Михайло';
// виклик в консолі логу для arr[1] поверне 'Михайло'

 

 

 

Ось і все на сьогодні. Дякуємо, що читаєте нас!

 

Recent Posts

Google Search Console – Проблема з LCP та як її вирішити

Нещодавно ми писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

18/01/2021

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021

Google Search Console – Проблема з CLS та як її вирішити

Ми раніше писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

11/01/2021

Найкращі водоспади світу (частина 3/3)

Водоспад – є одним з найбільш хвилюючих і найкрасивіших творінь матінки-природи у нашому світі. По… Read More

08/01/2021