Все о var, let и const в JavaScript.

var, let и const (VLC) — доступные нам ключевые слова, с помощью которых мы можем объявлять переменные в JavaScript.

Синтаксис:

var a = 10;
let b = 20;
const c = 30;

Ход этой статьи

Декларация
Инициализация
Передекларирование
Повторная инициализация
Объем
Поднятый
Представлено
Лист изменений

1. Декларация:

Объявление переменных означает выделение памяти для переменных. Область действия этой переменной зависит от того, где она объявлена (функция/локальная или глобальная область).

Например, представьте, что переменная — это ведро с именем «а», которое вы купили в каком-то магазине «Х», и теперь оно пусто. Не присвоено никакого значения.

var a;    // allowed 
let b;    // allowed
 
const c;  // not allowed 
SyntaxError: Missing initializer in const declaration

Мы можем объявить var и let в одной строке и инициализировать позже. Но с const это не разрешено. С помощью const нам нужно объявить переменную и инициализировать ее значением в той же строке.

const c = 10 ;  // allowed

2. Инициализация:

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

Инициализация той же строки:

var a = 10,
let b = 20; 
const c = 30;

Поздняя инициализация:

Объявление переменной в одной строке и инициализация ее позже.

var a; 
a = 10; // allowed

let b;
b = 20; // allowed

const c;
c = 30; // not allowed
SyntaxError: Missing initializer in const declaration

3. Повторная инициализация:

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

Здесь мы объявили var a = 10 еще раз, а затем снова попытались его повторно инициализировать. См. комментарии ниже, чтобы понять пример.

var a = 10;     //declared once
a = 20;        //reintialized again --> its possible with var

let b = 10;     //declared once
b = 20;        //reintialized again --> its possible with let

const c = 10;   //declared once
c = 20;        //reintialized again --> its NOT possible with let, 
TypeError: Assignment to constant variable.

4. Повторное объявление:

Снова объявление того же имени переменной.

Когда мы объявляем переменную с тем же именем, js не выделяет новую память, а просто обновляет предыдущую переменную новым значением.

Мы не можем объявить let и const дважды в одной и той же области видимости.

var a = 10;
var a = 20; //its possible to with var

let b = 10;
let b = 20; //its not possible to with let 
SyntaxError: Identifier 'b' has already been declared
 
const c = 10;
const c = 20; //its not possible with const
SyntaxError: Identifier 'c' has already been declared

Подумайте об этом:если константные переменныесоздают постоянную ссылку на значение, то как работает эта модификация сложных данных, если они объявлены с ключевым словом const.

const arr = [];

5. Область применения

а) Функциональный объем:

Чтобы понять функциональную область применения var, сначала рассмотрим пример переменной без ключевого слова.

Сначала давайте объявим переменную приветствия БЕЗ var .

When we don’t declare variables without any var, let and const , variables gets hoisted globally .

Чтобы доказать то, что я только что сказал, просто запустите приведенный ниже код, и вы увидите, что даже после удаления функции из стека у нас все еще будет ссылка на приветствие. В противном случае возникнет ошибка: приветствие не определено.

ПРИМЕЧАНИЕ:
function willFoofi() {
Greeting = «Привет, foofi!»; // поднимается глобально
console.log(greeting);

willFoofi();
console.log(greeting); // Привет, фуфи!

Output:
Hello, foofi!
Hello, foofi!

Давайте объявим переменную приветствия с помощью var

Попробуйте этот код, и вы увидите ошибку, потому что при вызове функции она выведет «Hello, foofi!» в консоли. Но после вызова, как мы все знаем, функция будет удалена из стека, и на этот раз приветствие было ограничено функциональной областью из-за объявления var, которое здесь не доступно нам глобально.

Итак, вы увидите «Привет, фуфи!» и ошибку о том, что приветствие не определено.

function wishFoofi() {
    var greeting = "Hello, foofi!"; //greeting remained functional scoped
    console.log(greeting);
}
wishFoofi();
console.log(greeting); // error
Output:
Hello, foofi!
ReferenceError: greeting is not defined

На этом примере мы можем понять, что var имеет функциональную область действия.

б) Область действия блока

Anything inside these curly braces {} is block scoped.

var: он не соответствует области блока, поскольку мы знаем, что он имеет область действия функции, глобальную область видимости (если объявлен вне какой-либо функции). В примере ниже мы видим x доступен за пределами области действия блока, следовательно, он не ограничен областью действия блока.

let:Это блочная область действия. В приведенном ниже примере мы видим, что y недоступен за пределами области действия блока.

const :Это также блочная область действия. В приведенном ниже примере мы видим, что z недоступен за пределами области действия блока.

{ 
  var x = 10;
}
console.log(x); // output 10

{ 
  let y = 20;
}
console.log(y); // output : ReferenceError: y is not defined

{ 
  const z = 30;
}
console.log(z); // output : ReferenceError: z is not defined

6. Поднятый

var :во время компиляции переменные с var поднимаются вверху области видимости функции или глобально ( если объявлено вне функции) и становится неопределенным.

console.log(x); // Outputs 'undefined'
var x = 10;    // Assignment remains in its original position

Здесь, в этом примере, x поднимается глобально, и мы получаем неопределенное значение.

let и const :переменные с let и const также поднимаются, но находятся в верхней части области действия блока, и им не присваивается неопределенное значение.

console.log(y); // TDZ: ReferenceError:Cannot access 'y' before initialization
.               // TDZ: ReferenceError:Cannot access 'y' before initialization
.               // TDZ: ReferenceError:Cannot access 'y' before initialization
.               // TDZ: ReferenceError:Cannot access 'y' before initialization
.               // TDZ: ReferenceError:Cannot access 'y' before initialization
let y = 10;     // now initialized so TDZ finished
console.log(y); // 10

В приведенном выше примере y поднимается вверху блока, но попадает во «временную мертвую зону» (TDZ). Поэтому мы не можем получить доступ к этой переменной, пока не будет достигнут оператор объявления. Во время TDZ попытка доступа к переменной приводит к ошибке ReferenceError.

7. Представлено:

var : С var и без ключевого слова ( x = 10 ) были единственными способами объявления переменных до введения let и const в ECMAScript 6 (ES6), известных как ECMAScript 2015.

Ответ в разделе «Подумай об этом»: изменение ссылки на константную переменную не разрешено, но это ограничение не распространяется на контент. Так что мы можем это изменить.

а) Изменение содержимого массива

Пример

const catsAge = [ 4 , 9 , 10, 8 ];
catsAge[ 4 ] = 13; // this will work perfectly

б) Изменение ссылки на массив

Но если вы попытаетесь присвоить этот массив какому-то другому новому массиву, это приведет к ошибке.