С добавлением 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
необходимо инициализировать при объявлении.