Прежде чем приступить к объяснению, чем отличаются 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. Советуем самостоятельно протестировать каждую описанную ситуацию, скопировав код из нашей статьи. Так вы закрепите новые знания на практике и поймете тему лучше!