Ръководство за променлива JavaScript, повдигаща се let с let и const

Новите разработчици на JavaScript често имат трудности да разберат уникалното поведение на повдигащите променливи / функции.

Тъй като по-късно ще говорим за декларации var, нека и const, е важно да разберем променливо повдигане, а не да повдига функцията. Нека се гмуркаме!

Какво е променливо повдигане?

JavaScript двигателят третира всички променливи декларации, като използва „var“, сякаш те са декларирани в горната част на функционален обхват (ако е деклариран вътре във функция) или глобален обхват (ако е деклариран извън функция), независимо от това къде се случва действителната декларация. Това по същество е "повдигане".

Така че променливите всъщност могат да бъдат налични преди декларирането им.

Нека го видим в действие ..

// ИЗХОД: неопределен
console.log (форма);
var oblik = "квадрат";
// ИЗХОД: "квадрат"
console.log (форма);

Ако идвате от езици, базирани на C, очаквате да бъде изхвърлена грешка при извикване на първия console.log, тъй като променливата форма не е била дефинирана в този момент. Интерпретаторът на JavaScript гледа напред и „вдига“ всички декларации с променлива към върха и инициализацията остава на същото място.

Ето какво се случва зад кулисите:

// декларация за повдигане в горната част
вар форма;
// ИЗХОД: неопределен
console.log (форма);
форма = "квадрат";
// ИЗХОД: "квадрат"
console.log (форма);

Ето още един пример този път във функционален обхват, за да направим нещата по-ясни:

функция getShape (условие) {
    // формата съществува тук със стойност неопределена
    // ИЗХОД: неопределен
    console.log (форма);
    ако (условие) {
        var oblik = "квадрат";
        // някакъв друг код
        обратна форма;
    } else {
        // формата съществува тук със стойност неопределена
        върнете невярно;
    }
}

В горния пример можете да видите как декларацията на формата се повдига в горната част на функцията getShape (). Това е така, защото ако / else блоковете не създават локален обхват, както се вижда на други езици. Локалният обхват по същество е обхват на функцията в JavaScript. Следователно формата е достъпна навсякъде извън блока if и във функцията със стойност „неопределена“.

Това поведение по подразбиране на JavaScript има своя справедлив дял от предимства и недостатъци. Неразбирането им напълно може да доведе до фини, но опасни грешки в нашия код.

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

ES6 въведе опции за обхват на ниво блок, за да осигури на разработчиците повече контрол и гъвкавост през жизнения цикъл на променливата.

Декларациите на ниво блок се правят в блокови / лексикални области, които се създават в блок „{}”.

нека Декларации

Този синтаксис е подобен на var, просто заменете var с нека да декларира променлива, като нейният обхват е само този код код.

Поставете декларациите си за пускане на върха в блок, така че да бъдат достъпни в рамките на целия блок.

Например:

функция getShape (условие) {
// форма не съществува тук
// console.log (форма); => ReferenceError: формата не е дефинирана
ако (условие) {
        нека форма = "квадрат";
        // някакъв друг код
        обратна форма;
    } else {
        // формата също не съществува тук
        върнете невярно;
    }
}

Забележете как формата съществува само вътре в блока if и хвърля грешка при достъп извън нея, вместо да извежда неопределена като предишния ни случай с var декларации.

ЗАБЕЛЕЖКА: Ако идентификатор вече е дефиниран в обхвата с var, използването на същия този идентификатор в декларация let в същия обхват хвърля грешка.
Също така не се допуска грешка, ако декларацията за пускане създава променлива със същото име като тази на променлива във външния й обхват. (Този случай е същият с декларациите за const, за които ще говорим скоро.)

Например:

var oblik = "квадрат";

нека shape = "правоъгълник";
// SyntaxError: Идентификаторът „форма“ вече е деклариран

и:

var oblik = "квадрат";
ако (условие) {
    // не хвърля грешка
    нека shape = "правоъгълник";
    // още код
}
// Без грешка

const Декларации

Синтаксисът на декларация е подобен на let & var, жизненият цикъл е същият като let. Но трябва да спазвате някои правила.

Връзките, декларирани чрез const, се третират като константи и следователно те не могат да бъдат преназначени като веднъж дефинирани стойности. Поради това всяка декларация const трябва да се инициализира в момента на деклариране.

Например:

// валиден
const shape = "триъгълник";
// синтактична грешка: липсва инициализация
цвят цвят;
// TypeError: Присвояване на постоянна променлива
shape = "квадрат"

Свойствата на обекта обаче могат да бъдат променени!

const форма = {
    име: "триъгълник",
    страни: 3
}
// ВЪРШИ РАБОТА
shape.name = "квадрат";
shape.sides = 4;
// SyntaxError: Невалиден инициализатор на стенограмата
форма = {
    име: "шестоъгълник",
    страни: 6
}

В горния пример можем да видим, че само свойствата на обекта на формата могат да се променят, защото ние променяме само това, което съдържа формата, а не това, което е свързано.

Можем да обобщим, като кажем, че const предотвратява промяна на обвързването като цяло - а не стойността, към която е обвързан.

Забележка: Свойствата могат да бъдат мутирани. Така че за истинска неизменност използвайте Immutable.js или Mori.

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

Вече знаем, че достъпът до променливи let или const преди декларирането им ще доведе до ReferenceError. Този период между влизането в обхвата и обявяването там, където не могат да бъдат достъпни, се нарича Временна мъртва зона.

Обърнете внимание, че „Темпоралната мъртва зона“ не е официално спомената в спецификацията на ECMAScript. Това е просто популярен термин сред програмистите.

Аз лично препоръчвам винаги да използвате const, тъй като това води до по-малко грешки. Тепърва ще се сблъсквам със ситуация, в която трябваше да използвам var.

Като общо правило, използвайте let само за контурни броячи или само ако наистина се нуждаете от преназначаване. Навсякъде другаде използвайте const. Лично аз извадих контури за филтър (), карта () и намаляване (). Вие също трябва.

Не забравяйте да разгледате част 2 за това във функцията повдигане и важни въпроси за интервю, свързани с темата за повдигане в JS.

Кликнете тук за моята статия за някои от полезните нови функции в ES6, свързани с функциите.

Ще се видим следващия път. Мир! ️️