Разница между «var», «let» и «const» в JavaScript
Появление операторов «let» и «const» — одно из важных новшеств ES6. Но чем эти операторы отличаются от уже знакомого всем разработчикам «var»? Наша статья поможет разобраться в этом вопросе.
Веб-разработка
23864
24 нояб. 2020
Прежде чем приступить к объяснению, чем отличаются var, let и const, нам нужно понять концепцию информатики, называемую область видимости.
В JavaScript существует два вида области видимости: область действия функции и область действия блока.
При использовании var переменные имеют функциональную область видимости, поскольку их видимость ограничена функцией. Если вы попытаетесь использовать его вне функции, вы получите сообщение об ошибке:
Обратите внимание, что видимость foo не ограничивается блоком if-statement. Однако видимость как a, так и b ограничена для блока кода.
Эта концепция области видимости показывает наиболее заметное различие между var и современными let и const.
Переменные, объявленные при помощи var, могут иметь как глобальную, так и локальную область видимости.
В этом примере a имеет глобальную область видимости, потому что существует вне функции. А вот область видимости b — локальна. Мы не имеем доступа к переменной b вне функции, в которой она объявлена. Поэтому, если сделаем так, то получим ошибку:
Мы получили ошибку, поскольку переменная b недоступна вне функции.
Переменные, объявленные при помощи var, могут как объявляться заново, так и обновляться.
Например:
— и это не приведет к ошибке.
И вот так мы тоже не получим ошибок:
Оператор let — это улучшенный вариант var. В отличие от var, let имеет блочную область видимости. Переменная, объявленная в блоке кода при помощи оператора let, доступна только в рамках этого блока кода.
Таким образом, использование переменной c вне ее блока (т. е., за пределами кода, ограниченного фигурными скобками, в котором была объявлена переменная) приводит к ошибке. Произошло это потому, что переменные, объявленные при помощи let, имеют блочную область видимости.
Ключевое слово const — это сокращение от слова "константа". Как и в случае с let, у оператора блочная область видимости, однако переназначить его нельзя.
То есть, значение переменной, объявленной при помощи const, остается неизменным внутри ее области видимости. Эту переменную нельзя объявить заново или обновить. Поэтому, мы не можем объявить переменную при помощи const ни так:
ни вот так:
Вследствие этого каждая переменная, объявленная с использованием const, должна быть инициализирована при объявлении.
Объект, прописанный с оператором const, не может быть обновлен, а свойства этого объекта обновлять можно. То есть, если мы объявим объект следующим образом:
мы не сможем сделать так:
а вот так — сможем:
Значение a.message обновится без ошибок.
В этой статье мы рассказали о разнице между операторами в «var», «let» и «const» в JavaScript. Советуем самостоятельно протестировать каждую описанную ситуацию, скопировав код из нашей статьи. Так вы закрепите новые знания на практике и поймете тему лучше!
В JavaScript существует два вида области видимости: область действия функции и область действия блока.
Область действия функции
При использовании var переменные имеют функциональную область видимости, поскольку их видимость ограничена функцией. Если вы попытаетесь использовать его вне функции, вы получите сообщение об ошибке:
function myFn() { var foo = 'Hello!'; console.log(foo); // 'Hello!' } console.log(foo); // ReferenceError: foo is not defined
Область действия блока
Блок кода - это код между фигурными скобками в JavaScript.
if (true) { var foo = 'Hello!'; let a = 'itlogia'; const b = 'let's learn!'; console.log(foo); // 'Hello!'; console.log(a); // 'itlogia'; console.log(b); // 'let's learn!'; } console.log(foo); // 'Hello!'; console.log(a); // ReferenceError: a is not defined console.log(b); // ReferenceError: b is not defined
Обратите внимание, что видимость foo не ограничивается блоком if-statement. Однако видимость как a, так и b ограничена для блока кода.
Эта концепция области видимости показывает наиболее заметное различие между var и современными let и const.
Var
Переменные, объявленные при помощи var, могут иметь как глобальную, так и локальную область видимости.
- Глобальная область видимости — переменная объявлена вне функции.
- Локальная область видимости — доступ к переменной только в рамках определенной функции.
Рассмотрим пример
var a = 'Hello'; function newFunction() { var b = 'Hi'; }
В этом примере a имеет глобальную область видимости, потому что существует вне функции. А вот область видимости b — локальна. Мы не имеем доступа к переменной b вне функции, в которой она объявлена. Поэтому, если сделаем так, то получим ошибку:
var a = 'Hello'; function newFunction() { var b = 'Hi'; } console.log(b); // error: b is not defined
Мы получили ошибку, поскольку переменная b недоступна вне функции.
Переменные, объявленные при помощи var, могут как объявляться заново, так и обновляться.
Например:
var a = 'Hello'; var a = 'Hello, itlogia!';
— и это не приведет к ошибке.
И вот так мы тоже не получим ошибок:
var a = 'Hello'; a = 'Hello, itlogia!';
Let
Оператор let — это улучшенный вариант var. В отличие от var, let имеет блочную область видимости. Переменная, объявленная в блоке кода при помощи оператора let, доступна только в рамках этого блока кода.
let a = 'Hello'; let b = 4; if(b > 3){ let c = 'Hello, itlogia!'; console.log(c);//'Hello, itlogia!' } console.log(c) // c is not defined
Таким образом, использование переменной c вне ее блока (т. е., за пределами кода, ограниченного фигурными скобками, в котором была объявлена переменная) приводит к ошибке. Произошло это потому, что переменные, объявленные при помощи let, имеют блочную область видимости.
Const
Ключевое слово const — это сокращение от слова "константа". Как и в случае с let, у оператора блочная область видимости, однако переназначить его нельзя.
То есть, значение переменной, объявленной при помощи const, остается неизменным внутри ее области видимости. Эту переменную нельзя объявить заново или обновить. Поэтому, мы не можем объявить переменную при помощи const ни так:
const a = 'Hello'; a = 'Hello, itlogia!';//error : Assignment to constant variable.
ни вот так:
const a = 'Hello'; Const a = 'Hello, itlogia!';//error : Identifier 'a' has already been declared
Вследствие этого каждая переменная, объявленная с использованием const, должна быть инициализирована при объявлении.
Объект, прописанный с оператором const, не может быть обновлен, а свойства этого объекта обновлять можно. То есть, если мы объявим объект следующим образом:
const a = { message : 'Hello', times : 4 }
мы не сможем сделать так:
const a = { words : 'Hello, itlogia!';, number : 'five' }//error : Assignment to constant variable.
а вот так — сможем:
a.message = 'Hello, itlogia!';
Значение a.message обновится без ошибок.
В этой статье мы рассказали о разнице между операторами в «var», «let» и «const» в JavaScript. Советуем самостоятельно протестировать каждую описанную ситуацию, скопировав код из нашей статьи. Так вы закрепите новые знания на практике и поймете тему лучше!
Читайте другие статьи
Чем полезны frontend-разработчикам регулярные выражения?
Разбираемся, что такое регулярные выражения, как они повышают скорость разработки и качество кода. Узнайте, в каких ситуациях регулярные выражения придут на помощь, а в каких только усложнят жизнь разработчику.
Веб-разработка
2161
11 марта 2022
Зачем тестировать веб-сайт?
Тестирование веб-сайта — это важный процесс выявления ошибок на веб-сайте, веб-микросервисе или любом другом веб-приложении. В статье вы узнаете, что необходимо учесть разработчику, чтобы оценить, насколько хорошо сайт выполняет свою задачу.
Веб-разработка
4858
27 окт. 2020
Как работает Flexbox? (часть 2)
В этой статье мы продолжим рассказывать о модуле Flexbox, где рассмотрим свойства дочерних элементов Flexbox и разберем их основные значения.
Веб-разработка
742
7 июля 2020
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!