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

Мы используем переменные, чтобы хранить в них временные значения, а потом в нужный момент получать к ним доступ.

Но не все переменные в нашем коде одинаково доступны. Доступна ли переменная и как получить к ней доступ, определяют области видимости.

Область видимости — это часть программы, в которой мы можем обратиться к переменной, функции или объекту. Этой частью может быть функция, блок или вся программа в целом — то есть мы всегда находимся как минимум в одной области видимости.

Области видимости можно представить как коробки, в которые мы кладём переменные. Переменные, которые лежат в одной коробке, могут общаться друг с другом.

Переменные также могут получить доступ к переменным из коробки, в которую вложена их коробка.

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

Но прежде чем мы рассмотрим, как их использовать, разберёмся с тем, какие области видимости в JS вообще есть.

Глобальная область видимости — это самая внешняя коробка из всех. Когда мы «просто объявляем переменную», вне функций, вне модулей, то эта переменная попадает в глобальную область видимости.

        
          
          const a = 42
          const a = 42

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменная в примере сейчас находится в глобальной области видимости. Это значит, что она будет доступна откуда угодно внутри модуля:

        
          
          const a = 42console.log(a)// 42function wrap() {  const b = a  // Без проблем, переменная a доступна в этой функции}const c = {  d: a,  // Хорошо, переменная a доступна и здесь}function secondWrap() {  const e = {    f: a,    // И тут ок, переменная a всё ещё доступна  }}
          const a = 42
console.log(a)
// 42

function wrap() {
  const b = a
  // Без проблем, переменная a доступна в этой функции
}

const c = {
  d: a,
  // Хорошо, переменная a доступна и здесь
}

