Умение правильно объявить данные и потом управлять этими данными всегда было основой программирования. Что такое программирование без данных? Полагаю, ваш ответ «ничего».

Данные в коде в основном либо переменные, либо константы.

  • Переменные можно изменять
  • Константы остаются прежними

В этой статье мы обсудим различные способы создания переменных в JavaScript.

Это может показаться простой темой, но есть тонкие нюансы при создании переменных в JavaScript, которые важно знать.

Что такое переменные

Переменные в JavaScript - это контейнеры, которые содержат данные многократного использования. Они похожи на некие ящики, наполненные каким-то материалом, и этот материал можно использовать снова и снова, в зависимости от того, какой из них мы выберем. До ES2015 переменные JavaScript объявлялись исключительно с использованием ключевого слова var.

var x;

Вот таким образом мы объявили переменную с именем x.

Обратите внимание, что мы пока не присвоили значение этой переменной. Мы только говорим, что она должна существовать. Если мы посмотрим на значение этой переменной, оно будет undefined.

Объявление переменных в ES2015

ES2015 - это обновленная версия JavaScript (также известного как ECMAScript). Более общий термин для ES2015 - ES6.

В ES2015 были представлены два других способа объявления переменных. Это let и const. Мы рассмотрим эти типы ниже.

Использование переменных

Переменные похожи на контейнеры в JavaScript. Использование переменных для хранения данных является основой языка и состоит из трех отдельных этапов:

1. Объявление переменных. Здесь переменная регистрируется в соответствующей области видимости. Область видимости переменной - это область кода «где можно использовать переменную». 

Примеры объявления переменной:

var x;
var _box;
var container;

2. Инициализация переменной. Обычно это происходит при объявлении переменной. На этом этапе движок JavaScript под переменную выделяет память или пространство. Из-за этого, как только переменная объявлена, она принимает значение undefined еще до присвоения ей значения.

3. Присвоение значения. Присвоение значения переменной обычно является наиболее важным шагом при использовании переменной. Здесь переменной присваиваются данные с использованием оператора присваивания =. Значением в JavaScript может быть один из стандартных типов данных, а именно:

  • Строка
  • Число
  • Булевый тип
  • null
  • undefined
  • Любой из сложных типов (Объект, Массив)
var s = 'Привет';  // строка
var n = 5;  // число
var animal = true | false;  // булевый
var location = null;  // null
var red;  // undefined
var o = {num: 1};  // объект

Именование переменных

При именовании переменных в JavaScript необходимо соблюдать определенные правила:

  • Имена должны начинаться с нижнего регистра.
  • Имена не могут содержать символы или начинаться с символов.
  • Имена не могут начинаться с цифры.
  • Имена могут содержать сочетание строк в верхнем регистре, строк в нижнем регистре и чисел.

Примеры имен переменных:

// Валидные имена
var man;
var blackDog;

// Невалидные имена
var 1girl;
var -girl;

Объявление нескольких переменных в JavaScript можно объединить в цепочку, разделяя их запятыми:

var x, y, z;

Таким же образом можно присваивать значения:

var x = 5, y = 6, z = 7;

Переменные в JavaScript также могут быть результатом простых математических выражений:

var x = 5 + 10 + 2;
console.log(x);  // => 17

После первого объявления переменной в глобальной области видимости возможны последующие объявления имени переменной с использованием var.

var age = 22;
var age = 25;

console.log(age)  // => 25

Теперь рассмотрим другие типы переменных - let и const.

Let

Представленный в ES2015 (он же ES6) тип переменной let имеет много общего с var, но, в отличие от var, имеет ограничения области видимости. let ограничена той областью видимости, в которой она объявлена. Ее объявление и присваивание аналогичны var. Однако let была введена для смягчения проблем, с которыми разработчики сталкиваются во время разработки.

Короче говоря, let помогает нам, упрощая просмотр того, где находятся переменные в нашем коде.

Объявление переменных с помощью let:

let x;
let x = 5;

Объявление нескольких переменных одновременно:

let x, y, z;
let x = 50, y = 20, z = 3;

В отличие от var, переменные не могут быть повторно объявлены с помощью let, и попытка сделать это вызовет синтаксическую ошибку: "Identifier has already been declared".

let x = 20;
let x = 50;
// SyntaxError: identifier "x" has already been declared.

Подобные модификации имеют большое значение для обеспечения высокого уровня организации кода при управлении большими структурами данных, поскольку безопаснее знать, что ваша переменная не может быть переназначена где-либо в ее области.

Const

В ES2015 также введено понятие const - это тип переменной, присваиваемый данным, значение которых не может и не будет изменяться на протяжении всего скрипта. const также ограничена областью действия, в которой он работает. const объявляется как var и let.

Используйте const, если вы уверены, что переменная не будет объявлена повторно.

const x = 20; 
const color = 'red';

Важное правило: Переменная, объявленная через const, должна быть инициализирована.

const x; // SyntaxError: missing initializer

Как var и let, несколько const могут быть объявлены через запятую:

const x = 20, y = 50, man = true;

Изменение const

Изменение значения переменной, объявленной через const, вызовет ошибку:

const name = 'Иван';
name = 'Петя'; // Uncaught TypeError: Assignment to constant variable.

Однако, если через const объявлен объект, есть возможность изменять его свойства:

const person = {};
person.name = 'Иван'; // ошибки не будет

Что использовать

При объявлении переменных рекомендуется избегать использования var. Всегда склоняйтесь к let или const, руководствуясь следующими правилами:

  • Используйте let, когда нужно изменять значение переменной
  • Используйте const, если уверены, что переменная не изменится

Использование let и const сохранит переменные в правильной области видимости и упростит управление вашим кодом.