Объекты и их методы. Что учить дальше

Объект описывает сущность

Массив хорош для списка однотипных значений. Но как описать один товар — с названием, ценой и наличием? Для этого есть объект — набор пар «ключ — значение» в фигурных скобках:

const product = {
  title: "Наушники",
  price: 4990,
  inStock: true,
};

Пары называются свойствами. Ключ — имя свойства, значение — любые данные: строка, число, массив и даже другой объект.

Обращение к свойствам

console.log(product.title);      // "Наушники"
console.log(product["price"]);   // 4990

product.price = 4490;            // изменить
product.color = "чёрный";        // добавить новое свойство
delete product.inStock;          // удалить

Чаще всего пишут через точку. Квадратные скобки нужны, когда имя свойства хранится в переменной:

const field = "title";
console.log(product[field]);     // "Наушники"

Как и с массивами, const не мешает менять свойства: он запрещает только заменить объект целиком.

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

Свойством может быть и функция — тогда это метод:

const cart = {
  items: [450, 150, 300],
  total() {
    return this.items.reduce((sum, price) => sum + price, 0);
  },
};

console.log(cart.total());   // 900

this внутри метода — это сам объект, у которого метод вызвали. Через него метод добирается до свойства items. Так же устроены методы, которые вы уже вызывали: у строки есть trim(), у массива — push().

Перебор объекта

Чтобы перебрать объект, его превращают в массив одним из трёх способов:

const menu = { tea: 120, coffee: 200, croissant: 180 };

console.log(Object.keys(menu));     // ["tea", "coffee", "croissant"]
console.log(Object.values(menu));   // [120, 200, 180]
console.log(Object.entries(menu));  // [["tea", 120], ["coffee", 200], ["croissant", 180]]

А дальше работают привычные инструменты:

for (const [item, price] of Object.entries(menu)) {
  console.log(`${item}: ${price} ₽`);
}

Запись [item, price] сразу раскладывает каждую пару на две переменные.

Массив объектов

Так выглядят данные почти в любом приложении — список товаров, заказов, сообщений. Именно в таком виде их присылает сервер в формате JSON:

const products = [
  { title: "Наушники", price: 4990, inStock: true },
  { title: "Чехол", price: 790, inStock: false },
  { title: "Кабель", price: 490, inStock: true },
];

const available = products
  .filter((p) => p.inStock)
  .map((p) => p.title);

console.log(available);   // ["Наушники", "Кабель"]

Здесь вместе работает всё, что вы прошли: объекты описывают товары, массив их хранит, а методы с callback из урока 7 отбирают нужные.

Что учить дальше

Вы освоили основу языка. Дальше JavaScript начинает работать со страницей и сервером:

1. DOM — как находить элементы на странице и менять их: текст, классы, стили.
2. События — как реагировать на клики, ввод текста и отправку формы.
3. Асинхронность и fetch — как получать данные с сервера, не перезагружая страницу.
4. Git и GitHub — как хранить код и показывать его работодателю.
5. Фреймворк — React или Vue: на них делают большинство современных интерфейсов.

А параллельно — HTML и CSS, если вы их ещё не знаете, и регулярная практика на задачах. Лучший способ закрепить всё — свой небольшой проект: список дел, калькулятор, погода по городу.

const user = {
  name: "Анна",
  orders: [4990, 790, 6200],
  spent() {
    return this.orders.reduce((sum, order) => sum + order, 0);
  },
  isVip() {
    return this.spent() > 10000;
  },
};

console.log(user.spent());   // 11980
console.log(user.isVip());   // true