Работа со свойствами

Урок: Работа со свойствами

Введение

Когда мы начинаем работать с объектами, довольно быстро становится понятно: сам по себе объект — это просто «контейнер». Настоящая работа происходит с его содержимым — свойствами.

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

  • читать их;
  • изменять;
  • добавлять новые;
  • иногда удалять.

То есть работать не с объектом целиком, а с его отдельными частями.

Именно это и называется работой со свойствами объекта.

Понимание этой темы — ключ к работе с реальными данными, потому что почти всё в JavaScript — это объекты и их свойства.

Что такое свойства объекта

Свойство — это пара «ключ — значение», которая находится внутри объекта.

let user = {
  name: 'Stepan',
  age: 25,
};

Здесь:

  • name и age — это свойства;
  • "Stepan" и 25 — их значения.

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

Именно через свойства мы получаем доступ к данным.

Получение значения свойства

Самый частый сценарий — это получение значения.

let user = {
  name: 'Stepan',
  age: 25,
};

console.log(user.name);

Результат:

Stepan

Здесь используется точечная запись: user.name.

Она означает: «возьми у объекта user свойство name».

Это основной и самый простой способ доступа.

Альтернативный способ — через квадратные скобки

Есть второй способ получить значение:

let user = {
  name: 'Stepan',
  age: 25,
};

console.log(user['name']);

Результат будет таким же.

Но этот способ полезен в динамических ситуациях:

let user = {
  name: 'Stepan',
  age: 25,
};

let key = 'age';

console.log(user[key]);

Здесь имя свойства хранится в переменной, и мы получаем доступ через неё.

Это важно, когда структура объекта неизвестна заранее или строится динамически.

Изменение свойств

Свойства объекта можно изменять.

let user = {
  name: 'Stepan',
  age: 25,
};

user.age = 30;

console.log(user.age);

Результат:

30

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

Важно: если свойство уже существует — оно перезаписывается.

Добавление новых свойств

Если свойства нет, его можно добавить:

let user = {
  name: 'Stepan',
};

user.email = 'test@mail.com';

console.log(user);

Результат:

{ name: "Stepan", email: "test@mail.com" }

JavaScript позволяет свободно расширять объекты во время выполнения.

Это делает их очень гибкими.

Удаление свойств

Свойство можно удалить с помощью оператора delete:

let user = {
  name: 'Stepan',
  age: 25,
};

delete user.age;

console.log(user);

Результат:

{ name: "Stepan" }

После удаления свойства больше не существует в объекте.

Проверка наличия свойства

Иногда нужно проверить, есть ли свойство в объекте.

let user = {
  name: 'Stepan',
};

console.log('name' in user);
console.log('age' in user);

Результат:

true
false

Оператор in проверяет, существует ли ключ в объекте.

Это полезно, когда данные могут быть неполными.

Перебор свойств объекта

Если нужно пройтись по всем свойствам, используется цикл for...in.

let user = {
  name: 'Stepan',
  age: 25,
};

for (let key in user) {
  console.log(key, user[key]);
}

Результат:

name Stepan
age 25

Здесь:

  • key — это имя свойства;
  • user[key] — значение.

Этот цикл позволяет обрабатывать объект целиком.

Получение всех значений объекта

Иногда нужно не только ключи, но и значения объекта.

Для этого есть встроенный метод Object.values():

const settings = { theme: 'dark', lang: 'ru', fontSize: 16 };

const values = Object.values(settings);
console.log(values);

Результат:

['dark', 'ru', 16]

Что здесь происходит:

  • Object.values() берёт объект;
  • возвращает массив всех его значений;
  • порядок соответствует порядку свойств.

Это часто используется при работе с настройками, конфигами или данными API.

Получение всех ключей объекта

Аналогично можно получить только ключи:

const user = { name: 'Alex', age: 25, city: 'SPB' };

const keys = Object.keys(user);
console.log(keys);

Результат:

['name', 'age', 'city']

Это полезно, когда нужно:

  • узнать структуру объекта;
  • пройтись по ключам;
  • динамически обработать данные.

Массовое обновление свойств

Иногда нужно изменить сразу несколько полей.

const profile = { name: 'Ira', age: 20, city: 'Kazan' };

profile.age = 21;
profile.city = 'Moscow';

console.log(profile);

Результат:

{ name: 'Ira', age: 21, city: 'Moscow' }

Здесь нет никакой «магии» — мы просто по очереди меняем свойства.

Важно понимать: объект — это изменяемая структура (mutable), и изменения происходят прямо в нём.

Вложенные свойства

Свойства могут содержать другие объекты.

let user = {
  name: 'Stepan',
  address: {
    city: 'Amsterdam',
  },
};

console.log(user.address.city);

Результат:

Amsterdam

Здесь доступ происходит по цепочке: объект внутри объекта.

Такие структуры встречаются очень часто — особенно в ответах от API.

Где это используется на практике

Работа со свойствами — это основа любой работы с данными.

Например:

  • получение данных пользователя (user.name);
  • проверка наличия поля ('email' in user);
  • перебор данных (for...in, Object.keys);
  • извлечение значений (Object.values);
  • обновление состояния (изменение свойств объекта);
  • удаление лишних данных перед отправкой.

Когда приходит ответ от API, это почти всегда объект. И вся работа заключается в чтении и изменении его свойств.

В тестировании (например, в Playwright) это тоже используется постоянно:

  • проверка структуры ответа API;
  • работа с JSON;
  • извлечение нужных полей из ответа.

Итоговое понимание

Свойства — это не просто часть объекта. Это точка входа ко всем данным, с которыми ты работаешь.

Объект сам по себе ничего не делает — он лишь хранит информацию. А вся логика строится вокруг его свойств:

  • ты читаешь данные через свойства;
  • изменяешь состояние через свойства;
  • проверяешь наличие данных через свойства;
  • перебираешь структуру через свойства.

Когда ты уверенно работаешь со свойствами, ты начинаешь по-настоящему управлять данными, а не просто хранить их.