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

Объекты

Чем больше пишешь код и создаешь переменных, тем яснее проявляется некая закономерность: переменные, как бы то ни было, начинают группироваться по определенным признакам или контексту. И разработчику приходится как-то решать эту задачу, например, с помощью нейминга. Давайте посмотрим на этот пример:

let currentYear = new Date().getFullYear(); // Текущий год

let userName = 'Оля';
let userAge = 19;
let userCity = 'Волгоград';

console.log('Пользователь:', userName);
console.log('Год рождения:', currentYear - userAge);
console.log('Возраст:', userAge);
console.log('Город:', userCity);

Это пример, в котором переменные сгруппированы с использованием префикса user, что дает понять: данные принадлежат пользователю. Но есть ли более удобный способ? Конечно — наверняка вы уже догадались, что речь пойдет об объектах. Теперь перепишем этот код с использованием объекта:

let currentYear = new Date().getFullYear(); // Текущий год

let user = {
  name: 'Оля',
  age: 19,
  city: 'Волгоград'
}

console.log('Пользователь:', user.name);
console.log('Год рождения:', currentYear - user.age);
console.log('Возраст:', user.age);
console.log('Город:', city);

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

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

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

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

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

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

30+ бесплатных курсов на IT-темы в Академии Selectel

Для начинающих и опытных специалистов.

Изучить →

Работа с объектами

Объекты позволяют удобно хранить и обрабатывать данные любого типа. Давайте подробнее разберем базовые операции в работе с ними.

Создание объекта

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

let product = {};

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

Наполнение объекта данными

Чтобы объект наполнился данными, нам понадобятся свойства, а именно — пары ключ-значение. Имена свойств, как и имена переменных, должны четко описывать назначение. Обычно это существительные, в некоторых случаях, когда вы создаете "метод" (об этом в следующих статьях), — глаголы.

Свойства можно добавить сразу при создании объекта:

let product = {
  name: "Кофе",
  price: 700
};

console.log(product);

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

let product = {
  name: "Кофе",
  price: 700
};

product.weight = 200;
product['date'] = '19.07.2025';

console.log(product);

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

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

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

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

let product = {
  name: "Кофе",
  price: 700
};

product.weight = 200;
product['date'] = '19.07.2025';

console.log('Название товара:', product.name);
console.log('Вес:', product['weight'], 'грамм');

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

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

Вы можете переписать существующие значения свойств. Например, давайте рассчитаем стоимость товара со скидкой:

let product = {
  name: "Кофе",
  price: 700
};

console.log('Название товара:', product.name);
console.log('Цена:', product.price);

product.price = product.price - 100; // Новое значение

console.log('Цена со скидкой:', product.price);

Вложенные объекты

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

Пример:

let product = {
  name: "Кофе",
  price: 700,
  weight: 200,
  date: '19.07.2025',
  size: {
    width: 100,
    height: 120,
    length: 300
  }
};

console.log('Название товара:', product.name);
console.log('Высота:', product.size.height);

Таким образом, в объекте product есть вложенный объект size, который хранит размеры упаковки товара.

Для простоты изложения я не часто буду использовать такие сложные структуры. Но представьте, какие возможности по хранению и группировке данных предлагают объекты. А если совместить их с массивами, то возможности становятся еще более интересными! Но об этом мы поговорим дальше.  

Объекты в массивах

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

let studentsName = ['Ваня', 'Таня', 'Саша', 'Лена', 'Толя'];
let studentsAge = [15, 16, 15, 15, 16];
let studentsHobby = ['спорт', 'рисование', 'монтаж', 'музыка', 'кино'];

function logStudentInfo(name, age, hobby) {
  console.log(
    Имя ученика: ${name}, возраст: ${age}, увлечение: ${hobby}, 
  );
}

for (let i = 0; i < studentsName.length; i++) {
  logStudentInfo(
    studentsName[i],
    studentsAge[i],
    studentsHobby[i]
  );
}

Программа выводит данные об учениках в консоль. Все выглядит неплохо, но посмотрите, как хранится информация и как мы ее обрабатываем. 

У нас есть три массива, каждый из которых хранит один тип данных: имена, возраст и увлечения студентов. При обработке нужно по отдельности работать с каждым массивом. Представьте, что вам нужно добавить еще одно свойство, например, адрес. Тогда придется создать еще один массив и модифицировать все остальные части программы. Как итог, код будет сложно поддерживать и масштабировать.

Теперь давайте решим эту проблему с помощью объектов:

let students = [
  {
    name: 'Ваня',
    age: 15,
    hobby: 'спорт'
  },
  { name: 'Таня', age: 16, hobby: 'рисование' },
  { name: 'Саша', age: 15, hobby: 'монтаж' },
  { name: 'Лена', age: 15, hobby: 'музыка' },
  { name: 'Толя', age: 16, hobby: 'кино' }
]

function logStudentInfo(student) {
  console.log(
    Имя ученика: ${student.name}, возраст: ${student.age}, увлечение: ${student.hobby}, 
  );
}

for (let i = 0; i < students.length; i++) {
  logStudentInfo(students[i]);
}

Да, результат тот же. Но обратите внимание на код. Теперь мы используем один массив с объектами. У него есть понятное имя — students. В каждом объекте хранятся все данные о студенте: имя, возраст и увлечение. В функцию logStudentInfo() передается один объект (элемент массива) — и уже внутри функции происходит обработка данных этого студента.

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

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

// Добавление объектов в массив в момент его создания
let products = [
 {
   name: 'iPhone 14',
   price: 50000
 },
 {
   name: 'Чехол для iPhone 14',
   price: 700
 }
]

// Получение значения свойства объекта массива по индексу элемента
console.log(
 Товар: ${products[0].name}, стоимость: ${products[0].price}
);

// Добавление объекта в массив с помощью метода push()
products.push({
   name: 'Салфетка Apple',
   price: 99999
});

// Добавление элемента в массив по индексу
products[3] = {
 name: 'Пакет',
 price: 15
};

// Вывод массива в виде таблицы в консоль
console.table(products);

Пример с массивом products показывает, как можно добавлять новые объекты в массив с помощью метода push() или просто заменять элемент массива по индексу. Метод console.table() позволяет вывести массив объектов в виде таблицы, что делает данные более удобочитаемыми в консоли.

Подведем итог

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

Хотите узнать еще больше об объектах? Тогда смотрите мое видео на YouTube.