0Pricing
JavaScript Academy · Урок

Области видимости блока, функции и модуля и TDZ

Разберитесь в области видимости блока, функции и модуля; увидьте TDZ в действии и избегайте утечки переменных.

«Области видимости блока, функции и модуля и TDZ» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Введение

Цель: Понять, где находятся переменные и когда ими можно пользоваться.

  • Блочная область видимости (let/const)
  • Область видимости функции (var)
  • Область видимости модуля
  • Безопасность TDZ
Области видимости блока, функции и модуля и TDZ — иллюстрация 1

Демонстрация блочной области видимости

Блочная область видимости оставляет переменные локальными для пары фигурных скобок.

// Block scope: let/const exist only inside the braces
let lives = 3;

if (true) {
  const bonus = 5;
  let level = 1;
  console.log("Inside block:", bonus, level);
}

console.log("Lives:", lives);
// Uncommenting next line would fail (not in scope):
// console.log(bonus, level);
Области видимости блока, функции и модуля и TDZ — иллюстрация 2

Область видимости функции с var

var имеет область видимости функции, а не блока. В современном JS предпочитайте let/const.

// Function scope: var is visible across the whole function
function demo() {
  if (true) {
    var x = 10; // function-scoped
  }
  console.log("x is visible here:", x); // 10
}
demo();
Области видимости блока, функции и модуля и TDZ — иллюстрация 3

Основы области видимости модуля

Область видимости модуля: привязки верхнего уровня являются локальными для файла (модули ES).

// Module scope: top-level variables are local to the module file
const appName = "CoddyKit";
console.log("App name:", appName);

// In a real project, this would be its own file/module.
// Other files must import to access appName.
Области видимости блока, функции и модуля и TDZ — иллюстрация 4

Временная мёртвая зона

TDZ предотвращает случайное чтение переменных до объявления. Сначала объявляйте, затем используйте.

// TDZ: using let/const before declaration throws ReferenceError
try {
  // Uncommenting would trigger TDZ:
  // console.log(mode); // ReferenceError
  let mode = "dark";
  console.log("Mode after declare:", mode);
} catch (e) {
  console.log("Caught:", e.message);
}
Области видимости блока, функции и модуля и TDZ — иллюстрация 5

Проблемы с областью видимости

Проблемы:

  • Не смешивайте var с let/const в одной области видимости.
  • Объявляйте переменные рядом с местом использования.
  • Избегайте чтения значений до строки объявления (TDZ).
Области видимости блока, функции и модуля и TDZ — иллюстрация 6

Проверка TDZ

Быстрая проверка: поведение TDZ.

Области видимости блока, функции и модуля и TDZ — иллюстрация 7

Повторение

Повторение: let/const имеют блочную область видимости; var — область видимости функции; у модулей есть собственная область видимости файла; TDZ останавливает ранний доступ.

Области видимости блока, функции и модуля и TDZ — иллюстрация 8

Часто задаваемые вопросы

Урок «Области видимости блока, функции и модуля и TDZ» бесплатный?

Да — полный текст урока «Области видимости блока, функции и модуля и TDZ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Области видимости блока, функции и модуля и TDZ»?

Разберитесь в области видимости блока, функции и модуля; увидьте TDZ в действии и избегайте утечки переменных. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

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

Сколько времени занимает урок «Области видимости блока, функции и модуля и TDZ»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. let, const и отказ от var
  2. Области видимости блока, функции и модуля и TDZ
  3. Именование, читаемость и распространённые ошибки
← Назад к JavaScript Academy