Какие знаешь стандарты языка JavaScript?

ECMAScript стандарты JavaScript

JavaScript развивается по стандарту ECMAScript (ES), который ежегодно выпускает новые версии с новыми возможностями.

История основных версий

ES5 (2009) — долгая история стабилизации:

• use strict директива
• Array методы: forEach, map, filter, reduce
• Object методы: Object.create, Object.defineProperty
• Getters и Setters
• JSON поддержка

'use strict';
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

ES6/ES2015 (2015) — революционное обновление:

• let и const (вместо var)
• Arrow functions: () => {}
• Classes
• Template literals: `Hello ${name}`
• Деструктуризация
• Spread оператор
• Promises
• Модули (import/export)
• Default параметры
• Rest параметры

// Arrow function
const add = (a, b) => a + b;

// Destructuring
const { name, age } = user;
const [first, second] = array;

// Template literal
const message = `Hello, ${name}!`;

// Class
class User {
  constructor(name) {
    this.name = name;
  }
}

// Promise
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 1000);
});

// Modules
export const myFunction = () => {};
import { myFunction } from './module.js';

ES2016-ES2020 — постепенное развитие:

// ES2016: Exponentiation
const squared = 2 ** 3; // 8

// ES2017: async/await
async function fetchData() {
  const response = await fetch('api/data');
  return response.json();
}

// ES2019: Object.fromEntries
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2 }

// ES2020: Optional chaining
const street = user?.address?.street;

// ES2020: Nullish coalescing
const value = data ?? defaultValue;

// ES2020: BigInt
const bigNumber = BigInt(9007199254740991);

ES2021-ES2023 — современные возможности:

// ES2021: Logical assignment
let x = 1;
x ||= 2; // если x falsy, присвоить 2
x &&= 3; // если x truthy, присвоить 3
x ??= 4; // если x nullish, присвоить 4

// ES2022: Top-level await
await fetchData();

// ES2022: Class fields и private
class User {
  #privateField = 'secret';
  publicField = 'public';
  
  getPrivate() {
    return this.#privateField;
  }
}

// ES2023: Array methods
const arr = [1, 2, 3, 4, 5];
arr.findLast(x => x > 3); // 5
arr.findLastIndex(x => x > 3); // 4

Часто используемые методы

Array методы:

// Трансформация
.map(callback)      // преобразовать каждый элемент
.filter(callback)   // оставить элементы по условию
.reduce(callback)   // свернуть в одно значение
.flatMap(callback)  // map + flatten

// Поиск
.find(callback)     // первый элемент по условию
.findIndex(callback) // индекс первого элемента
.includes(value)    // проверить наличие
.indexOf(value)     // индекс элемента

// Проверка
.some(callback)     // хотя бы один элемент подходит
.every(callback)    // все элементы подходят

// Перебор
.forEach(callback)  // для каждого элемента

Object методы:

Object.keys(obj)              // массив ключей
Object.values(obj)            // массив значений
Object.entries(obj)           // массив пар [ключ, значение]
Object.assign(target, source) // копирование свойств
Object.create(proto)          // создание с прототипом
Object.freeze(obj)            // заморозить объект
Object.seal(obj)              // запретить добавлять/удалять
Object.defineProperty()       // определить свойство

String методы:

.includes(substring)  // содержит ли подстроку
.startsWith(prefix)   // начинается ли с
.endsWith(suffix)     // кончается ли на
.repeat(count)        // повторить строку
.padStart(length, fill)  // дополнить слева
.padEnd(length, fill)    // дополнить справа
.replaceAll(old, new) // заменить все вхождения
.split(separator)     // разбить на массив
.trim()               // удалить пробелы

Современный стандарт (2024-2026)

• Modules — ES modules повсеместно
• TypeScript — типизация (фактический стандарт в индустрии)
• Async/Await — стандарт для асинхронного кода
• Destructuring — разбор структур
• Rest/Spread — работа с параметрами и массивами

Совместимость с браузерами

// Для старых браузеров нужна трансяиляция
// Babel превращает современный код в ES5
// @babel/preset-env автоматически определяет нужные трансформации

Рекомендации

• Используйте ES6+ (есть поддержка во всех современных браузерах)
• Изучайте новые методы массивов для правильной функциональной парадигмы
• Предпочитайте const, потом let, совсем забудьте про var
• Используйте arrow functions для коротких функций
• Деструктуризируйте параметры и объекты
• Применяйте async/await вместо .then()

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