Традиционно, объявление переменных было одной из необычных особенностей JavaScript. В большинстве C-подобных языков, создание переменной происходит в том месте, где она объявлена. Однако, в JavaScript это не так. Где Ваши переменные будут созданы, зависит от того, как Вы их объявили, и ECMAScript 6 предлагает возможности, что бы сделать контроль области видимости проще. В этой статье показано, почему классический var может ввести в заблуждение, вводится понятие блочной видимости в ECMAScript 6, а также приведены некоторые практические советы.

Объявление var и подъем

Объявление переменных с использованием var обрабатывается также, как если бы они были объявлены в верхней части функции (или глобальной области видимости, если объявление происходит вне функции) независимо от того, где происходит фактическое объявление. Эта особенность называется подъем. Для демонстрации того, как подъем работает, рассмотрим следующее определение функции:

function getValue(condition) {
 
    if (condition) {
        var value = "blue";
 
        // другой код
 
        return value;
    } else {
 
        // переменная существует со значением undefined
 
        return null;
    }
 
        // переменная существует со значением undefined
}

Если Вы не знакомы с JavaScript, то могли бы ожидать, что переменная value будет создана, только если переменная condition примет значение true. На самом деле, переменная value будет создана в любом случае. За кулисами, движок JavaScript изменил функцию getValue, следующим образом:

function getValue(condition) {
 
    var value;
 
    if (condition) {
        value = "blue";
 
        // другой код
 
        return value;
    } else {
 
        return null;
    }
}

Объявление value поднимается наверх и происходит во время инициализации функции. Это означает, что переменная value по прежнему доступна внутри блока else. Так как переменная доступна в блоке else, то она будет иметь значение undefined, потому что она не была инициализирована.

Часто новичкам в JavaScript требуется некоторое время, чтобы привыкнуть к подъему объявления переменных, и непонимание этого уникального поведения может в итоге привести к ошибкам. По этой причине, ECMAScript 6 предлагает видимость уровня блока, чтобы сделать более удобным контроль жизненного цикла переменной.

Объявление уровня блока

Объявление уровня блока - это объявление переменной, которая недоступна за пределами области видимости блока. Объявление уровня блока создается: * внутри функции; * внутри блока (обозначенного символами { и })

Блочная область видимости работает во множестве C-подобных языков, и введение объявления уровня блока в ECMAScript 6 предназначено внести ту же гибкость (и единообразие) в JavaScript.

Объявление let

Синтаксис объявления let такой же, как и синтаксис var. Вы можете просто заменить var на let для объявления переменной, но ограничится и область видимости переменно текущим блоком кода (есть некоторые другие тонкости, которые обсудим позже). Поскольку let объявления не поднимаются наверх ограниченного блока, вы можете всегда размещать let объявления вначале блока, что бы они были доступны во всем блоке. Пример использования:

function getValue(condition) {
 
    if (condition) {
        let value = "blue";
 
        // другой код
 
        return value;
    } else {
 
        // value здесь не существует
 
        return null;
    }
 
    // value здесь не существует
}

Эта версия функции getValue ведет себя гораздо ближе к тому, как можно было ожидать этого в других C-подобных языках. Поскольку переменная value объявлена с помощью let вместо var, то объявление не поднимается наверх определения функции, а переменная value будет уничтожена, как только поток выполнения выйдет за пределы блока.