5 передових функцій JavaScript для покращення коду

Функції JavaScript постійно зростають і отримують нові, такі як оператори, синтаксичні конструкції, вирази. Багато з них були введені в останні роки, і деякі з них уже є другою натурою, як-от вираз жирної стрілки або оператор =>розповсюдження об’єкта ....

Функції JavaScript починаються як пропозиції

Усі ці функції JavaScript починаються як пропозиції, подані до TC 39. Технічний комітет 39 відповідає за стандартизацію:

універсальна кросплатформна мова програмування ECMAScript (JavaScript) незалежно від виробника. Це включає синтаксис мови, семантику, бібліотеки та додаткові технології, які підтримують мову.

Є багато пропозицій щодо JavaScript, які ми можемо почати додавати до нашого потоку сьогодні завдяки Babel, компілятору JavaScript. Деякі з них забезпечують більшу ясність, як-от цифровий роздільник. Інші, як і doвирази, вводять можливість мати складні умови, змішані з тегами React JSX.

Давайте розглянемо в цій статті 5 функцій JavaScript, які все ще знаходяться на стадії пропозиції, але які ми можемо використовувати з Babel і значно покращать ваш досвід кодування.

Кожен із них має посилання на свою сторінку Babel, де ви можете побачити, як налаштувати Babel для його використання, хоча запропоновані функції JavaScript, описані тут, уже включено до Babel 7. Кожен розділ також має посилання на свою пропозицію в організації Ecma TC39 на GitHub.

Нульовий оператор об’єднання

Пропозиція: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Ця пропозиція JavaScript описує оператор, який дозволяє надавати резервне значення в правій частині оператора, коли змінна або властивість об’єкта не визначені. Якщо він не невизначений, він використовуватиме ліву частину оператора:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Це схоже на запис у вигляді тернарного оператора:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Зверніть увагу, що цей оператор не перевіряє, що змінна не існує. Це викличе помилку:

const val = maybeUndef ?? 2021;  

Але будьте обережні, цей оператор не на 100% схожий на потрійний оператор, який повертає першу сторону, якщо оцінена умова істинна. Він не оцінюватиме значення, які зазвичай є помилковими в JavaScript, у false. Наприклад, порожній рядок не розглядатиметься false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

На відміну від цього нульового оператора об’єднання, потрійний оператор був би викинутий fallbackу результаті цієї оцінки.

Додатковий оператор ланцюжка

Пропозиція: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Цей оператор також працює зі змінними та властивостями об’єктів: він перевіряє, чи існують вкладені властивості, які ми обходимо, чи ні. Без цього оператора ми маємо перевіряти кожну вкладену властивість:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

За допомогою нового необов’язкового оператора ланцюжка ми можемо зробити щось на кшталт:

const val = anObj.aProp?.aNestedProp

Це виглядає набагато зрозуміліше і коротше писати. Цей оператор також працює з числовими масивами, тому добре працювати з колекціями:

const val = anObj.anArray[0]?.someProp

І ми можемо складати кілька операторів:

const val = anObj.anArray[0]?.someProp?.aNestedProp

А що, якщо ми об’єднаємо це з попереднім, нульовим об’єднанням? Ми отримуємо синтаксис, який перевіряє, чи існує кожна обстежена властивість, і якщо її немає, надає резервне значення:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Якщо якесь із значень не існує, воно поверне someDefaultValue. Поєднання цих двох операторів є чудовим способом замінити функцію get lodash .

Оператор трубопроводу

Пропозиція: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Цей оператор є частиною кількох експериментальних функцій JavaScript, і він забезпечує більшу читабельність під час об’єднання кількох функцій разом. Розглянемо таку функцію:

Якщо нам потрібно повторно використовувати ці часткові перетворення, які об’єднані разом, ми можемо розбити їх на різні функції, а потім скласти результат, використовуючи їх:

Що дивно в цьому, так це те, що ми повинні почати читати це знизу, splitBySpaceрядка, до верху, щоб зрозуміти перетворення, застосовані до рядка. Це суперечить нашому природному потоку читання зверху вниз. У підсумку ми також маємо всі ці потворні висячі дужки. Це можна було б написати одним рядком, і це не набагато красивіше:

Тут ми маємо почати читати від центральної функції до зовнішніх функцій або справа наліво, що суперечить інтуїції для західного читання зліва направо.

Оператор конвеєра може зробити ці конструкції більш зрозумілими та подібними до ланцюжків, які ми спочатку мали перед переміщенням перетворень до окремих функцій:

Тепер застосовані перетворення записуються подібно до нашого способу написання, зверху вниз, вони більш зрозумілі для читання, і ми не маємо круглих дужок. Успіх!

Числовий роздільник

Пропозиція: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Цей числовий роздільник відрізняється від інших функцій JavaScript, оскільки він не є оператором. Це синтаксична конструкція, яка робить числові літерали більш читабельними, створюючи візуальне розділення між групами цифр. Великі числові літерали важко розібрати та швидко зрозуміти, особливо коли цифра повторюється кілька разів. Наприклад:

const longNum = 1000000000000;

Це важко зрозуміти з швидкого погляду. Цей роздільник робить його більш читабельним:

const longNum = 1_000_000_000_000;

Тепер ми можемо швидко зрозуміти, що це трильйон.

Робіть вирази

Пропозиція: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

Останньою з нових функцій JavaScript, яку ми розглянемо, є вираз, який можна обчислити. Результат цього виразу виходить після виконання блоку, який може містити кілька операторів. Ми можемо легко зрозуміти вирази do, якщо перекладемо вираз тернарного оператора, як цей:

const res = isCold( color )? 'light-blue': 'orange';

Ми запишемо еквівалентний do{}вираз так:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Зауважте, що нам не потрібно повертати значення, оскільки це не функція. Хоча в цьому конкретному випадку це можна записати стисло як трійковий, вирази do набагато потужніші, дозволяючи кілька операторів, наприклад:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Де це дійсно потужно, так це в JSX, де ми можемо змішувати його з його тегами без необхідності попереднього зовнішнього обчислення результату. Наприклад, ми могли б зробити наступне, якщо б використовували React для відтворення цих компонентів:

Більше пропозицій JavaScript

Щодня обговорюється все більше пропозицій щодо додавання більш цікавих функцій до мови JavaScript. Постійно зростаючий список цих запропонованих функцій JavaScript можна прочитати на https://github.com/tc39/proposals#ecmascript-proposals. Пропозиції, наведені тут, близькі до завершення і, отже, близькі до додавання до стандарту ECMAScript, як пояснюється в цій таблиці, яка описує процес прийняття.

Деякі з нових функцій JavaScript, які ми досліджували в цій статті, як-от вирази do або оператор конвеєра, є пропозиціями етапу 1, що означає, що їм ще потрібно пройти шлях, перш ніж стати частиною стандарту ECMAScript.