function secondWrap() {
  const e = {
    f: a,
    // И тут ок, переменная a всё ещё доступна
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменные в глобальной области видимости называются глобальными переменными и доступны всем.

Самый известный пример глобальной переменной — это console.

        
          
          console.log(console)// Console {debug: function, error: function,// log: function, info: function, warn: function, …}
          console.log(console)
// Console {debug: function, error: function,
// log: function, info: function, warn: function, …}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          console.log(console)// Console {debug: function, error: function,// log: function, info: function, warn: function, …}console.log(window.console)// Console {debug: function, error: function,// log: function, info: function, warn: function, …}// То же самое, потому что это один и тот же объект
          console.log(console)
// Console {debug: function, error: function,
// log: function, info: function, warn: function, …}

console.log(window.console)
// Console {debug: function, error: function,
// log: function, info: function, warn: function, …}
// То же самое, потому что это один и тот же объект

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Глобальный объект window — это объект, который даёт доступ к Web API браузера. window рекурсивно «содержит сам себя», потому что все глобальные объекты находятся в window:

        
          
          console.log(window)// Window {0: Window, ...}
          console.log(window)
// Window {0: Window, ...}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Мы также можем определить глобальные переменные сами. Например, если в консоли браузера мы создадим какую-то переменную, а потом попробуем получить к ней доступ через window:

Это сработает только с var, но не с let или const. Почему, мы узнаем чуть позже.

Блочная область видимости ограничена программным блоком, обозначенным при помощи { и }. Простейший пример такой области — это выражение внутри скобок:

        
          
          const a = 42console.log(a)// 42if (true) {  const b = 43  console.log(a)  // 42  console.log(b)  // 43}console.log(b)// ReferenceError: Can't find variable: b
          const a = 42
console.log(a)
// 42

if (true) {
  const b = 43
  console.log(a)
  // 42
  console.log(b)
  // 43
}

console.log(b)
// ReferenceError: Can't find variable: b

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменная b скрыта внутри области видимости блока внутри скобок и доступна только внутри этого блока, но не снаружи.

Скобки могут, однако, не только отделять тело условия. Ими можно обрамлять и другие части кода. Это, например, бывает очень полезно в сложных switch-конструкциях. Например:

        
          
          switch (animalType) {  case 'dog': {    const legs = 4    const species = 'mammal'    break  }  case 'fish': {    const legs = 0    const swims = true    break  }}
          switch (animalType) {
  case 'dog': {
    const legs = 4
    const species = 'mammal'
    break
  }

  case 'fish': {
    const legs = 0
    const swims = true
    break
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере выше в case нам надо выполнить несколько строчек. Удобно обернуть все операции в блок при помощи фигурных скобок — тогда все переменные и операции будут ограничены этим блоком, то есть блочной областью видимости.

Функциональная область видимости — это область видимости в пределах тела функции. Можно сказать, что она ограничена { и } функции.

        
          
          const a = 42function scoped() {  const b = 43}console.log(a)// 42console.log(b)// Reference error
          const a = 42

function scoped() {
  const b = 43
}

console.log(a)
// 42
console.log(b)
// Reference error

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

К переменной b есть доступ только внутри функции scoped.

Функциональная область видимости — очень мощный инструмент для разделения кода. Во-первых, используя её, мы можем не опасаться за «пересечение имён» переменных.

В одной области видимости объявить дважды let или const нельзя:

        
          
          const a = 42const a = 43// SyntaxError: Cannot declare a const variable twice: 'a'
          const a = 42
const a = 43
// SyntaxError: Cannot declare a const variable twice: 'a'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Но функции создают собственные области видимости, которые не пересекаются, поэтому в этом случае ошибки не будет:

        
          
          function scope1() {  const a = 42}function scope2() {  const a = 43}
          function scope1() {
  const a = 42
}

function scope2() {
  const a = 43
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Так как области видимости у функций не пересекаются и не связаны, первая функция не может обратиться к «внутренностям» соседней или вложенной функции, внутренности соседней функции скрыты в её области видимости и недоступны вне её:

        
          
          function scope1() {  const a = 42}function scope2() {  console.log(a)  // Reference error}
          function scope1() {
  const a = 42
}

function scope2() {
  console.log(a)
  // Reference error
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

То же и с дочерними областями:

        
          
          function outer() {  function inner() {    const a = 42  }  console.log(a)  // Reference error}
          function outer() {
  function inner() {
    const a = 42
  }

  console.log(a)
  // Reference error
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функциям доступны лишь переменные в её собственной области видимости (всё, что внутри её тела) и в родительских областях:

        
          
          function outer() {  const a = 42  function inner() {    console.log(a)    // 42  }}
          function outer() {
  const a = 42

  function inner() {
    console.log(a)
    // 42
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Здесь ошибки нет, потому что функции доступна своя область видимости, а также область видимости функции outer.

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

Заметим, что у функции inner никаких локальных переменных нет — она работает только с локальной переменной функции outer.

Такой особенный доступ к локальным переменным родительской функции часто называют лексической областью видимости.

Сокрытие «внутренностей» позволяет создавать независимые друг от друга блоки кода. Это, например, полезно, когда мы хотим запустить какой-то модуль в браузере с уверенностью, что он никак не повлияет на другой код.

Immediately Invoked Function Expression, IIFE — это функция, которая выполняется сразу же после того, как была определена.

Записывается IIFE так:

        
          
          (function foo() {  // ...Тело функции})()
          (function foo() {
  // ...Тело функции
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Здесь используется именованная функция, чтобы был читаемый stacktrace. Но допускается и использование анонимной.

Кроме того, можно добавить ; в начале функции:

        
          
          ;(function foo() {  // ...Тело функции})()
          ;(function foo() {
  // ...Тело функции
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Дело в том, что существующий механизм автоподстановки точек с запятой (ASI) срабатывает лишь в определённых случаях, в то время как строка, начинающаяся с (, не входит в перечень этих случаев. Поэтому опытные разработчики зачастую добавляют ; в тех случаях, когда их код может быть скопирован и добавлен в существующий.

Разберём по частям.

1. Сама функция внутри:

function foo() { ... }

Это обычная функция, которая описывается и ведёт себя по всем правилам функций в JS.

2. Скобки вокруг функции:

(function foo() { ... })

Скобки превращают функцию в выражение, которое можно вызвать. То есть если до этого шага мы функцию объявили, то на этом шаге мы приготовили её к мгновенному вызову.

3. Скобки вызова:

(function foo() { ... })()

Последняя пара скобок вызывает выражение, то есть вызывает функцию, которую мы создали на 1-м шаге и подготовили на 2-м.

Так как функция внутри скобок — это обычная функция, она точно так же создаёт внутри себя область видимости, доступ к которой есть только у неё. То есть всё, что внутри функции, остаётся внутри.

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

        
          
          ;(function module1() {  const a = 42  console.log(a)})();(function module2() {  const a = '43!'  alert(a)})()
          ;(function module1() {
  const a = 42
  console.log(a)
})()
;(function module2() {
  const a = '43!'
  alert(a)
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Никаких конфликтов имён!

Как мы видели выше, у дочерней функции есть доступ к области видимости родительской функции:

        
          
          function outer() {  let a = 42  function inner() {    console.log(a)  }  inner()}outer()// 42
          function outer() {
  let a = 42

  function inner() {
    console.log(a)
  }

  inner()
}

outer()
// 42

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Всё так же у функции inner локальных переменных нет, она лишь использует локальные переменные родительской функции outer. И всё так же у кода снаружи outer нет никакого доступа к её внутренностям.

Но что, если мы вернём из функции outer функцию inner?

        
          
          function outer() {  let a = 42  function inner() {    console.log(a)  }  return inner}
          function outer() {
  let a = 42

  function inner() {
    console.log(a)
  }

  return inner
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Теперь мы можем не просто вызывать функцию outer, но и присвоить результат вызова какой-то переменной:

        
          
          const accessToInner = outer()accessToInner()// 42
          const accessToInner = outer()

accessToInner()
// 42

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Теперь в переменной accessToInner находится функция inner, у которой всё ещё есть доступ к локальной переменной a функции outer!

То есть мы смогли «обойти» область видимости? Не совсем.

Мы действительно получили доступ к переменной a через функцию inner, но только в том виде и с такими ограничениями, которые описаны при создании функции inner.

У нас всё ещё нет прямого доступа к переменной a. Мы, например, не можем её поменять — только вывести в консоль.

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

Допустим, мы хотим сделать счётчик, который можно увеличивать и уменьшать только на единицу:

        
          
          function counter() {  // Начальное значение счётчика будет 0.  // Мы используем let, потому что будем менять значение,  // const не подойдёт  let state = 0  // Функция increase будет увеличивать счётчик на единицу  function increase() {    state++  }  // Функция decrease будет уменьшать счётчик на единицу  function decrease() {    state--  }  // Функция valueOf будет выводить значение.  function valueOf() {    console.log(state)  }  // А наружу мы дадим только лишь доступ к этим функциям.  // Вернём объект, значениями полей которого будут функции  // increase и decrease  //  // Прямого доступа к переменной state всё ещё нет,  // но внешний код может изменять её состояние опосредованно —  // через функции increase и decrease  return {    increase,    decrease,    valueOf,  }}const ticktock = counter()ticktock.increase()ticktock.valueOf()// 1ticktock.increase()ticktock.valueOf()// 2ticktock.decrease()ticktock.valueOf()// 1
          function counter() {
  // Начальное значение счётчика будет 0.
  // Мы используем let, потому что будем менять значение,
  // const не подойдёт
  let state = 0

  // Функция increase будет увеличивать счётчик на единицу
  function increase() {
    state++
  }

  // Функция decrease будет уменьшать счётчик на единицу
  function decrease() {
    state--
  }

  // Функция valueOf будет выводить значение.
  function valueOf() {
    console.log(state)
  }

  // А наружу мы дадим только лишь доступ к этим функциям.
  // Вернём объект, значениями полей которого будут функции
  // increase и decrease
  //
  // Прямого доступа к переменной state всё ещё нет,
  // но внешний код может изменять её состояние опосредованно —
  // через функции increase и decrease
  return {
    increase,
    decrease,
    valueOf,
  }
}

const ticktock = counter()
ticktock.increase()
ticktock.valueOf()
// 1
ticktock.increase()
ticktock.valueOf()
// 2
ticktock.decrease()
ticktock.valueOf()
// 1

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Такое контролируемое сокрытие доступа с помощью области видимости называется замыканием.

Замыкания удобны тем, что каждый новый вызов создаёт отдельную область, в которой значения абсолютно независимы друг от друга:

        
          
          const tick1 = counter()const tick2 = counter()tick1.valueOf()// 0tick2.valueOf()// 0tick1.increase()tick1.valueOf()// 1tick2.valueOf()// 0tick1.increase()tick1.valueOf()// 2tick2.valueOf()// 0tick2.increase()tick1.valueOf()// 2tick2.valueOf()// 1tick2.decrease()tick1.valueOf()// 2tick2.valueOf()// 0
          const tick1 = counter()
const tick2 = counter()

tick1.valueOf()
// 0
tick2.valueOf()
// 0

tick1.increase()
tick1.valueOf()
// 1
tick2.valueOf()
// 0

tick1.increase()
tick1.valueOf()
// 2
tick2.valueOf()
// 0

tick2.increase()
tick1.valueOf()
// 2
tick2.valueOf()
// 1

tick2.decrease()
tick1.valueOf()
// 2
tick2.valueOf()
// 0

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Состояния обоих счётчиков друг от друга не зависят, хотя они создаются одной и той же функцией.

Выше, когда мы экспериментировали с window и глобальными переменными, мы обговорили, что запись:

        
          
          var hi = 'Hello world!'console.log(window.hi)// Hello world!
          var hi = 'Hello world!'
console.log(window.hi)
// Hello world!

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

…сработает только с var, но не с let или const. Дело здесь в «поднятии» переменных (hoisting).

Для начала посмотрим на такой код:

        
          
          function scope() {  a = 42  var b = 43}scope()console.log(a)// 42console.log(b)// Reference error
          function scope() {
  a = 42
  var b = 43
}

scope()

console.log(a)
// 42
console.log(b)
// Reference error

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Что произошло?

Чтобы понять, почему доступ к переменной a не вызывал ошибки, разберёмся, как работает var и объявление переменных.

Так как переменная a не была объявлена, то JavaScript сам решил, где объявлять переменную, и «поднял» объявление наверх. Получился вот такой код:

        
          
          var afunction scope() {  a = 42  var b = 43}scope()console.log(a)// 42
          var a

function scope() {
  a = 42
  var b = 43
}

scope()
console.log(a)
// 42

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Более того, переменные «поднимаются» и внутри блоков и функций:

        
          
          console.log(hello)// undefinedvar hello = 'Hello'console.log(hello)// Hello
          console.log(hello)
// undefined

var hello = 'Hello'
console.log(hello)
// Hello

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Потому что на самом деле код превращается вот в это:

        
          
          var helloconsole.log(hello)// undefinedhello = 'Hello'console.log(hello)// Hello
          var hello
console.log(hello)
// undefined

hello = 'Hello'
console.log(hello)
// Hello

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В браузере глобальные переменные находятся в области window, поэтому трюк с window.hi сработал — JS «поднял» переменную до глобальной области, а мы потом установили ей значение.

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

        
          
          a = 42function shouldNotAffectOuterScopeButDoes() {  a = 43  console.log(a)  // 43}shouldNotAffectOuterScopeButDoes()console.log(a)// 43 (хотя должно было быть 42)
          a = 42

function shouldNotAffectOuterScopeButDoes() {
  a = 43
  console.log(a)
  // 43
}

shouldNotAffectOuterScopeButDoes()

console.log(a)
// 43 (хотя должно было быть 42)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Первым оружием против этой проблемы стал строгий режим.

Он запрещает объявлять переменные без var, что не позволит случайно перезаписать необъявленную переменную или переменную из внешней области.

Но механизм «поднятия» даже внутри блока достаточно непредсказуемый. Идеально было бы, если бы переменные объявлялись и инициализировались там, где это указано в коде.

И именно это делают let и const. Они никогда не выходят из области видимости, где были определены и всегда инициализируются там, где указано.

С var сработает:

        
          
          console.log(hello)// undefinedvar hello = 'Hello'
          console.log(hello)
// undefined
var hello = 'Hello'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С let и const — нет:

        
          
          console.log(hello)// Reference errorlet hello = 'Hello'console.log(bye)// Reference errorconst bye = 'Bye'
          console.log(hello)
// Reference error
let hello = 'Hello'

console.log(bye)
// Reference error
const bye = 'Bye'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          function someReducer(state, action) {  switch (action.type) {    case 'add': {      const users = [...state.users, action.user]      return {...state, users}    }    case 'remove': {      const users = state.users.filter(user => user.id !== action.user.id)      return {...state, users}    }  }}
          function someReducer(state, action) {
  switch (action.type) {
    case 'add': {
      const users = [...state.users, action.user]
      return {...state, users}
    }
    case 'remove': {
      const users = state.users.filter(user => user.id !== action.user.id)
      return {...state, users}
    }
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          ;(async () => {  const result = await someAsyncFunction()})()
          ;(async () => {
  const result = await someAsyncFunction()
})()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          function counter() {  let state = 0  function increase() {    state++  }  function decrease() {    state--  }  function valueOf() {    console.log(state)  }  return {    increase,    decrease,    valueOf,  }}const ticktock = counter()ticktock.increase()ticktock.valueOf()// 1ticktock.decrease()ticktock.valueOf()// 0
          function counter() {
  let state = 0

  function increase() {
    state++
  }

  function decrease() {
    state--
  }

  function valueOf() {
    console.log(state)
  }

  return {
    increase,
    decrease,
    valueOf,
  }
}

const ticktock = counter()

ticktock.increase()
ticktock.valueOf()
// 1

ticktock.decrease()
ticktock.valueOf()
// 0

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          (function () {    // какие-то действия})();
          (function () {
    // какие-то действия
})();

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          (function () {    let name = "Дока Дог";    console.log(name);})();(function () {    let name = "Гав-Гав";    alert(name);})();// Никаких конфликтов
          (function () {
    let name = "Дока Дог";
    console.log(name);
})();

(function () {
    let name = "Гав-Гав";
    alert(name);
})();

// Никаких конфликтов


        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          let result = (function () {    let name = "Дока Дог";    return name;})();console.log(result); //Дока Дог
          let result = (function () {
    let name = "Дока Дог";
    return name;
})();

console.log(result); //Дока Дог

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          function(){}();
          function(){}();

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать