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

1. Сокращенные имена свойств

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

const name = 'John';
const age = 30;

// Old way
const person = {
    name: name,
    age: age
};

// New way
const person = { name, age };

console.log(person); // { name: 'John', age: 30 }

Этот сокращенный синтаксис уменьшает повторение и делает наш код более кратким.
Документация MDN: инициализатор объекта

2. Сокращенные имена методов

Аналогично, при определении методов в объекте мы можем опустить ключевое слово function и двоеточие.

// Old way
const calculator = {
    add: function(a, b) {
        return a   b;
    }
};

// New way
const calculator = {
    add(a, b) {
        return a   b;
    }
};

console.log(calculator.add(5, 3)); // 8

Этот синтаксис чище и легче читается, особенно если в объекте имеется несколько методов.
Документация MDN: определения методов

3. Вычисленные имена свойств

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

const prefix = 'user_';
const id = 1234;

const user = {
    [`${prefix}${id}`]: 'John Doe'
};

console.log(user.user_1234); // 'John Doe'

Эта функция полезна, когда вам нужно создавать объекты с динамическими ключами на основе некоторой логики или внешних данных.
Документация MDN: имена вычисляемых свойств

4. Свойства метода

ES6 представил новый способ определения методов в литералах объектов с использованием ключевых слов get и set. Это позволяет создавать вычисляемые свойства без явного вызова функции.

const person = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.fullName); // 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'
console.log(person.lastName); // 'Smith'

Геттеры и сеттеры предоставляют простой способ определения вычисляемых свойств и могут использоваться для добавления проверки или побочных эффектов при получении или установке значений.
Документация MDN: геттер и сеттер

5. Оператор расширения объекта

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

const defaults = {
    theme: 'light',
    fontSize: 14
};

const userPreferences = {
    fontSize: 16
};

const settings = {
    ...defaults,
    ...userPreferences
};

console.log(settings); // { theme: 'light', fontSize: 16 }

Оператор распространения позволяет легко создавать новые объекты на основе существующих, что особенно полезно для обеспечения неизменяемости в ваших приложениях.
Документация MDN: синтаксис распространения (...)

Заключение

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

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

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

Вот краткий обзор поддержки этих функций браузерами:

Практические примеры использования

1. Сокращенные свойства: отлично подходят для создания объектов из существующих переменных, особенно в реквизитах компонентов React.
2. Сокращенные методы: полезно в структурах, подобных классам, или при определении нескольких связанных функций.
3. Имена вычисляемых свойств: идеально подходят для создания динамических ключей в объектах интернационализации (i18n).
4. Методы получения/установки: идеально подходят для создания «умных» свойств со встроенной проверкой или побочными эффектами.
5. Распространение объектов: отлично подходит для управления состоянием в Redux или для создания новых объектов с небольшими изменениями.

Вопросы производительности

Хотя эти улучшения обычно не оказывают существенного влияния на производительность, оператор расширения объекта может быть менее эффективным, чем Object.assign(), для объединения многих свойств. В большинстве случаев преимущество читаемости перевешивает любые незначительные различия в производительности.

Сопутствующие функции

Чтобы лучше понять современные манипуляции с объектами в JavaScript, изучите:

• Задание на деструктуризацию
• Метод Object.assign()
• Методы Object.entries(), Object.values() и Object.keys()
• Методы Object.freeze() и Object.seal() для неизменяемости объектов

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

Если вы считаете эту статью полезной, нажмите кнопку «Подписаться», чтобы получать больше обновлений и полезных ресурсов по JavaScript, Reactjs и Next.js. Вы также можете подписаться на меня в Твиттере @OgDev-01, чтобы получать полезные ресурсы и технические тенденции, или на OpenSauced, чтобы узнать, какой вклад я вношу и что выделяю!