О сериале

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

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


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

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

ПередекларируемыйПереназначаемыйСфераПодъем
былглобальный / функцияподнят, инициализирован
позволятьблокироватьподнят, не инициализирован
константаблокироватьподнят, не инициализирован


Был

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

var name = 'Steve';
var name = 'Chris';
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

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

var age = 28;
age = 30;
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

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. Мы поговорим больше о подъеме в следующей статье, но если вы хотите узнать больше об этом сейчас, ознакомьтесь с этой статья на МДН.

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

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