В этой шпаргалке рассмотрены области видимости переменных и функций на одном большом примере. Для чего нужны области видимости? Ответ очень прост. Чтобы использовать одно и то же имя переменной (функции) дважды (порой даже одновременно) с разными значениям. Когда такое может потребоваться? При одновременном создании одного проекта несколькими программистами. Каждый из них может использовать одни и те же переменные, не беспокоясь, что их коллеги воспользуются ими тоже и, тем самым, заменят ее значение на новое. Какая самая популярная переменная? Переменная «i». Она уже более 25 лет на рынке счетчиков. Теперь представьте себе ситуацию, что такого понятия, как «область видимости» нет вовсе. Получается, что каждому программисту придется выделять личную переменную для счетчиков цикла. Одному «a», другому «b», и так далее. Это очень неудобно! Для решения этой проблемы и были придуманы области видимости.

Если бы мне было тебя видно...

Все переменные в JavaScript по-умолчанию являются глобальными. Локальными они становятся только при использовании ключевого слова «var» при их объявлении. Если переменная объявлена (первый раз использована) внутри функции без этого ключевого слова, то она тоже является глобальной. Пример ниже все разъяснит:

var global = 'this is global';
function scopeFunction() {
    alsoGlobal = 'This is also global!';
    var notGlobal = 'This is private to scopeFunction!';
    function subFunction() {
        alert(notGlobal); // Мы можем получить доступ к notGlobal в дочерней функции.
        stillGlobal = 'No var keyword so this is global!';
        var isPrivate = 'This is private to subFunction!';
    }
    alert(stillGlobal); // Ошибка, так как мы еще не вызывали функцию subFunction
    subFunction(); // Вызов функции subFunction
    alert(stillGlobal); // На экран будет выведено 'No var keyword so this is global!'
    alert(isPrivate); // Ошибка, так как переменная приватная
    alert(global); // На экран будет выведено 'this is global'
}
alert(global); // На экран будет выведено 'this is global'
alert(alsoGlobal); // Ошибка, так как мы еще не вызывали функцию scopeFunction
scopeFunction();
alert(alsoGlobal); // На экран будет выведено 'This is also global!';
alert(notGlobal); // Ошибка, так как переменная приватная

Итог.

Грамотное использование областей видимости переменных и функций помогут упростить разработку и уменьшить количество ошибок. Возьмите себе за правило объявлять только приватные переменные (с использованием ключевого слова «var»). Такой стиль программирования избавит от мучительных поисков источника неисправностей (перезапись переменной в другом месте программы, удаление ее содержимого, повторная инициализация).