В ES6 было много полезных дополнений к JavaScript, таких как Promises , async / await , деструктуризация ES6 и другие. let и const - одно из таких дополнений.

Сегодня в этом блоге мы обсудим разницу между var, let и const в Javascript. Итак, приступим.

let vs var в Javascript

До использования JavaScript в ES6 varключевое слово, которое имеет только глобальную область видимости и имеет некоторые недостатки. с let, javascript добавил область на уровне блока.

Давайте обсудим разницу на нескольких примерах.

// ES5 Code
var x = 10;
console.log(x) // 10
var x = "Hello Reader"
console.log(x) // Hello Reader
var x = 12.2
console.log(x) // 12.2

с varключевым словом мы смогли повторно объявить переменную, которая уже была объявлена. Это создает путаницу, когда код становится больше. что, если бы у нас уже была объявлена ​​переменная с тем же именем где-то еще, и мы повторно объявляем ее, не осознавая этого? Затем мы можем переопределить значение переменной, что вызовет некоторые трудности при отладке.

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

// ES6 Code
let x = 10;
console.log(x); // 10
let x = "Hello Reader"
// Uncaught SyntaxError: Identifier 'x' has already been declared

// ES6 Code
let x= 10;
console.log(x); // 10

x = "Hello Reader";
console.log(x); // Hello Reader

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

Теперь взгляните на приведенный ниже код.

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); 
// Uncaught ReferenceError: number is not defined

Но что, если мы объявим let за пределами ifблока? Давай посмотрим.

// ES6 Code
let isValid = true;
let number = 10;
if(isValid) {
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // 10

let vs const в Javascript

constКлючевые слова работают точно так же , как letключевое слово. Он также имеет область видимости на уровне блоков. тогда чем они отличаются друг от друга? Давайте взглянем

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

Взгляните на приведенный ниже код

// ES6 Code
let x = true;
x = "Hello Reader";
console.log(x) // Hello Reader

// ES6 Code
const x = true;
x = "Hello; 
// Uncaught TypeError: Assignment to constant variable.

Но это поведение constотличается, когда дело касается объектов и массивов . пока constобъект не может быть обновлен, но его свойства могут быть обновлены. Это потому, что объекты являются ссылочными типами в javascript.

Взгляните на код ниже

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};

person.age = 22;

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};
person = {
 firstName: "Taran",
 lastName: "Arora"
}

Подведение итогов var, let и const

1. Ключевые слова letи constдобавить область видимости блока в JavaScript.
2. var переменные могут быть обновлены и повторно объявлены в пределах своей области видимости
3. letпеременные могут быть обновлены, но не объявлены повторно constпеременные не могут быть ни обновлены, ни повторно объявлены.