LearnJS

Вычисляемые свойства объекта в JavaScript

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

let field = 'email';

let user = {
  name: 'Анна',
  [field]: 'anna@example.com',
};

console.log(user);
// { name: 'Анна', email: 'anna@example.com' }

Запись [field] означает: взять значение переменной field и использовать его как имя свойства.

Что такое вычисляемое свойство

Обычно имя свойства пишется в объекте напрямую.

let user = {
  name: 'Анна',
  age: 28,
};

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

Для этого имя свойства записывают в квадратных скобках.

let key = 'age';

let user = {
  name: 'Анна',
  [key]: 28,
};

Свойство из переменной

Самый частый вариант - создать свойство по имени из переменной.

let propertyName = 'price';

let product = {
  title: 'Клавиатура',
  [propertyName]: 2500,
};

console.log(product.price); // 2500

JavaScript сначала вычисляет выражение внутри скобок. В этом примере он получает строку ‘price’, а потом создает свойство price.

Выражение в квадратных скобках

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

let prefix = 'user';

let data = {
  [prefix + 'Id']: 15,
};

console.log(data.userId); // 15

Сначала выполняется выражение prefix + ‘Id’. Получается строка ‘userId’, и она становится именем свойства.

Можно использовать и функцию, если она возвращает строку.

function getFieldName() {
  return 'status';
}

let task = {
  title: 'Написать статью',
  [getFieldName()]: 'in progress',
};

console.log(task.status); // in progress

Чем отличается от обычного свойства

Важно не путать обычное имя свойства и вычисляемое.

let key = 'email';

let user = {
  key: 'anna@example.com',
};

console.log(user);
// { key: 'anna@example.com' }

Здесь создается свойство с именем key. JavaScript не смотрит, что лежит в переменной key.

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

let key = 'email';

let user = {
  [key]: 'anna@example.com',
};

console.log(user);
// { email: 'anna@example.com' }

Где это используется

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

function createFilter(field, value) {
  return {
    [field]: value,
  };
}

let filter = createFilter('category', 'books');

console.log(filter);
// { category: 'books' }

Функция createFilter() не привязана к конкретному имени свойства. Она получает имя в параметре field и создает объект с нужным ключом.

Такой прием часто встречается при работе с формами, фильтрами, настройками и параметрами для API.

Итого

  • Вычисляемое свойство создается через квадратные скобки внутри объекта: [key]: value.
  • JavaScript сначала вычисляет выражение в скобках, а потом использует результат как имя свойства.
  • key: value создает свойство key, а [key]: value берет имя из переменной.
  • Этот синтаксис полезен, когда объект собирается из динамических данных.