JavaScript ES2020

ES2020 или ECMAScript 2020 привносят в JavaScript интересные функции. В этой статье я хочу рассказать о моих любимых функциях ES2020. Это означает, что статья охватывает не все дополнения. Итак, давайте посмотрим на мои любимые новинки:

• Динамический импорт
• Оператор нулевого слияния
• Необязательный оператор цепочки
• Переменные частного класса
• Promise.allSettled

Динамический импорт

Одним из дополнений является то, что мы можем динамически импортировать зависимости с помощью async / await. Это означает, что нам не нужно импортировать все раньше, и мы можем импортировать зависимости только тогда, когда они нам нужны. В результате производительность приложения улучшается за счет загрузки модулей во время выполнения.

Как это улучшает производительность? В обычной модульной системе мы импортируем модули статически в начале программы. Нужны ли они нам сейчас или позже, мы должны сначала их импортировать. Кроме того, весь код из импортированного модуля оценивается во время загрузки. Таким образом, это без надобности замедляет работу приложения. Зачем? Потому что он загружает импортированные модули и оценивает код каждого модуля перед выполнением вашего кода.

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

if (calculations) {
    const calculator = await import('./calculator.js');
    const result = calculator.add(num1, num2);

    console.log(result);
}

В приведенном выше фрагменте кода вы можете видеть, что мы импортируем модуль калькулятора только тогда, когда хотим выполнить вычисления. В результате мы не замедляем работу приложения без необходимости, загружая весь код до времени выполнения. Поэтому динамический импорт - удобное дополнение.

Оператор нулевого слияния

«Оператор объединения с нулевым значением (??) - это логический оператор, который возвращает его правый операнд, когда его левый операнд равен нулю или не определен, и в противном случае возвращает его левый операнд». Источник: MDN

По сути, Nullish Coalescing Operator позволяет нам проверить, является ли значение нулевым или неопределенным, и предоставить запасное значение, если это так. Давайте посмотрим на примере:

let score = 0;
let pass = score ?? 60;

console.log(pass);

В приведенном выше фрагменте кода значение pass равно 0. Причина в том, что оператор ?? Оператор не приводит ноль к ложному значению. Передаче переменной присваивается только 60, если оценка переменной не определена или равна нулю.

Однако в чем разница между двойными трубками «||» а этот оператор? При использовании двойных каналов «||» он всегда возвращает истинное значение, что может привести к неожиданным результатам. При использовании оператора объединения с нулевым значением мы можем быть более строгими и, таким образом, разрешить значение по умолчанию, только если значение равно нулю или неопределенному.

Например, допустим, у нас есть следующий код:

let score = 0;
let pass = score || 60;

console.log(pass);

В приведенном выше примере значение 0 рассматривается как ложное значение при использовании ||. В приведенном выше фрагменте кода значение pass равно 60, что нам не нужно. Следовательно, двойной вопросительный знак позволяет нам проверить, является ли переменная нулевой, что означает, что переменная либо неопределена, либо равна нулю.

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

«Более короткие и простые выражения при доступе к связанным свойствам, когда существует вероятность того, что ссылка может отсутствовать». Источник: MDN

Используя дополнительный оператор цепочки, мы можем получить доступ к глубоко вложенным свойствам из объекта. Если свойство существует, оператор возвращает его значение. Если свойство не существует, оператор возвращает значение undefined.

const person = {
 name: "Catalin Pit",
 employer: {
  name: "Catalins Tech",
 }
};

console.log(person?.employer?.name);

Приведенный выше фрагмент кода иллюстрирует пример доступа к свойствам глубоко вложенного объекта. Однако мы можем использовать его и для массивов, и для вызовов функций. Ниже, во фрагменте кода, вы можете видеть, что мы проверяем, существует ли массив, и если он существует, мы получаем доступ к третьему значению. Кроме того, вы можете увидеть, существует ли функция из API, и если да, она вызывает ее.

const allowedValues = [1, 5, 10, 13, 90, 111];
console.log(allowedValues?.[2]);

// functional call
const response = myAPI.getData?.();

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

Promise.AllSettled

Новый метод Promise.allSettled () ожидает выполнения всех обещаний. То есть он принимает массив обещаний и возвращается только тогда, когда обещания выполнены, либо отклонены, либо выполнены.

Когда эта функция возвращается, мы можем перебрать каждое обещание и посмотреть, было ли оно выполнено или отклонено и почему. Давайте посмотрим на пример этой функции в действии.

const promise1 = Promise.resolve(5);
const promise2 = Promise.reject("Reject promise");
const promises = [promise1, promise2];

Promise.allSettled(promises)
    .then(results => 
console.log(`Here are are your promises results`, results))
    .catch(err => console.log(`Catch ${err}`));

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

Переменные частного класса

С этого момента мы также можем создавать частные переменные в классах в JavaScript. Все, что вам нужно сделать, чтобы создать частную переменную, - это добавить символ решетки перед переменной. Например, #firstName - это закрытая переменная, к которой нельзя получить доступ вне класса.

Попытка вызвать переменную вне класса приводит к ошибке SyntaxError.

class Person {
  #firstName = "Catalin";
  getFirstName() 
  { 
      console.log(this.#firstName) 
   }
}

const person1 = new Person();
person1.getFirstName() // "Catalin"

console.log(person1.firstName); // Returns "undefined"
console.log(person1.#firstName); 

В приведенном выше коде вы можете увидеть в действии переменную частного класса. Пытаясь получить доступ к переменной firstName вне класса, мы получаем ошибку. Поэтому добавление удобно, когда мы не хотим предоставлять данные за пределами класса.

Вывод

Дополнения из статьи - не единственные. Их гораздо больше, и я рекомендую вам взглянуть на официальную спецификацию языка ECMAScript, чтобы увидеть их все. Кроме того, я рекомендую вам поиграть с функциями, чтобы прочувствовать их.

В заключение, в этой статье вы узнали о:

1. Динамический импорт
2. Оператор нулевого слияния
3. Необязательный оператор цепочки
4. Promise.allSettled
5. Переменные частного класса