Frontend разработчик

Как добавлять условные свойства объектов в JavaScript

При создании объектов в JavaScript иногда требуется включать определённые свойства только при выполнении конкретных условий. Этот приём можно реализовать с помощью оператора расширения (…) в сочетании с условной логикой. Давайте разберём, как овладеть этим мощным инструментом для более гибкого и динамичного создания объектов.

Проблема статических свойств объектов

Представьте: вы создаёте объект пользователя и хотите добавить разные свойства в зависимости от его статуса. Возможно, он администратор, или у него есть премиум-подписка, или и то, и другое! Как создать объект, который гибко включает или исключает свойства в зависимости от условий?

Решение: условное распространение (Conditional Spreading) в JavaScript

Вот где начинается магия. Мы можем использовать оператор расширения (…) вместе с логическим оператором И (&&), чтобы условно добавлять свойства в объекты JavaScript. Такой подход позволяет создавать чистый и гибкий код, динамически добавляя свойства на основании различных условий.

Разберём это на примере:


const isAdmin = true;
const hasPremium = false;

const user = {
  username: 'johndoe',
  email: '[email protected]',
  ...(isAdmin && { role: 'admin' }),
  ...(hasPremium && { subscription: 'premium' }),
  ...((isAdmin || hasPremium) && { specialFeatures: 
  ['dashboard', 'reports'] }),
};

console.log(user);
/* 
{
  "username": "johndoe",
  "email": "[email protected]",
  "role": "admin",
  "specialFeatures": [
    "dashboard",
    "reports"
  ]
}
*/

Как работают условные свойства объектов

Выражение && в JavaScript вычисляется слева направо.
Если первая часть выражения ложна (falsy), то происходит короткое замыкание — вся конструкция возвращает это ложное значение, а вторая часть даже не вычисляется.

Вот что происходит в нашем примере:

- `isAdmin && { role: 'admin' }`: так как isAdmin === true, в объект добавляется свойство role: 'admin'.
- `hasPremium && { subscription: 'premium' }`: так как hasPremium === false, это свойство не добавляется.
- `(isAdmin || hasPremium) && { specialFeatures: [...] }`: условие истинно (потому что isAdmin === true`), поэтому в объект добавляется массив `specialFeatures.

Профессиональные советы по работе с условными свойствами объектов в JavaScript 🚀

1- Порядок имеет значение: помните, что порядок операций распространения (spread) может влиять на итоговый объект. Более поздние операции перезапишут более ранние при одинаковом ключе.

2- Вопросы производительности: хотя этот приём выглядит чисто и читаемо, будьте осторожны при использовании с большими объектами или в критичных к производительности местах. Каждая операция spread создаёт новый объект, что может повлиять на производительность при чрезмерном использовании.

3- Отладка условных свойств: при отладке помните, что "ложные" значения (`...false`, ...null, `...undefined`) просто игнорируются, из-за чего некоторые проблемы могут быть неочевидны на первый взгляд.

4- Nullish coalescing: для более продвинутых случаев использования рассмотрите комбинацию этого подхода с оператором объединения с null (??) для задания значений по умолчанию.


const user = {
  ...someCondition && { prop: valueIfTrue ?? defaultValue }
};

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

👉 @frontend_1

👍8👎4

1.72K views07:31