ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Разница между «var», «let» и «const» в JavaScript
Появление операторов «let» и «const» — одно из важных новшеств ES6. Но чем эти операторы отличаются от уже знакомого всем разработчикам «var»? Наша статья поможет разобраться в этом вопросе.
Веб-разработка
23864
Прежде чем приступить к объяснению, чем отличаются var, let и const, нам нужно понять концепцию информатики, называемую область видимости.

В 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-разработчик
Подробнее о курсе
Читайте другие статьи
Чем полезны frontend-разработчикам регулярные выражения?
Разбираемся, что такое регулярные выражения, как они повышают скорость разработки и качество кода. Узнайте, в каких ситуациях регулярные выражения придут на помощь, а в каких только усложнят жизнь разработчику.
Веб-разработка
2161
Зачем тестировать веб-сайт?
Тестирование веб-сайта — это важный процесс выявления ошибок на веб-сайте, веб-микросервисе или любом другом веб-приложении. В статье вы узнаете, что необходимо учесть разработчику, чтобы оценить, насколько хорошо сайт выполняет свою задачу.
Веб-разработка
4858
Как работает Flexbox? (часть 2)
В этой статье мы продолжим рассказывать о модуле Flexbox, где рассмотрим свойства дочерних элементов Flexbox и разберем их основные значения.
Веб-разработка
742
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!