JavaScript ES2020: что нового?

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

Приватные переменные класса

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

Решить эту проблему помогают приватные переменные класса. Такая переменная резервирует свойства и методы для использования только внутри класса. Символ решетки перед свойством и методом определяет переменную как приватную.

class Message {
#message = "Howdy";
greet() {
console.log(this.#message);
};
};
const greeting = new Message()
greeting.greet() // Howdy
console.log(greeting.#message) // #message is not defined

Обратите внимание: вызов метода greet вне класса возвращает значение; вызов console.log для приватного свойства возвращает ошибку.

Метод Promise.allSettled()

Когда вы работаете с несколькими промисами – особенно если они зависят друг от друга, – вы можете регистрировать каждый процесс для дальнейшей отладки.

С помощью Promise.allSettled() вы можете создать новый промис, который возвращается, когда промисы, переданные в качестве аргументов, разрешились:

const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));
Promise.allSettled([p1, p2]).then(data => console.log(data));

Это выведет массив объектов с состоянием и значением для каждого промиса:

[
Object { status: "fulfilled", value: undefined},
Object { status: "rejected", reason: undefined}
]

В данном примере метод Promise.allSettled() предоставляет массив с состоянием и значением промисов p1 и p2.

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

JavaScript – это язык со слабой типизацией, а потому при присваивании переменных важно помнить о truthy и falsy значениях – то есть о «примерно истинных» и «примерно ложных» значениях. Если у вас есть объект с данными, вы можете разрешить falsy значения, такие как пустая строка или 0.

Оператор нулевого слияния (??) определяет и возвращает примерно ложные значения, когда левый операнд не равен null или undefined.

let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

Обратите внимание, что оператор OR (||), напротив, возвращает правый операнд, если левый является ложным.

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

А оператор нулевого слияния возвращает ложные значения, поскольку ни свойство name, ни age не равны null или undefined.

Оператор опциональной последовательности

Еще один способ взаимодействия с falsy значениями – использование оператора опциональной последовательности (?.). Он предоставит способ доступа к неопределенным свойствам внутри объектов, если ссылка нулевая.

let person = {};
console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
console.log(person?.profile?.name ?? "Anonymous"); // no error
console.log(person?.profile?.age ?? 18); // no error

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

Встроенный объект BigInt

Наибольшее число, которое может обработать JavaScript, составляет 2^53, в чем можно убедиться с помощью свойства MAX_SAFE_INTEGER.

const max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991

Любое число выше значения переменной max считается ненадежным:

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

С помощью встроенного объекта BigInt в вычислениях появляется возможность добавить n в конец каждого большого целого числа. Числа BigInt могут вычисляться только с другими числами BigInt.

const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2n); // 200000000000000000000000000000n

Значение BigInt для bigNum умножается на 2n, что в результате дает 200000000000000000000000000000n.

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

Предположим, у вас есть файл служебных функций; вы не используете их все, а импорт их зависимостей может быть пустой тратой ресурсов. Теперь async/await умеет импортировать нужные зависимости в нужные места.

Читайте также: Функции async/await в JavaScript

Давайте посмотрим на пример служебной функции в файле math.js:

const add = (num1, num2) => num1 + num2;
export { add };

Допустим, у нас также есть файл index.js, использующий предыдущую служебную функцию:

const doMath = async (num1, num2) => {
if (num1 && num2) {
const math = await import('./math.js');
console.log(math.add(5, 10));
};
};
doMath(4, 2);

Выражение await в index.js может обрабатывать импорт из файла math.js и использовать логику, содержащуюся в этом файле.

Заключение

С каждым обновлением в JavaScript появляется все больше динамических функций и определенных свойств» кроме того, повышается его производительность – если верить отзывам разработчиков и сообщества.

Tags:

Добавить комментарий