JavaScript - Variable Scope

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир области действия переменных. Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным проводником, и мы вместе исследуем это понятие, шаг за шагом. Так что возьмите свои виртуальные жезлы (клавиатуры), и погружаемся в!

Область действия переменных в JavaScript

Область действия переменной - это как игровая площадка, где ваши переменные могут играть. Она определяет, где в вашем коде переменная видима и может быть использована. Представьте это как "видимый диапазон" ваших переменных. Давайте начнем с простого примера:

let globalVar = "Я вижусь везде!";

function sayHello() {
console.log(globalVar);
let localVar = "Я вижусь только внутри этой функции!";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // Это работает
console.log(localVar);   // Это вызовет ошибку

В этом примере globalVar похож на популярного ребенка в школе - все его знают и могут с ним общаться. А localVar больше похож на стеснительного ребенка, который выходит только на уроке рисования (нашей функции sayHello).

Блочная область действия в JavaScript

Теперь давайте поговорим о блочной области действия. В JavaScript блок определяется фигурными скобками {}. Переменные, объявленные с помощью let и const, имеют блочную область действия, что означает, что они видны только внутри того блока, в котором они объявлены.

if (true) {
let blockScopedVar = "Я вижусь только в этом блоке!";
console.log(blockScopedVar);  // Это работает
}

console.log(blockScopedVar);  // Это вызовет ошибку

Представьте блочную область действия как тайный клубный домик. Только cool дети (переменные) внутри клуба (блока) знают тайный handshake (могут доступа к переменным).

Функциональная область действия в JavaScript

Функциональная область действия похожа на частную комнату для ваших переменных. Любая переменная, объявленная внутри функции, доступна только внутри этой функции. Давайте посмотрим пример:

function outer() {
let outerVar = "Я в внешней функции!";

function inner() {
let innerVar = "Я в внутренней функции!";
console.log(outerVar);  // Это работает
console.log(innerVar);  // Это работает
}

inner();
console.log(outerVar);  // Это работает
console.log(innerVar);  // Это вызовет ошибку
}

outer();

Здесь outerVar похож на родителя, который может заглянуть в комнату своего ребенка (inner функция), но玩具 (innerVar) остаются в комнате ребенка.

Локальная область действия в JavaScript

Локальная область действия относится к переменным, которые доступны только в определенной части вашего кода. Это может быть внутри функции (функциональная область действия) или блока (блочная область действия). Давайте рассмотрим более сложный пример:

let globalVar = "Я глобальный!";

function outerFunction() {
let outerVar = "Я из внешней функции!";

if (true) {
let blockVar = "Я из блока!";
var functionVar = "Я виден на всей функции!";

console.log(globalVar);    // Работает
console.log(outerVar);     // Работает
console.log(blockVar);     // Работает
console.log(functionVar);  // Работает
}

console.log(globalVar);    // Работает
console.log(outerVar);     // Работает
console.log(functionVar);  // Работает
console.log(blockVar);     // Ошибка!
}

outerFunction();
console.log(globalVar);    // Работает
console.log(outerVar);     // Ошибка!
console.log(functionVar);  // Ошибка!
console.log(blockVar);     // Ошибка!

Этот пример похож на большое семейное торжество. globalVar - это дедушка или бабушка, которых знают все. outerVar - это родитель, известный в семье outerFunction. blockVar - это стеснительный cousin, который появляется только в одной комнате (блок if). functionVar, объявленный с помощью var, - это大声рый дядя, которого слышат все в функции.

Теперь давайте подведем итог различных типов объявлений переменных и их областей действия в удобной таблице:

Объявление	Область действия	Подъем	Можно ли перезаписать
var	Функциональная	Да	Да
let	Блочная	Нет	Да
const	Блочная	Нет	Нет

Помните, что var - это старомодный cool kid, который может быть немного непредсказуемым. let и const - это новые дети в округе, которые играют по более строгим правилам.

Понимание области действия переменных至关重要 в JavaScript. Это помогает вам писать чище и более эффективный код и избегать надоедливых ошибок. Всегда помните, чтобы объявлять свои переменные в соответствующей области действия и быть внимательным к тому, где вы пытаетесь к ним получить доступ.

Заканчивая наш урок, представьте свой код как хорошо организованный город. Глобальные переменные - это общественные парки, которые могут посещать все. Функциональные области действия - это здания с разными этажами (блоками), каждый из которых имеет свои комнаты (локальные области действия). Содержа свои переменные в их правильных "дома", вы создадите гармоничное и хорошо функционирующее JavaScript город!

Продолжайте практиковаться, и вскоре вы станете мастером области действия переменных. До下一次 встречи, счастливого кодирования!

Credits: Image by storyset