Отправляясь в захватывающую одиссею: раскрываем новейшие достижения в эволюции JavaScript после ECMA 2018!

Добро пожаловать обратно в наше увлекательное путешествие по постоянно развивающемуся миру JavaScript, где инновации не знают границ. Если вы следили за моими предыдущими главами, вы уже хорошо знакомы с блестящей историей JavaScript, от его первых дней до преобразующего скачка ECMAScript 2016 в 2018. Теперь пришло время приступить к следующему этапу нашего приключение, еще глубже погружаясь в захватывающее царство ECMAScript, изучая годы с 2019 по 2023 год.

🔍Двигаясь вперед, мы не просто наблюдаем за развитием JavaScript; мы являемся активными участниками динамичного повествования, которое продолжает менять ландшафт веб-разработки. От перекрестка ES5 до революционного ES6 и далее, JavaScript находился на неустанном пути самосовершенствования, предоставляя разработчикам возможность создавать более захватывающий пользовательский опыт и динамичные цифровые среды.

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

🔮 Присоединяйтесь к нам, и мы отправимся в следующую главу нашей одиссеи, где взаимодействие прошлого и настоящего продолжает формировать будущее цифровых инноваций. Наше путешествие выводит нас за пределы основ, заложенных ES6, и горизонт пылает обещаниями постоянно развивающегося великолепия JavaScript! 🚀✨

Пройдя период с 2019 по 2023 год, мы воочию станем свидетелями того, как этот эволюционный подход продолжает формировать ландшафт JavaScript.

ECMAScript 2019

Основные особенности:

1. Необязательная привязка Catch: эта функция позволяет опустить привязку параметра предложения catch. Это повышает читаемость кода и снижает вероятность непреднамеренного затенения переменных.
2. Object.fromEntries(): введен метод Object.fromEntries(), который позволяет преобразовывать пары ключ-значение в объект. Это особенно полезно при работе с данными в виде массивов или других итерируемых структур.
3. Array.prototype.{ Flat, FlatMap}(): эти методы упрощают манипулирование вложенными массивами. flat() выравнивает вложенные массивы до заданной глубины, а flatMap() сначала отображает, а затем создает новый массив, выравнивая массив.

Преимущества:

• Дополнительная привязка Catch повышает ясность кода, давая понять, что ожидается ошибка, но объект ошибки не требуется для дальнейшей обработки.
• Object.fromEntries()упрощает преобразование данных между форматами, уменьшая необходимость в подробном коде.
• Array.prototype.{flat, flatMap}()оптимизируйте обработку сложных массивов, упрощая работу с глубоко вложенными структурами данных.

// Optional Catch Binding
try {
  // Some code that may throw an error
} catch {
  // Handle the error without specifying a parameter
}
// Object.fromEntries()
const keyValuePairs = [['key1', 'value1'], ['key2', 'value2']];
const obj = Object.fromEntries(keyValuePairs); // Output: { key1: 'value1', key2: 'value2' }
// Array flat() method
let array = [1, 2, [3, 4]];
console.log(array.flat()); // Output: [1, 2, 3, 4]

// Array flatMap() method
let numbers = [1, 2, 3, 4];
console.log(numbers.flatMap(x => [x, x*2])); // Output: [1, 2, 2, 4, 3, 6, 4, 8]

Сравнение:

ECMAScript 2019 (ES10) опирается на основу, заложенную его предшественниками, включая ECMAScript 2015 (ES6). В нем представлены такие функции, как необязательная привязка Catch, Object.fromEntries() и улучшенные методы массива, которые делают код более читабельным и эффективным. Эти дополнения позволяют разработчикам писать более лаконичный и выразительный код JavaScript, сохраняя при этом обратную совместимость.

ECMAScript 2020

Основные особенности:

1. Нулевой оператор объединения (??): Нулевой оператор объединения улучшает назначение переменных, предоставляя значение по умолчанию только в том случае, если переменная имеет значение NULL или неопределена, что повышает ясность и безопасность кода.
2. Необязательное связывание (?.): Оператор необязательного связывания упрощает работу со свойствами вложенных объектов, позволяя разработчикам безопасно получать доступ к свойствам или методам, которые могут не существовать, не вызывая ошибок.
3. Динамический импорт. Динамический импорт позволяет загружать модули во время выполнения, улучшая разделение кода и уменьшая первоначальный размер пакета в веб-приложениях.
4. Promise.allSettled() собирает результаты нескольких обещаний, включая как выполненные, так и отклоненные, предоставляя комплексное представление об их выполнении.

Преимущества:

1. Нулевой оператор объединения (??): он упрощает присвоение значений по умолчанию и помогает избежать неожиданного поведения с ложными значениями.
2. Необязательное связывание (?.): оно делает код более кратким и уменьшает необходимость в подробных проверках на значение null/undef.
3. Динамический импорт: повышает производительность и эффективность загрузки веб-приложений.
4. Promise.allSettled(): Обеспечивает комплексное представление результатов выполнения нескольких обещаний, позволяя обрабатывать как выполненные, так и отклоненные обещания без досрочного отклонения, что делает его подходящим для сценариев, в которых вам необходимо обработать все обещания и собрать информацию об их успехе или неудаче.

// Nullish Coalescing Operator
let someValue = null;
const defaultValue = someValue ?? 'Default';
// Optional Chaining
const nestedObject = { data: { value: 42 } };
const result = nestedObject.data?.value; // Output: 42
// Dynamic Import
const module = await import('./module.js');
// Promise.allSettled()
const prom1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 1000);
});

const prom2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Promise 2 rejected'), 500);
});

const prom3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 3 resolved'), 1500);
});

