Love Frontend
Статья опубликована: 08.04.2018

JavaScript var window global object

Многие начинающие JavaScript разработчики задаются вопросом, что такое window, почему я иногда могу обращаться к своей переменной myVar через window.myVar, а иногда без window. Почему я могу повесить setInterval так: window.setInterval() и без window: setInterval(). Что же за волшебный объект window?

В большинстве случаев, на ваш вопрос можно ответить коротко: когда вы декларируете переменную через var не внутри функции, то она присваевается глобальному объекту, которым в браузере как раз и является объект window. В Node.js глобальным объектом является — global.


  // Переменная доступна как go или window.go,
  // потому что она находится в глобальной
  // области видимости
  var go = 'good'

  // В данном случае вы сможете обратиться
  // к переменной только внутри самой функции
  // потому что go находится внутри области
  // видимости функции. window.go не сработает
  function () {
    var go = 'inner'
  }

Это происходит из-за механизма работы области видимости функций в JS.

window var и let в ES6

Однако, это ещё не всё. Следует так же помнить о ключевом слове let, доступном начиная с ES6. let позволяет декларировать переменную на уровне блоков { }, а не только функций. То есть переменная объявленная в цикле или в условном блоке через let не попадёт в глобальную область видимости, как это было бы в ES5.


  // Переменная go не доступна вне блока
  // и следовательно не доступна как window.go
  // Но если мы заменим слово let на var, то
  // она уже станет глобальной
  if (condition) {
    let go = 'Сработало'
  }

Чтобы полностью понять вышесказанное, советую в браузерной консоли разработчика сначала присвоить переменной с любым именем какой-либо текс через var внутри фигурных скобок, а затем сделать то же самое через let и вызовите обе переменные по очереди через ту же консоль.

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


  // Если вы забудете указать слово let или var,
  // то переменная автоматически станет глобальной.
  go = 'плохо'

Хорошей практикой является использование в ваших проектах линтеров для предотвращения таких ошибок. Подробнее о eslint. Обзор самых популярных наборов правил для линтования JavaScript.