Руководство по переменным подъемам JavaScript? с пусть и const

Автор оригинала: FreeCodeCamp Community Member.

Бхуван Малик

Новые разработчики JavaScript часто имеют трудное время, понимая уникальное поведение переменной/функции Подъем Отказ

Так как мы будем говорить о var , Пусть и Const Декларации позже, важно понимать Переменная подтяжка а не Функциональный подъемник Отказ Давайте погрузиться в!

Что такое вариабельный подъемник?

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

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

Давайте посмотрим в действии ..

// OUTPUT : undefinedconsole.log(shape);

var shape = "square";

// OUTPUT : "square"console.log(shape);

Если вы идете с языков на основе C, вы ожидаете, что ошибка будет брошена, когда первая console.log называется с момента переменной Форма не был определен в этот момент. Но интерпретатор JavaScript выглядит вперед и «поднимает» все переменные объявления к вершине, и инициализация остается в том же месте.

Вот что происходит за кулисами:

//declaration getting hoisted at the topvar shape;

// OUTPUT : undefinedconsole.log(shape);

shape = "square";

// OUTPUT : "square"console.log(shape);

Вот еще один пример на этот раз в функциональном объеме, чтобы сделать все более понятно:

function getShape(condition) {    // shape exists here with a value of undefined

    // OUTPUT : undefined    console.log(shape);

    if (condition) {        var shape = "square";        // some other code        return shape;    } else {        // shape exists here with a value of undefined        return false;    }}

Вы можете увидеть в приведенном выше примере, как Форма Декларация поднимается на вершине getshape () функция. Это потому, что если/else Blocks не создают локальный объем, как видно на других языках. Локальный объем – это по сути функциональный объем в JavaScript. Поэтому форма доступна повсюду за пределами Если Блок и внутри функции с ‘ undefined ‘ значение.

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

Введите объявления уровня блока!

ES6 ввел параметры на уровне блока, чтобы обеспечить разработчикам больше контроля и гибкости по жизненному цикле переменной.

Декларации уровня блока выполнены в блоках/лексических областях, которые создаются внутри блока «{}».

Пусть декларации

Этот синтаксис похож на var просто замените var с Пусть объявить переменную со своей областью, являющейся только этим блоком кода.

Поместите свой Пусть Декларации в верхней части в блоке, поэтому они будут доступны в течение всего этого блока.

Например:

function getShape(condition) {// shape doesn't exist here

// console.log(shape); => ReferenceError: shape is not defined

if (condition) {        let shape = "square";        // some other code        return shape;    } else {        // shape doesn't exist here as well        return false;    }}

Обратите внимание, как существует форма только внутри Если Блок и бросает ошибку при доступе к ней вместо вывода undefined Как наш предыдущий случай с var Декларации.

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

Например:

var shape = "square";let shape = "rectangle";

// SyntaxError: Identifier 'shape' has already been declared

а также:

var shape = "square";if (condition) {    // doesn't throw an error    let shape = "rectangle";    // more code }// No error

Const Декларации

Синтаксис декларации похож на Пусть & var , жизненный цикл такой же, как Пусть Отказ Но вы должны следовать некоторым правилам.

Привязки объявлены с использованием Const рассматриваются как Константы и Поэтому Они не могут быть переназначены значениями, однажды определенные Отказ Благодаря этому, каждый Const Декларация должен быть инициализирован во время декларации.

Например:

// valid const shape = "triangle";

// syntax error: missing initializationconst color;

// TypeError: Assignment to constant variableshape = "square"

Однако Свойства объекта могут быть изменены!

const shape = {    name: "triangle",    sides: 3}

// WORKSshape.name = "square";shape.sides = 4;

// SyntaxError: Invalid shorthand property initializershape = {    name: "hexagon",    sides: 6}

В приведенном выше примере мы видим, что только свойства Форма объект может быть изменен, потому что мы меняем только что Форма Содержит, не то, что это связано.

Мы можем обобщить, говоря, что Const Предотвращает модификацию связывания в целом – не значение того, что он обязан.

Примечание. Свойства могут быть мутированы. Так что для истинной неподумности используйте Immutable.js или Mori.

Временная мертвая зона

Теперь мы знаем, что доступ к Пусть или Const Переменные, прежде чем они объявлены, будут бросать Собственный ресурс Отказ Этот период между входом в объем и объявлен, где их можно получить доступ, называется временной мертвой зоной.

Обратите внимание, что «временная мертвая зона» не упоминается в спецификации Ecmascript. Это просто популярный термин среди программистов.

Я лично рекомендую вам всегда использовать Const , как это приводит к меньшему количеству ошибок. Я еще не сталкивался с ситуацией, когда мне нужно было использовать var Отказ

Как правило, используйте Пусть только для счетчиков петлей или только если вам действительно нужно переназначение. Везде еще использовать Const Отказ Лично я бросил петли для фильтра (), карты () и уменьшения (). Вы тоже должны.

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

Функция Подъемные и подъемные Вопросы Вопросы Это часть 2 для моей предыдущей статьи о переменных подъемных под названием «Руководство по подъему переменной JavaScript? С … M Edium.freecodeCamp.org

Нажмите здесь Для моей статьи о некоторых из полезных новых функций в ES6 связаны с функциями.

Увидимся в следующий раз. Мир! ✌️️.