О сериале
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
существует два основных подхода относительно того, когда какой использовать:
- Используйте
let
по умолчанию, переключитесь наconst
, когда вам нужно, чтобы переменная оставалась постоянной. - Используйте
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! Если вы нашли это полезным, если у вас есть что добавить, или если я допустил какие-либо ошибки — я буду рад услышать от вас! Я также очень открыт для предложений по будущим темам для серии. 😊
Ожидайте увидеть следующую часть в ближайшее время. Спасибо и увидимся там!