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.