Var против Let против Const

Различные объявления переменных

Любой разработчик javascript начинает свое путешествие с знакомства с var, let и const. Let и Const, которые были введены как функции ES6, всегда создают путаницу в отношении того, почему и каково было требование для введения новых объявлений переменных, когда у нас уже была var ранее.

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

1. Область действия — Область действия переменной определяет доступность переменной. Существует три области видимости: глобальная, функциональная/локальная и блочная.
2. Повторное объявление. Можно ли повторно объявить переменную, объявленную с помощью var, let или const?
3. Поднятие — Перемещение переменной в верхнюю часть области локально или глобально. Чтобы узнать больше о подъеме, вы можете обратиться к: (https://medium.com/@mspatheja/hoisting-in-javascript-28e19d3cdc8c)

Вар

Var — это традиционный способ объявления переменных в JavaScript до синтаксиса ES6. Значение по умолчанию любой переменной, объявленной с помощью var, равно undefined, и нет необходимости определять тип для переменной, объявленной с помощью var.

var example1;
var example2 = "Hello JavaScript";
console.log(example1) // undefined
console.log(example2) // "Hello JavaScript"

Объем переменной

Var имеет либо глобальную, либо функциональную/локальную область видимости. Когда функция объявляется внутри функции, она называется функциональной/локальной областью видимости, а когда переменная объявляется с помощью var вне функциональной области, она называется глобальной областью видимости.

В глобальной области переменная может использоваться в любом месте проекта, как показано ниже:

var example = 10;
function test() {
 console.log(example); // 10
}
test();

В функциональной/локальной области переменная может использоваться только внутри этой функции, тогда как использование той же переменной вне функции может привести к ошибке.

function test() {
 var example = "Hello JS";
 console.log(example); // "Hello JavaScript"
}
test();
console.log(example) // error: example is not defined

Повторное объявление и повторная инициализация

Любая переменная, объявленная с помощью var, может быть повторно объявлена, а также повторно инициализирована в том же файле проекта и даже в той же функции.

Example 1:
var example = "Hello JavaScript";
var example = "Hello JS";
console.log(example); // "Hello JS"

Example 2:
var example = "Hello JavaScript";
example = "Hello JS";
console.log(example); // "Hello JS"

Подъем вар

Подъем в JavaScript — это механизм, который перемещает переменную в верхнюю часть области видимости. Переменные, объявленные с помощью var, перемещаются в верхнюю часть своей области видимости и инициализируются значением по умолчанию undefined.

console.log(example);
var example = "Hello JavaScript";

В приведенном выше коде, когда переменная example поднимается, код будет выглядеть примерно так:

var example;
console.log(example); // undefined
example = "Hello JavaScript";

Приведенный выше код означает, что переменная example поднимается наверх своей области видимости и инициализируется значением по умолчанию undefined.

Основные проблемы с вар.

Как мы обсуждали выше, переменные могут быть повторно объявлены и повторно инициализированы, что создает проблему при работе над большими и сложными проектами. Это связано с тем, что при повторном объявлении и повторной инициализации переменной она теряет свое старое значение, которое может потребоваться на более позднем этапе проекта.

1. var example = 10;
2. // Code below
.
.
.
40. var example = 11;
.
.
.
50. console.log(2+example); // 13

Как мы видели в приведенном выше примере, значение примера будет 11 в строке 50 вместо 10, и скажем, разработчик использовал пример переменной, думая, что значение равно 10 (как объявлено в строке 1), он всегда будет давать неправильный выход.

Позволять

Let — наиболее предпочтительный способ объявления переменных, так как это улучшение по сравнению с var, которое решает проблемы с var, обсуждавшиеся выше.

Сфера действия

Let имеет область действия блока, что означает код, обернутый вокруг { }. Все, что написано внутри фигурных скобок, является блоком.

Переменные, объявленные внутри блока с помощью let, могут использоваться только внутри самого блока.

var hello = "Hello JavaScript";
if(hello === "Hello JavaScript"){
 let message = "let scope example";
 console.log(message); // "let scope example"
}
console.log(message); // error:- message is not defined.

Вызов переменной вне ее блока всегда будет приводить к ошибке, поскольку объявленная переменная может использоваться только внутри ее блока.

Нет повторного объявления, хотя повторная инициализация

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

let hello="Hello JavaScript";
let hello="Hello JS"; // error- Identifier 'hello' already declared.
console.log(hello);

Приведенный выше код выдаст ошибку, поскольку переменная hello уже объявлена ​​и не может быть повторно объявлена. Это решает проблему var, поскольку переменные не могут быть повторно объявлены в одном и том же блоке. Приведенные ниже примеры будут работать.

Пример 1:

let example = "Hello JavaScript";
example = "Hello JS";
console.log(example); // "Hello JS"

Пример 2:

function test1(){
 let example = "Hello JavaScript";
 console.log(example); // "Hello JavaScript"
}
function test2(){
 let example = "Hello JS";
 console.log(example); // "Hello JS"
}
test1();
test2();

Например2, мы дважды использовали одну и ту же переменную в двух разных блоках, поэтому код не выдаст ошибку.

Подъем Let

Подобно var, переменные, объявленные с помощью let, также поднимаются наверх своей области видимости. Хотя разница между ними заключается в том, что когда переменные, объявленные с помощью var, поднимаются, они инициализируются со значением по умолчанию, т. е. undefined, в то время как переменные, объявленные с помощью let, не инициализируются никаким значением, что дает ReferenceError.

console.log(exmaple); // Reference Error.
let example = 10;

Постоянная

Const похож на let, переменные, объявленные с помощью const, используются для определения констант в программе JavaScript. Для const переменная должна быть инициализирована во время объявления переменной. Если переменная не инициализирована во время объявления, это приведет к ошибке.

Объем

Подобно let, const также имеет блочную область видимости.

function test(){
 const example = "Hello JavaScript";
 console.log(example); // "Hello JavaScript"
}
test();

Без повторного объявления и без повторной инициализации

В отличие от let, переменные, объявленные с помощью const, не могут быть повторно объявлены, а также не могут быть повторно инициализированы. В обоих случаях код выдаст ошибку.

Пример 1:

const example = 10;
const example = 11; // Identifier 'example' has already declared
console.log(example);

Пример 2:

const example = 10;
example = 11; // TypeError: Assignment to constant variable.
console.log(example);

Например1, повторное объявление переменной дает ошибку, и аналогично для примера2 повторная инициализация переменной дает TypeError.

Подъем для const

Как и в случае с let, переменные, объявленные с помощью const, перемещаются в начало своей области видимости, но не инициализируются, что приводит к ошибке ReferenceError.

console.log(example); // Reference error
const example = "Hello JS";

Особый случай

Как упоминалось выше, переменная, объявленная с использованием const, должна быть инициализирована во время объявления, и переменная не может быть повторно инициализирована/обновлена, все еще ниже работает код:

const example = {
 message: "Hello JS"
}
example.count = 10;
console.log(example); // {message: "Hello JS", count: 10}

В приведенном выше примере мы обновляем значение переменной example, и код все еще работает. Причина этого в том, что при инициализации переменной константой вместо значения ссылка на адрес памяти сохраняется внутри переменной. Обновление значения объекта example не повлияет на адрес памяти и, таким образом, позволит разработчику обновить значение объекта, объявленного с помощью const. (то же самое и с массивом)

Заключение

• Переменные, объявленные с помощью var, имеют глобальную область действия или функцию/локальную область видимости, в то время как переменные, объявленные с помощью let и const, имеют область действия блока.
• Переменные могут быть повторно объявлены и повторно инициализированы при объявлении с помощью var , переменные не могут быть повторно объявлены, хотя они могут быть повторно инициализированы при объявлении с помощью let , в то время как переменные не могут быть повторно объявлены или они не могут быть повторно инициализированы при объявлении с помощью const .
• Переменные всегда поднимаются при объявлении с любым из трех. Хотя переменные, объявленные с помощью var, инициализируются со значениями по умолчанию, т. е. undefined, а переменные, объявленные с помощью let и const, не инициализируются и приводят к ReferenceError.
• Переменные, объявленные с помощью var и let, могут быть объявлены и не инициализированы, хотя переменные, объявленные с помощью const, должны быть инициализированы во время объявления.