С добавлением ES6 разработчики получили ряд новых функций. Одним из них являются ключевые слова const и let. В этой статье мы лучше поймем, что они делают, и чем они отличаются от классических var.

Ключевое слово var

До введения ES6 использовались только объявления var.

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

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

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

Взгляните на пример ниже:

var morning = “Good morning!”;
function myFunction() {
    var evening = “Good evening!”;
}
console.log(morning);  // “Good morning!”
console.log(evening);  // ReferenceError: evening is not defined

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

При этом переменная evening относится к области действия функции, поскольку она была объявлена ​​внутри функции и не может использоваться вне ее. Вот почему мы получили ошибку.

Проблема с var

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

var greet = “Good morning!”;
var bool = true;
if (bool) {
    var greet = “Hello there!”;
}
console.log(greet);  // “Hello there!”

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

пусть ключевое слово

Объем аренды

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

let greet = “Hello!”;
let times = 1;
if (times > 0) {
    let greetAgain = “Nice to see you again!”;
    console.log(greetAgain); // “Nice to see you again!”
}
console.log(greetAgain);  // Uncaught ReferenceError: greetAgain is not defined

В этом примере мы попытались получить доступ к переменной greetAgain на консоли. Это сработало только в первый раз, так как функция console.log находилась в том же блоке, что и переменная. Во второй раз мы получаем ошибку, так как функция теперь находится вне области видимости переменной.

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

let greet = “Hello!”;
greet = “Hello there!”;
console.log(greet);  // “Hello there!”

Но повторное объявление приведет к ошибке:

let greet = “Hello!”;
let greet = “Hello there!”;  // Uncaught SyntaxError: redeclaration of let greet

Один из способов обойти это — повторно объявить его в другой области, например так:

let greet = “Hello!”;
if (true) {
    let greet = “Hello there!”;
    console.log(greet);  // “Hello there!”;
}
console.log(greet);  // “Hello!”;

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

Ключевое слово const

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

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

Но в отличие от предыдущих, переменные const нельзя ни повторно объявить, ни обновить. Оба действия приведут к ошибкам:

const greet = “Hello”;
const greet = “Hello there!”;  // Uncaught SyntaxError: redeclaration of const greet
greet = “Hello there!”;  // Uncaught TypeError: invalid assignment to const 'greet'

Следовательно, каждая переменная const должна быть инициализирована при объявлении.

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

Однако мы можем обновить свойства const объектов. Вот как это будет выглядеть:

const greet = {
    message: “Hello!”;
    times: 1;
}
greet.message = “Hello there!”;

Это обновит значение свойства объекта без возврата ошибок.

Заключение

Итак, подводя итог, мы могли бы описать их различия следующим образом:

  • Объявления var могут иметь глобальную область действия функции, в то время как let и const область видимости блока.
  • var переменные могут быть повторно объявлены и обновлены; let переменных могут быть обновлены, но не объявлены повторно; const переменные не могут быть ни переобъявлены, ни обновлены.
  • В отличие от переменных let и var переменные const необходимо инициализировать при объявлении.