Область видимости

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Всё, что объявлено на верхнем уровне скрипта — вне функций и вне фигурных скобок, — попадает в глобальную область видимости. Такую переменную видно из любой точки программы: из функции, из цикла, из функции внутри функции.

js

const site = "java-script.pro";
function greet() {
  console.log("Привет, " + site);
}
greet();

Сначала предположите, что выведет код

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

Функция — непрозрачная коробка. Всё, что объявлено внутри неё, включая параметры, снаружи не существует. Не «равно undefined», а именно не существует: обращение к такому имени даёт ReferenceError.

js

function makeTotal() {
  let total = 10;
  return total;
}
console.log(makeTotal());
try { console.log(total); } catch (e) { console.log(e.name); }

Сначала предположите, что выведет код

В этом — вторая польза функций после переиспользования кода. Временные переменные не засоряют программу и не сталкиваются именами с чужими: внутри makeTotal можно завести total, даже если такое имя уже занято в соседней функции.

Блок — это пара фигурных скобок: тело if, тело цикла или просто { } сами по себе. Переменные, которые мы заводили в статье «Переменные: let, const и почему не var», внутри блока живут только до закрывающей скобки. А вот var блока не замечает — она принадлежит всей функции целиком.

js

if (true) {
  let blockOnly = "живу только в блоке";
  var leaked = "утекла из блока";
  console.log(blockOnly);
}
console.log(leaked);

Сначала предположите, что выведет код

Попытка обратиться к blockOnly после закрывающей скобки закончится ошибкой. Особенно наглядно это в цикле: счётчик, объявленный через let, исчезает вместе с циклом и не мешает коду ниже.

js

for (let i = 0; i < 3; i += 1) {
  console.log(i);
}
try { console.log(i); } catch (e) { console.log(e.name); }

Сначала предположите, что выведет код

Функции можно вкладывать друг в друга, и области видимости вкладываются вместе с ними, как матрёшки. Встретив имя, движок ищет его в текущей области; не нашёл — поднимается на уровень наружу; и так до глобальной. Эта лестница и называется цепочкой областей видимости.

js

const a = "глобальная";
function outer() {
  const b = "внешняя";
  function inner() {
    console.log(a, b);
  }
  inner();
}
outer();

Сначала предположите, что выведет код

Направление поиска всегда одно — наружу. Изнутри окно наружу есть, снаружи внутрь — нет: outer не увидит переменные, объявленные в inner. А если имя не нашлось нигде, включая глобальную область, программа падает с ReferenceError.

Цепочка складывается в тот момент, когда вы пишете функцию, а не когда вызываете её. Функция всегда смотрит наружу от того места, где объявлена, — и никакой вызов этого не изменит. На этом держатся замыкания: им посвящена статья «Замыкания: как функция помнит своё окружение».

js

const who = "место объявления";
function say() {
  console.log(who);
}
function run() {
  const who = "место вызова";
  say();
}
run();

Сначала предположите, что выведет код

Что если внутреннее имя совпадёт с внешним? Ничего страшного: поиск останавливается на первом совпадении, то есть на ближайшем. Внутренняя переменная затеняет внешнюю — та никуда не девается, просто на время недоступна под этим именем.

js

let greeting = "снаружи";
function show() {
  let greeting = "внутри";
  console.log(greeting);
}
show();
console.log(greeting);

Сначала предположите, что выведет код

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

js

const price = 100;
function withDiscount(price) {
  return price - 10;
}
console.log(withDiscount(50));
console.log(price);

Сначала предположите, что выведет код

Всё, что мы видели про var, сводится к одному: она игнорирует блоки. Объявленная в if или в цикле, она принадлежит всей функции — и переживает блок, в котором родилась, вместе со своим последним значением.

js

for (var i = 0; i < 3; i += 1) {
  var last = i;
}
console.log(i, last);

Сначала предположите, что выведет код

