Новое и полезное в Javascript 2024

6 августа 2024 0 Romo Fedoroff

Введение

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

Основные изменения в ECMA Script 2024

1. Top-level await

Одно из самых ожидаемых изменений - это введение top-level await. Теперь можно использовать await без необходимости оборачивать его в асинхронную функцию. Это значительно упрощает работу с асинхронными операциями, делая код более чистым и понятным.

Пример использования:

const res = await fetch('https://tune-it.ru/api/hello-world-api');
const json = await res.json();

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

async function init() {
    const res = await fetch('https://tune-it.ru/api/hello-world-api');
    const json = await res.json();
}

Теперь же всё стало проще и удобнее.

2. Pipeline операторы

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

Пример использования:

const num = 10
    |> double
    |> (n) => Math.max(5, n)
    |> (n) => (n * n)/2;

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

3. groupBy

Функция groupBy позволяет группировать данные по определённым признакам, что ранее требовало написания дополнительных функций и логики. Теперь это можно сделать просто и быстро, используя метод класса Map.

Пример использования:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const res = Map.groupBy(arr, n => n % 2 === 0 ? 'even' : 'odd');
console.log(res);  // Map { 'odd' => [1, 3, 5, 7, 9], 'even' => [2, 4, 6, 8, 10] }

Этот метод значительно упрощает процесс группировки данных.

4. Promise with Resolvers

Нововведение Promise with Resolvers позволяет создавать и управлять промисами вне их контекста, что упрощает работу с асинхронными функциями, особенно если они имеют сложную логику.

Пример использования:

Давайте представим, что мы хотим с вами написать свою собственную асинхронную функцию чтения файла. А у нас есть только синхронная, которая принимает путь к файлу и принимает какой то callback, который будет вызван после чтения. Оборачиваем ее в Promise, чтобы добиться асинхронности.

const fs = require(‘fs’);

const readFileAsync = (path) => {
return new Promise((resolve, reject) => {
fs.readFile(path, (err,data) => {
if(err) { reject (err);} else {resolve(data);}
});
});
}

Это простой пример. Однако представьте, что у нас имеется много логики, и сложно сходу определить, где именно будет reject, а где resolve или например у нас функция, которая вообще не работала с Promise, и нам необходимо эту функцию переписать, чтобы она стала использовать Promise. Это создает определенные сложности: нам придется все оборачивать в Promise, смотреть, чтобы мы нигде ничего не упустили, чтобы не было лишнего return, чтобы reject, resolve были вызваны именно там, где они должны быть вызваны и тд.

Promise with resolvers позволяет все это упростить.

Давайте перепишем эту функцию с новым синтаксисом.

const readFileAsync = (path) => {
    const { promise, resolve, reject } = Promise.withResolver();
    fs.readFile(path, (err, data) => {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
    return promise;
}

Теперь мы можем просто читать данные из нашего файла, и если произошла ошибка чтения, мы вызываем reject. Если файл успешно прочитался, то вызываем resolve с информацией из этого файла. И в конце, конечно же, возвращаем Promise для того, чтобы функция могла бы использоваться с then.

И так, это нововведение делает работу с промисами более гибкой и удобной.

5. Mutable data

Последнее изменение касается неизменяемых данных (Mutable data). Теперь можно создавать объекты и массивы, которые не могут быть изменены после их создания. Это достигается с помощью специального синтаксиса, который предотвращает изменения исходных данных.

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

Пример использования:

const userProfile = #{
    name: "Romo",
    age: 35
};

Обратите внимание на решетку # перед определением объекта. Если она стоит, это значит что теперь этот объект нельзя изменить. Если мы попробуем его изменить, то создастся новый объект, но оригинальный объект не поменяется.

const newProfile = userProfile.with({
    name: "Victor",
});

Для массивов это работает аналогичным образом:

const arr = #[1, 2, 3, 4];
const newArr = arr.with({ 0: 5 });

Заключение

ECMA Script 2024 принесет множество полезных нововведений, которые упростят разработку и сделают код более понятным и удобным. Top-level await, pipeline операторы, groupBy, Promise with Resolvers и неизменяемые данные - все эти изменения будут активно использоваться разработчиками и внесут значительный вклад в развитие JavaScript. Надеемся, что данная статья помогла вам ознакомиться с новыми возможностями языка и дала некоторый стимул применять их в будущем в своих проектах.

Новое и полезное в Javascript 2024 - Блог