LearnJS

Динамические свойства объекта в JavaScript

Динамическое свойство - это свойство, имя которого становится известно во время выполнения кода.

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

let field = 'name';

console.log(user[field]); // Анна

В переменной field лежит строка ‘name’. Поэтому запись user[field] обращается к свойству user.name.

Что такое динамическое свойство

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

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

console.log(user.name); // Анна

Но иногда имя свойства приходит из переменной, параметра функции, поля формы или другого места.

let field = 'email';

В таком случае используется доступ через квадратные скобки.

user[field]

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

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

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

let propertyName = 'price';

console.log(product[propertyName]); // 2500

JavaScript сначала смотрит значение переменной propertyName, а потом ищет свойство с таким именем.

Добавление и изменение свойства

Динамические имена можно использовать не только для чтения, но и для записи.

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

let field = 'city';

user[field] = 'Москва';

console.log(user); // { name: 'Анна', city: 'Москва' }

Если свойства еще нет, оно будет создано. Если свойство уже есть, его значение изменится.

let settings = {
  theme: 'light',
};

let option = 'theme';

settings[option] = 'dark';

console.log(settings.theme); // dark

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

Динамическое имя можно использовать сразу при создании объекта.

let field = 'email';

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

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

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

Это называется вычисляемым свойством.

Пример с данными формы

Динамические свойства часто встречаются при обработке форм.

let formData = {};

function setField(name, value) {
  formData[name] = value;
}

setField('email', 'anna@example.com');
setField('password', '123456');

console.log(formData);
// { email: 'anna@example.com', password: '123456' }

Функция setField() не знает заранее, какое поле нужно записать. Имя поля приходит в параметре name.

Почему не подходит точка

Через точку JavaScript ищет свойство с буквальным именем.

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

let field = 'name';

console.log(user.field); // undefined

user.field ищет свойство field. Он не смотрит, что лежит внутри переменной field.

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

console.log(user[field]); // Анна

Итого

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