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 на Гитхаб.

Нулевой объединяющий оператор

Предложение: https://github.com/tc39/proposal-nullish-coalescing

Вавилон: 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; 

Обратите внимание, что этот оператор не проверяет, что var не существует. Это вызовет ошибку:

const val = maybeUndef ?? 2021;  

Но будьте осторожны, этот оператор не на 100% похож на тернарный оператор, который возвращает первую сторону, если оцениваемое условие истинно. Он не будет оценивать значения, которые обычно являются ложными в JavaScript, в false. Например, пустая строка не будет учитываться false:

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

В отличие от этого нулевого оператора объединения, тернарный оператор выдал бы fallbackрезультат этой оценки.

Необязательный оператор цепочки

Предложение: https://github.com/tc39/proposal-Optional-Chaining

Вавилон: 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

Вавилон: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Этот оператор является частью нескольких экспериментальных функций JavaScript, и он обеспечивает более удобочитаемость при объединении нескольких функций в цепочку. Рассмотрим следующую функцию:

Если нам нужно повторно использовать эти частичные преобразования, которые связаны друг с другом, мы можем разбить их на разные функции, а затем с их помощью составить результат:

Что странно, так это то, что мы должны начать читать это снизу, со splitBySpaceстроки, вверх, чтобы понять преобразования, применяемые к строке. Это противоречит нашему естественному потоку чтения сверху вниз. Мы также получаем все эти уродливые болтающиеся скобки. Это можно было бы написать в одну строку, и это не намного красивее:

Здесь мы должны начать чтение от центральной функции к внешним функциям или справа налево, что противоречит западному чтению слева направо.

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

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

Числовой разделитель

Предложение: https://github.com/tc39/proposal-numeric-separator

Вавилон: 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

Вавилон: 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.