Об'єкти — частина 1

JavaScript об'єкти — паспорт та особисті речі як властивості однієї людини

Масиви зберігають впорядковані колекції. Але часто потрібно зберегти структуровані дані — як у картці контакту: ім'я, вік, email, телефон. Для цього є об'єкти — основа всього JavaScript.

Що таке об'єкт?

Об'єкт — колекція пар "ключ: значення":

const user = {
  name: "Олексій",
  age: 25,
  email: "alex@example.com",
  isStudent: true,
};

Кожна пара — це властивість (property). Ключ (key) — завжди рядок, значення (value) — будь-який тип.

Доступ до властивостей

Точкова нотація (dot notation)

console.log(user.name);  // "Олексій"
console.log(user.age);   // 25

Дужкова нотація (bracket notation)

console.log(user["email"]); // "alex@example.com"

// Корисно для динамічних ключів:
const key = "name";
console.log(user[key]); // "Олексій"

Зміна та додавання властивостей

Об'єкти — мутабельні (можна змінювати їхній вміст після створення):

const user = { name: "Олексій", age: 25 };

// Змінити існуючу
user.age = 26;

// Додати нову
user.city = "Київ";

// Видалити
delete user.city;

console.log(user); // { name: "Олексій", age: 26 }

Навіть через const — це мутація існуючого об'єкта, а не створення нового. Детально про те, чому це важливо і коли краще створювати нові об'єкти — в уроці про мутабельність.

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

const user = { name: "Олексій", age: 25 };

// Оператор in
console.log("name" in user);    // true
console.log("email" in user);   // false

// Перевірка через undefined
console.log(user.email !== undefined); // false

Методи об'єктів

Метод — це функція, яка є властивістю об'єкта:

const calculator = {
  result: 0,

  add(value) {
    this.result += value;
  },

  subtract(value) {
    this.result -= value;
  },

  getResult() {
    return this.result;
  },
};

calculator.add(10);
calculator.add(5);
calculator.subtract(3);
console.log(calculator.getResult()); // 12

this — посилання на поточний об'єкт

this всередині методу вказує на об'єкт, якому належить метод:

const user = {
  name: "Олексій",
  greet() {
    console.log(`Привіт, я ${this.name}!`);
  },
};

user.greet(); // "Привіт, я Олексій!"

Вкладені об'єкти

Об'єкти можуть містити інші об'єкти:

const user = {
  name: "Олексій",
  address: {
    city: "Київ",
    street: "Хрещатик",
    zip: "01001",
  },
  contacts: {
    email: "alex@example.com",
    phone: "+380501234567",
  },
};

console.log(user.address.city);    // "Київ"
console.log(user.contacts.email);  // "alex@example.com"

Перебір об'єктів

for...in — перебір ключів

const user = { name: "Олексій", age: 25, city: "Київ" };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: Олексій
// age: 25
// city: Київ

Object.keys(), Object.values(), Object.entries()

const user = { name: "Олексій", age: 25, city: "Київ" };

console.log(Object.keys(user));    // ["name", "age", "city"]
console.log(Object.values(user));  // ["Олексій", 25, "Київ"]
console.log(Object.entries(user)); // [["name","Олексій"], ["age",25], ["city","Київ"]]

Ці методи повертають масиви, тому можна використовувати forEach, map, filter:

// Знайти всі рядкові значення
const stringValues = Object.values(user).filter((v) => typeof v === "string");
console.log(stringValues); // ["Олексій", "Київ"]

Порівняння масивів та об'єктів

Часто комбінують: масив об'єктів — найпоширеніша структура даних:

const students = [
  { name: "Олексій", grade: 85 },
  { name: "Марія", grade: 92 },
  { name: "Іван", grade: 67 },
];

Практика

// 1. Об'єкт-профіль
const profile = {
  firstName: "Олексій",
  lastName: "Бойко",
  age: 25,

  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },

  isAdult() {
    return this.age >= 18;
  },
};

console.log(profile.fullName());  // "Олексій Бойко"
console.log(profile.isAdult());   // true

// 2. Підрахунок символів у рядку
function countChars(str) {
  const counts = {};
  for (const char of str) {
    counts[char] = (counts[char] || 0) + 1;
  }
  return counts;
}
console.log(countChars("hello")); // { h: 1, e: 1, l: 2, o: 1 }

Підсумок

• Об'єкт — колекція пар ключ: значення
• Доступ: obj.key (точка) або obj["key"] (дужки)
• Методи — функції всередині об'єкта, this вказує на сам об'єкт
• for...in — перебір ключів об'єкта
• Object.keys/values/entries — отримати масив ключів/значень/пар
• Масив об'єктів — найпоширеніша структура даних

Що далі?

У наступному уроці вивчимо деструктуризацію та spread для об'єктів — сучасні способи роботи з даними.