Объекты в JavaScript для начинающих: свойства, методы и перебор

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

Что такое объект в JavaScript

Объект — это коллекция пар «ключ — значение». Ключ обычно является строкой, а значением может быть что угодно: число, строка, массив, функция, другой объект.

const user = {
  name: 'Анна',
  age: 28,
  isAdmin: false
};

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

Такой синтаксис называется литералом объекта. Это самый частый и удобный способ создать объект в JavaScript.

Как получить значение свойства

Есть два основных способа обратиться к свойству объекта: через точку и через квадратные скобки.

const product = {
  title: 'Клавиатура',
  price: 3500,
  'in stock': true
};

console.log(product.title);       // Клавиатура
console.log(product['price']);    // 3500
console.log(product['in stock']); // true

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

const key = 'price';
console.log(product[key]); // 3500

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

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

const task = {
  title: 'Выучить объекты',
  done: false
};

task.done = true;              // изменили значение
task.priority = 'high';        // добавили свойство
delete task.priority;          // удалили свойство

console.log(task);

Совет: не злоупотребляйте delete в коде, где важна производительность. Часто лучше создать новый объект без лишнего поля или присвоить свойству null, если нужно явно показать отсутствие значения.

Методы объекта

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

const calculator = {
  a: 10,
  b: 5,
  sum() {
    return this.a + this.b;
  }
};

console.log(calculator.sum()); // 15

Ключевое слово this внутри метода обычно указывает на объект, через который был вызван метод. В примере this.a — это calculator.a.

Короткая запись свойств

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

const name = 'Игорь';
const email = 'igor@example.com';

const user = {
  name,
  email,
  registered: true
};

console.log(user);

Это то же самое, что написать name: name и email: email, только короче.

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

Новички часто проверяют наличие свойства так:

const settings = {
  theme: 'dark',
  notifications: false
};

if (settings.notifications) {
  console.log('Уведомления включены');
}

Но здесь есть ошибка: значение false означает, что свойство есть, просто оно содержит логическое false. Для проверки ключа лучше использовать оператор in или метод Object.hasOwn().

console.log('notifications' in settings); // true
console.log(Object.hasOwn(settings, 'theme')); // true
console.log(Object.hasOwn(settings, 'language')); // false

Object.hasOwn() удобен, когда нужно проверить именно собственное свойство объекта, а не унаследованное.

Перебор объекта: Object.keys, Object.values, Object.entries

Чтобы пройтись по объекту, чаще всего используют три метода:

• Object.keys(obj) — возвращает массив ключей;
• Object.values(obj) — возвращает массив значений;
• Object.entries(obj) — возвращает массив пар [ключ, значение].

const prices = {
  apple: 80,
  banana: 120,
  orange: 100
};

console.log(Object.keys(prices));   // ['apple', 'banana', 'orange']
console.log(Object.values(prices)); // [80, 120, 100]

for (const [name, price] of Object.entries(prices)) {
  console.log(`${name}: ${price} руб.`);
}

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

Практический пример: подсчёт товаров в корзине

Допустим, у нас есть корзина интернет-магазина. Каждый товар — объект, а вся корзина — массив объектов.

const cart = [
  { title: 'Мышь', price: 1500, count: 2 },
  { title: 'Клавиатура', price: 3500, count: 1 },
  { title: 'Монитор', price: 18000, count: 1 }
];

let total = 0;

for (const item of cart) {
  total += item.price * item.count;
}

console.log(`Итого: ${total} руб.`); // Итого: 24500 руб.

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

Частые ошибки новичков

• Обращение к несуществующему свойству. Если свойства нет, JavaScript вернёт undefined, а не ошибку.
• Путаница между точкой и скобками. Если имя ключа находится в переменной, используйте obj[key], а не obj.key.
• Случайное изменение объекта. Если передать объект в функцию и изменить его внутри, изменится исходный объект.

const user = { name: 'Олег' };

function rename(obj) {
  obj.name = 'Максим';
}

rename(user);
console.log(user.name); // Максим

Это происходит потому, что переменная хранит не сам объект целиком, а ссылку на него. Для новичка это один из важных моментов в теме «объекты в JavaScript для начинающих».

Как скопировать объект поверхностно

Для простых объектов можно использовать spread-синтаксис:

const user = {
  name: 'Мария',
  age: 31
};

const copy = { ...user };
copy.name = 'Елена';

console.log(user.name); // Мария
console.log(copy.name); // Елена

Важно: это поверхностная копия. Если внутри есть вложенный объект, он всё равно будет передан по ссылке.

Рекомендации по работе с объектами

• Называйте свойства понятно: userName, totalPrice, isActive.
• Не храните в одном объекте всё подряд. Объект должен описывать одну сущность.
• Для проверки ключей используйте Object.hasOwn(), если важно наличие свойства.
• Для перебора чаще выбирайте Object.entries(): так сразу доступны и ключ, и значение.
• Будьте осторожны с изменением объектов внутри функций.

Если вы хотите системно разобраться не только с объектами, но и с функциями, DOM, событиями, асинхронностью и практическими проектами, посмотрите курс «JavaScript с нуля до уверенной практики». Он хорошо подойдёт тем, кто хочет перестать собирать знания по кусочкам и выстроить нормальную базу.

Итог

Объекты в JavaScript — это фундаментальный инструмент для хранения и организации данных. Вы будете встречать их в настройках, API-ответах, элементах интерфейса, формах и бизнес-логике. Освойте создание объектов, доступ к свойствам, методы, проверку ключей и перебор через Object.keys, Object.values, Object.entries — и большая часть повседневного JavaScript станет понятнее.