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

Цель урока

В этом уроке ты научишься:

Понимать глобальную и локальную области видимости
Различать блочную область видимости
Понимать лексическое окружение

Глобальная область видимости

Переменные, объявленные вне функций, доступны везде:

let globalVar = "Я глобальная";

function showGlobal() {
  console.log(globalVar); // доступна
}

showGlobal(); // "Я глобальная"
console.log(globalVar); // "Я глобальная"

Избегай глобальных переменных

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

Локальная область видимости

Переменные внутри функции недоступны снаружи:

function sayHello() {
  let message = "Привет";
  console.log(message);
}

sayHello(); // "Привет"
// console.log(message); // Ошибка! message не определена

Блочная область видимости

let и const ограничены блоком {}:

if (true) {
  let blockVar = "Я в блоке";
  console.log(blockVar); // "Я в блоке"
}

// console.log(blockVar); // Ошибка!

var vs let

if (true) {
  var varVariable = "var";
  let letVariable = "let";
}

console.log(varVariable);  // "var" — доступна!
// console.log(letVariable); // Ошибка!

Используй let и const

var имеет функциональную область видимости и может привести к ошибкам.

Вложенные области

Внутренняя функция видит переменные внешней:

function outer() {
  let outerVar = "Внешняя";
  
  function inner() {
    let innerVar = "Внутренняя";
    console.log(outerVar); // доступна
    console.log(innerVar); // доступна
  }
  
  inner();
  // console.log(innerVar); // Ошибка!
}

outer();

Затенение переменных

Локальная переменная "затеняет" внешнюю с тем же именем:

let name = "Глобальное имя";

function showName() {
  let name = "Локальное имя";
  console.log(name); // "Локальное имя"
}

showName();
console.log(name); // "Глобальное имя"

Hoisting (поднятие)

var поднимается

console.log(x); // undefined (не ошибка!)
var x = 5;
console.log(x); // 5

// Интерпретируется как:
// var x;
// console.log(x);
// x = 5;

let и const — Temporal Dead Zone

// console.log(y); // Ошибка! TDZ
let y = 5;
console.log(y); // 5

Лексическое окружение

Функция запоминает переменные из места, где была создана:

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ", " + name + "!");
  };
}

const sayHello = createGreeter("Привет");
const sayBye = createGreeter("Пока");

sayHello("Иван"); // "Привет, Иван!"
sayBye("Мария");  // "Пока, Мария!"