Promise.allSettled([prom1, prom2, prom3])
  .then((results) => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index + 1}: ${result.value}`);
      } else {
        console.error(`Promise ${index + 1} failed with reason: ${result.reason}`);
      }
    });
  })
  .catch((error) => {
    console.error('An error occurred while handling settled promises:', error);
  });

// Output
Promise 1: Promise 1 resolved
Promise 2 failed with reason: Promise 2 rejected
Promise 3: Promise 3 resolved

Сравнение:

В ECMAScript 2020 (ES11) представлены такие важные функции, как нулевой оператор объединения, необязательная цепочка, динамический импорт и многие другие. Эти дополнения направлены на улучшение читаемости кода, безопасности и производительности.

ECMAScript 2021

Основные особенности:

1. Promise.any(): метод Promise.any() используется для ожидания выполнения первого решенного обещания из итерации обещаний. Он возвращает обещание, которое разрешается со значением первого выполненного обещания.
2. String replaceAll(): метод replaceAll() — это строковый метод, который заменяет все вхождения указанной подстроки или шаблона регулярного выражения другой подстрокой.
3. Числовые разделители (_). Числовые разделители позволяют использовать символы подчеркивания (_) внутри числовых литералов, что делает большие числа более читабельными за счет разделения их на группы.

Преимущества:

1. Promise.any(): упрощает обработку нескольких обещаний и позволяет реагировать на первое выполненное обещание, улучшая организацию асинхронного кода.
2. String replaceAll(): обеспечивает удобный способ замены всех вхождений подстроки или шаблона в строке, улучшая манипуляции со строками.
3. Числовые разделители (_). Числовые разделители улучшают читаемость кода при работе с большими числами, разбивая их на управляемые группы.

// Promise Any
const first = await Promise.any([prom1, prom2, prom3]);
// String replaceAll()
const originalString = 'Hello, world! Hello, universe!';
const newString = originalString.replaceAll('Hello', 'Hi');
// Numeric Separators (_)
const billion = 1_000_000_000;
const largeNumber = 123_456_789;

Сравнение:

В ECMAScript 2021 (ES12) представлены такие ценные функции, как Promise.any(), String replaceAll() и числовые разделители. Эти дополнения направлены на упрощение асинхронной обработки кода, улучшение манипуляций со строками и улучшение читаемости кода при работе с большими числовыми значениями.

ECMAScript 2022

Основные особенности:

1. Array at(): метод Array.prototype.at() позволяет получить доступ к элементу по определенному индексу в массиве. Он упрощает поиск элементов и корректно обрабатывает отрицательные индексы.
2. String at(): метод String.prototype.at() обеспечивает доступ к символам строки по определенному индексу. Это похоже на индексацию массива для строк.
3. Флаг RegExp /d. Флаг /d для регулярных выражений вводит новое поведение, при котором он соответствует только именованным группам захвата. Это улучшает обработку регулярных выражений и упрощает извлечение определенных данных из строк.
4. Object.hasOwn(): метод Object.hasOwn() предоставляет простой способ проверить, имеет ли объект определенное свойство, которым он непосредственно владеет (а не унаследовано от его прототипа).
5. error.cause: Свойство error.cause используется для доступа к причине ошибки, что может быть полезно для более информативной диагностики и обработки ошибок.
6. await import: оператор await import позволяет асинхронно импортировать модули, улучшая разделение кода и уменьшая начальные размеры пакетов в веб-приложениях.
7. Частные методы и поля. Частные методы и поля обеспечивают инкапсуляцию и конфиденциальность членов класса, помечая их как частные, доступные только внутри класса.
8. Объявления полей класса. Объявления полей класса позволяют объявлять свойства класса непосредственно внутри класса без использования конструкторов, что упрощает определения классов.

Преимущества:

1. Array at(): обеспечивает простой и безопасный способ доступа к элементам массива по индексу, включая обработку отрицательных индексов и проверки выхода за пределы.
2. String at(): упрощает доступ к символам внутри строк, делая манипуляции со строками более простыми.
3. Флаг RegExp /d: расширяет функциональность регулярных выражений, упрощая извлечение определенных данных из строк.
4. Object.hasOwn(): предлагает удобный метод проверки владения свойством объекта, улучшая проверку свойств.
5. error.cause: улучшает обработку ошибок, предоставляя доступ к основной причине ошибки.
6. await import: повышает производительность и эффективность загрузки веб-приложений, позволяя асинхронную загрузку модулей.
7. Частные методы и поля: они улучшают инкапсуляцию классов и конфиденциальность, снижая риск непреднамеренного внешнего доступа.
8. Объявления полей классов. Они упрощают объявления свойств классов, что приводит к более чистым и кратким определениям классов.

// Array at()
const arr = [10, 20, 30];
const value = arr.at(1); // Output: 20
// String at()
const str = 'Hello, world!';
const char = str.at(7); // Output: 'w'
// RegExp /d Flag
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/d;
const result = regex.exec('2022-09-15'); // Captures named groups only
// Object.hasOwn()
const obj = { prop: 'value' };
const hasProp = Object.hasOwn(obj, 'prop'); // true
// error.cause
try {
  // Some code that may throw an error
} catch (error) {
  const rootCause = error.cause;
}
// await import
const module = await import('./module.js');
// Private methods and fields
class MyClass {
  #privateField = 42;
  #privateMethod() {
    return 'This is a private method';
  }
}
// Class field declarations
class MyClass {
  field = 'Value';
}

Сравнение:

ECMAScript 2022 (ES13) представил множество функций, включая улучшенные методы массивов и строк, улучшения регулярных выражений, новые методы объектов, улучшения обработки ошибок, асинхронную загрузку модулей, частные методы и поля, а также объявления полей классов.

Ссылка на предыдущие статьи: