О сериале

Core JavaScript — это серия статей, которую я пишу и которая охватывает, как следует из названия, некоторые из основных принципов JavaScript. Первоначально он начинался как учебный или справочный материал для меня, но я решил поделиться им с сообществом в надежде, что он окажется полезным для других.

Эта серия предназначена для начинающих разработчиков JavaScript или более опытных разработчиков, нуждающихся в повышении квалификации. У меня уже запланировано несколько тем, но я хотел бы услышать от вас, есть ли какие-то темы, о которых вам было бы интересно прочитать!

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

Ниже приведен краткий обзор основных характеристик объявления каждой переменной:

Вар

До ES6 var был единственным вариантом объявления переменных в JavaScript, но с ним было несколько проблем. Например, переменные var могут быть переобъявлены, а это значит, что делать что-то подобное вполне допустимо:

var name = 'Steve';
var name = 'Chris';

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

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

var age = 28;
age = 30;

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

var yellowFruit = 'banana'; // outside of function -> global scope
function f() {
  var redFruit = 'strawberry'; // inside of function -> function scope
}
console.log(redFruit); // ReferenceError: redFruit is not defined, because redFruit is not in the global scope

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

// What we write
console.log(favoriteSeason);
var favoriteSeason = 'spring';
// How it's interpreted
var favoriteSeason;
console.log(favoriteSeason);
favoriteSeason = 'spring';

Позволять

let решает одну из основных проблем, связанных с var: переменные let нельзя повторно объявить в той же области видимости (подробнее об этом позже). Вам не нужно беспокоиться о случайном создании ошибок в коде путем повторного объявления уже объявленной переменной. Выполнение этого, например, не допускается:

let name = 'Steve';
let name = 'Chris'; // SyntaxError: Identifier 'name' has already been declared

Как и var, переменные let также можно переназначать.

let age = 28;
age = 30;

С точки зрения области действия переменные let имеют область действия блока. Блок — это любой код, записанный между парой фигурных скобок { }. Помните, что переменные let нельзя повторно объявить в той же области видимости? Однако их можно повторно объявить, если они находятся в разных областях, как показано ниже.

let yellowFruit = 'banana';
if (true) {
  let yellowFruit = 'lemon';
  console.log(yellowFruit); // lemon
}
console.log(yellowFruit); // banana

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

console.log(favoriteSeason);
let favoriteSeason = 'spring';  // ReferenceError: favoriteSeason is not defined

Постоянная

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

const name = 'Steve';
const name = 'Chris';  // SyntaxError: Identifier 'name' has already been declared

В отличие от переменных var и let, переменные const нельзя переназначить.

const age = 28;
age = 30;  // TypeError: Assignment to constant variable.

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

const student = {
  name: 'Alice',
  age: 16
}
student.name = 'Kelly';  // works fine
student = {
  name: 'Susan',  // TypeError: Assignment to constant variable.
  age: 15
}

Так же, как let, переменные const имеют область действия блока.

const yellowFruit = 'banana';
if (true) {
  const yellowFruit = 'lemon';
  console.log(yellowFruit); // lemon
}
console.log(yellowFruit); // banana

Точно так же, как let, переменные const поднимаются наверх своей области видимости, но не инициализируются.

console.log(favoriteSeason);
const favoriteSeason = 'spring'; // ReferenceError: favoriteSeason is not defined

Когда использовать какой?

Для let и const существует два основных подхода относительно того, когда какой использовать:

  1. Используйте let по умолчанию, переключитесь на const, когда вам нужно, чтобы переменная оставалась постоянной.
  2. Используйте const по умолчанию, переключитесь на let, когда вам нужно переназначить переменную.

А как насчет var? По общему мнению разработчиков JavaScript, в современном JavaScript ВЫ НИКОГДА НЕ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ VAR ни при каких обстоятельствах. var просто хуже по сравнению с let и const, и нет веских причин его использовать. Кроме того, есть шанс, что ваш технический руководитель выследит вас, если увидит var в ваших запросах на включение. 😄

Упражняться

Каковы результаты этих фрагментов кода?

1.

if (true) {
  var year = 2022;
  let model = 'Golf';
}
console.log(year)
console.log(model)

Ответ:

2022
ReferenceError: model is not defined

Причина:model объявлен с использованием let, что означает, что его область действия ограничена блоком кода оператора if. Попытка получить к нему доступ за пределами его области действия вызовет ошибку. year объявляется с использованием var, который не является блочным, и поэтому к нему можно получить доступ вне оператора if.

2.

for (var i = 0; i < 3; i++) {
  console.log('Looping...')
}
console.log(i);

Ответ:

Looping...
Looping...
Looping...
3

Причина: В этом случае var объявлено глобально, поэтому i доступно за пределами цикла for.

3.

for (let i = 0; i < 3; i++) {
  console.log('Looping...')
}
console.log(i);

Ответ:

Looping...
Looping...
Looping...
Uncaught ReferenceError: i is not defined

Причина. Поскольку let имеет область действия блока, i ограничен циклом for и не может быть доступен за его пределами.

Спасибо, что прочитали вторую статью из моей серии Core JavaScript! Если вы нашли это полезным, если у вас есть что добавить, или если я допустил какие-либо ошибки — я буду рад услышать от вас! Я также очень открыт для предложений по будущим темам для серии. 😊

Ожидайте увидеть следующую часть в ближайшее время. Спасибо и увидимся там!