Второе отличие — момент рождения. var создаётся в самом начале работы функции со значением undefined, поэтому обращение «до объявления» молча вернёт undefined. С let и const то же обращение сразу даёт ошибку — и это подарок: она показывает опечатку в ту же секунду, а не через час отладки.

js

function check() {
  console.log(step);
  var step = 1;
  console.log(step);
}
check();

Сначала предположите, что выведет код

Переменная let существует с начала блока, но до строки объявления её нельзя ни читать, ни записывать. Этот отрезок называют временной мёртвой зоной (TDZ), и живёт в ней только ошибка. Откуда она берётся и чем отличается от тихого undefined у var, разбирает следующая статья — «Всплытие и временная мёртвая зона».

js

try {
  console.log(mood);
  let mood = "спокойное";
} catch (e) {
  console.log(e.name);
}

Сначала предположите, что выведет код

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

Область видимости — это участок кода, из которого переменная доступна: глобальная, функциональная и блочная.
Функция и блок видят наружу, но не внутрь: снаружи локальные переменные не существуют, обращение к ним даёт ReferenceError.
Поиск имени идёт по цепочке областей от ближайшей к глобальной и останавливается на первом совпадении.
Совпадение имён не ошибка: внутренняя переменная затеняет внешнюю, оставляя её значение нетронутым.
var игнорирует блоки и молча возвращает undefined до объявления; let и const ограничены блоком и падают с понятной ошибкой — поэтому по умолчанию используют их.

1/3Что выведет последняя строка? let n = 1; function f() { let n = 2; } f(); console.log(n);

2/3Переменная объявлена через var внутри блока if. Откуда она видна?

3/3Функция обращается к имени, которого нет ни внутри неё, ни в областях снаружи. Что произойдёт?

Спрячьте переменную внутри функции

Токен не должен быть доступен никому, кроме функции auth. Сейчас он лежит в глобальной области, и последняя строка спокойно его печатает. Перепишите код так, чтобы внутри функции всё работало, а снаружи обращение к token давало ReferenceError.

js

let token = "abc";
function auth() {
  console.log(token); // abc
}
auth();
console.log(token); // abc — а этого быть не должно

Сначала предположите, что выведет код

Достаточно перенести объявление внутрь функции: тогда token живёт в её области видимости и снаружи такого имени просто нет.

jsлистинг · не запускается

function auth() {
  const token = "abc";
  console.log(token); // abc
}
auth();
try { console.log(token); } catch (e) { console.log(e.name); } // ReferenceError

function auth() {
  const token = "abc";
  console.log(token); // abc
}
auth();
try { console.log(token); } catch (e) { console.log(e.name); } // ReferenceError

Это общее правило: если значение нужно одной функции — объявляйте его там же. Глобальная область не хранилище, а витрина.

Предскажите вывод

Три объявления с одним именем на трёх уровнях вложенности. Не запуская код, скажите, что напечатают три вызова console.log — и объясните, почему именно так.

js

let v = "A";
function demo() {
  let v = "B";
  if (true) { let v = "C"; console.log(v); } // ?
  console.log(v); // ?
}
demo();
console.log(v); // ?

Сначала предположите, что выведет код

Вывод: C, затем B, затем A.

Каждый console.log берёт ближайшую переменную v из своей области видимости. Внутри блока if ближайшая — та, что объявлена в этом блоке (C). После закрывающей скобки блочная переменная умирает, и видна переменная функции (B). После вызова demo остаётся только глобальная (A) — затенение её не изменило, а лишь временно перекрыло.

Область видимости

Видеоразбор темы за 5–7 минут

Глобальная областьпеременные, которые видит вся программа

Функциональная областьфункция как непрозрачная коробка

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

Цепочка областей видимостипоиск переменной идёт наружу

Затенение переменныхвнутреннее имя перекрывает внешнее

Почему блочная область безопаснееvar подводит там, где let выручает

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Спрячьте переменную внутри функции

Предскажите вывод