Кіраўніцтва па пераменнай JavaScript з уздымам з let and const

Новым распрацоўшчыкам JavaScript часта цяжка зразумець унікальнае паводзіны зменнай функцыі / функцыі.

Паколькі мы будзем казаць аб var, pust і const дэкларацыях пазней, важна разумець зменныя пад'ёмнікі, а не функцыянаванне пад'ёмнікаў. Давайце занурымся!

Што такое пераменная ўздым?

Рухавік JavaScript разглядае ўсе дэкларацыі зменных, выкарыстоўваючы "var", як быццам яны аб'яўлены ў верхняй частцы функцыянальнай сферы (калі аб'яўлена ў межах функцыі) або глабальнай вобласці (калі аб'яўляецца па-за функцыяй), незалежна ад таго, дзе адбываецца фактычнае аб'яўленне. Па сутнасці, гэта "ўздым".

Такім чынам, зменныя могуць быць даступныя перад іх дэклараваннем.

Давайце паглядзім гэта ў дзеянні.

// Выхад: нявызначаны
console.log (форма);
var shape = "квадрат";
// Выхад: "квадрат"
console.log (форма);

Калі вы прыязджаеце з моў на базе С, вы чакаеце, што будзе выдадзена памылка, калі будзе выкліканы першы console.log, паколькі зменная форма ў той момант не была вызначана. Але перакладчык JavaScript глядзіць наперад і "паднімае" ўсе дэкларацыі зменных даверху, і ініцыялізацыя застаецца на тым самым месцы.

Вось што адбываецца за кадрам:

// Дэкларацыя, узнятая ўгары
вар форма;
// Выхад: нявызначаны
console.log (форма);
shape = "квадрат";
// Выхад: "квадрат"
console.log (форма);

Вось яшчэ адзін прыклад у функцыянальнай сферы, каб зрабіць усё больш зразумелым:

функцыя getShape (умова) {
    // форма існуе тут са значэннем нявызначанага
    // Выхад: нявызначаны
    console.log (форма);
    калі (умова) {
        var shape = "квадрат";
        // нейкі іншы код
        вярнуць форму;
    } яшчэ {
        // форма існуе тут са значэннем нявызначанага
        вярнуць ілжывае;
    }
}

У прыведзеным вышэй прыкладзе вы можаце бачыць, як дэкларацыя формы ўздымаецца ўверсе функцыі getShape (). Гэта таму, што калі блокі / else не ствараюць лакальную вобласць, як гэта бачна на іншых мовах. Лакальны аб'ём - гэта, па сутнасці, сфера функцыянавання ў JavaScript. Такім чынам, форма даступная ўсюды за межамі блока if і ў межах функцыі са значэннем 'undefined'.

Такое паводзіны JavaScript па змаўчанні мае добрую долю пераваг і недахопаў. Не поўнае разуменне іх можа прывесці да няўлоўных, але небяспечных памылак у нашым кодзе.

Увядзіце дэкларацыі на ўзроўні блокаў!

ES6 прадставіў варыянты ацэнкі ўзроўню блокаў, каб даць распрацоўшчыкам больш кантролю і гнуткасці на працягу жыццёвага цыкла зменнай.

Аб'явы на ўзроўні блокаў вырабляюцца ў блок-лексічных абласцях, якія ствараюцца ў блоку "{}".

няхай Дэкларацыі

Гэты сінтаксіс падобны на var, проста замяніце var на, каб дазволіць аб'яўляць зменную.

Размесціце свае дэкларацыі ў пункце ўверсе, каб яны былі даступныя ў гэтым блоку.

Напрыклад:

функцыя getShape (умова) {
// формы тут не існуе
// console.log (форма); => ReferenceError: форма не вызначана
калі (умова) {
        хай shape = "квадрат";
        // нейкі іншы код
        вярнуць форму;
    } яшчэ {
        // форма таксама не існуе тут
        вярнуць ілжывае;
    }
}

Звярніце ўвагу на тое, як форма існуе толькі ўнутры блока if, і выдае памылку пры звароце па-за ёй, а не выводзіць нявызначаны, як у папярэднім выпадку з аб'явамі var.

УВАГА: Калі ідэнтыфікатар ужо вызначаны ў межах вобласці з var, выкарыстанне гэтага ж ідэнтыфікатара ў дэкларацыі няхай у тым самым абшары выдае памылку.
Акрамя таго, не выдаецца памылка, калі аб'ява няхай стварае зменную з такой жа назвай, як і зменную ў знешняй вобласці. (Гэты выпадак супадае з дэкларацыямі const, пра якія мы хутка пагаворым.)

Напрыклад:

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

хай shape = "прастакутнік";
// SyntaxError: «Форма» ідэнтыфікатара ўжо заяўлена

і:

var shape = "квадрат";
калі (умова) {
    // не кідае памылку
    хай shape = "прастакутнік";
    // Дадатковы код
}
// Адсутнасць памылкі

Дэкларацыі const

Сінтаксіс дэкларацыі падобны на let & var, жыццёвы цыкл супадае з дазволам. Але вы павінны прытрымлівацца некаторых правілаў.

Звязкі, абвешчаныя з дапамогай const, трактуюцца як канстанты, і таму яны не могуць быць прызначаныя паўторна, калі яны будуць вызначаны. З-за гэтага ў момант дэкларавання павінна быць ініцыялізавана кожная дэкларацыя const.

Напрыклад:

// сапраўдны
const shape = "трохкутнік";
// Памылка сінтаксісу: адсутнічае ініцыялізацыя
колер const;
// TypeError: Прызначэнне пастаяннай зменнай
shape = "квадрат"

Аднак уласцівасці аб'екта можна змяніць!

const форма = {
    назва: "трохкутнік",
    бакі: 3
}
// ПРАЦЫ
shape.name = "квадрат";
shape.sides = 4;
// SyntaxError: Несапраўдны ініцыялізатар уласцівасцей стэнаграфіі
форма = {
    назва: "шасцікутнік",
    бакоў: 6
}

У прыведзеным вышэй прыкладзе мы бачым, што толькі ўласцівасці аб'екта фігуры могуць быць зменены, таму што мы мяняем толькі тую форму, якая змяшчаецца, а не тое, да чаго яна прывязана.

Мы можам абагульніць, сказаўшы, што const перашкаджае мадыфікацыі прывязкі ў цэлым - а не значэнні, да якога ён прывязаны.

Заўвага: Уласцівасці могуць быць адключаны. Такім чынам, для сапраўднай нязменнасці выкарыстоўвайце Immutable.js або Mori.

Часовая мёртвая зона

Цяпер мы ведаем, што доступ да зменных let or const да іх абвяшчэння прывядзе да ReferenceError. Гэты перыяд паміж уступленнем у сферу дзеяння і абвяшчэннем там, дзе ім немагчыма атрымаць доступ, называецца часовай мёртвай зонай.

Звярніце ўвагу, што "часовая мёртвая зона" афіцыйна не згадваецца ў спецыфікацыі ECMAScript. Гэта проста папулярны тэрмін сярод праграмістаў.

Я асабіста рэкамендую заўсёды выкарыстоўваць const, бо гэта прыводзіць да менш памылак. Мне яшчэ даводзіцца сутыкацца з сітуацыяй, калі мне трэба было выкарыстоўваць var.

Як правіла, выкарыстоўвайце "хай" толькі для лічыльнікаў цыклаў альбо толькі ў тым выпадку, калі вам сапраўды патрэбна перапрызначэнне. Усюды выкарыстоўвайце const. Асабіста я стварыў завесы для filter (), map () і скарачэння (). Вы таксама павінны.

Не забудзьцеся азнаёміцца ​​з часткай 2 для гэтага ў раздзеле функцый і важных пытаннях інтэрв'ю, звязаных з тэмай ўздыму ў СП.

Націсніце тут для майго артыкула пра некаторыя карысныя новыя функцыі ў ES6, звязаныя з функцыямі.

Убачымся ў наступны раз. Мір! ️️