$ sudo teach IT
МОДУЛЬ 5 · УРОК 3

Объекты: свойства и доступ через точку и скобки

Если массив — это список «один за другим», то объект — это именованная коллекция данных. Вместо индексов 0, 1, 2 — понятные ключи: имя, возраст, email. Объекты — сердце JavaScript.

⏱ ~30 минут 🎓 Для новичков 🗂️ Объекты

🗂️ Что такое объект и зачем он нужен

Представьте анкету на нового сотрудника: имя, возраст, должность, зарплата. Как хранить всё это в коде?

Через отдельные переменные — неудобно и не связано:

let name = "Иван";
let age = 28;
let job = "разработчик";
let salary = 120000;

Через массив — невозможно понять что есть что:

let employee = ["Иван", 28, "разработчик", 120000];
// employee[0] — это имя? возраст? непонятно без документации

Через объект — всё понятно и структурировано:

let employee = {
  name: "Иван",
  age: 28,
  job: "разработчик",
  salary: 120000
};

console.log(employee.name); // "Иван" — сразу понятно что это

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

🛠️ Создание объекта через литерал {}

Самый распространённый способ — литерал объекта с фигурными скобками {}. Внутри перечисляются пары «ключ: значение» через запятую:

// Пустой объект
let empty = {};

// Объект с несколькими свойствами
let user = {
  name: "Анна",          // ключ: name, значение: строка
  age: 25,               // ключ: age, значение: число
  isAdmin: false,        // ключ: isAdmin, значение: булево
  score: null            // ключ: score, значение: null
};

console.log(user); // { name: "Анна", age: 25, isAdmin: false, score: null }

Ключи в объекте называются свойствами (properties). Если ключ — простое слово без спецсимволов, кавычки не нужны. Если ключ содержит пробелы или начинается с цифры — нужны кавычки:

let settings = {
  theme: "dark",           // обычный ключ — без кавычек
  fontSize: 16,
  "font-size": 16,         // дефис — нужны кавычки
  "main color": "синий",   // пробел — нужны кавычки
  "2fa-enabled": true      // начинается с цифры — нужны кавычки
};

• Доступ через точку: obj.property

Самый читаемый и популярный способ доступа к свойствам — через точку. Работает, когда ключ — простое слово (без пробелов, начинается с буквы, нет спецсимволов):

let product = {
  name: "Ноутбук",
  price: 75000,
  inStock: true,
  brand: "ASUS"
};

// Читаем свойства через точку
console.log(product.name);    // "Ноутбук"
console.log(product.price);   // 75000
console.log(product.inStock); // true

// Изменяем свойство через точку
product.price = 69000;
console.log(product.price); // 69000

// Несуществующее свойство
console.log(product.color); // undefined — не ошибка, просто нет такого свойства

[ ] Доступ через квадратные скобки: obj["property"]

Второй способ — квадратные скобки с ключом в виде строки. Он более гибкий, но менее читаемый. Когда его нужно использовать?

Ключ с пробелом или дефисом

Через точку не получится: obj.main color — синтаксическая ошибка

Ключ хранится в переменной

Динамический доступ — когда ключ известен только во время выполнения программы

Ключ вычисляется динамически

Например, при переборе ключей или получении ключа из внешнего источника

let config = {
  "font-size": 14,
  "main color": "синий",
  theme: "dark",
  version: "2.0"
};

// Ключи с дефисом/пробелом — только через скобки
console.log(config["font-size"]);  // 14
console.log(config["main color"]); // "синий"

// Динамический ключ через переменную
let key = "theme";
console.log(config[key]); // "dark" — ключ берётся из переменной!

// Это очень мощно: можно динамически выбирать свойство
let fields = ["version", "theme", "font-size"];
for (let field of fields) {
  console.log(field + ":", config[field]);
  // version: 2.0
  // theme: dark
  // font-size: 14
}

🔑 Правило выбора: используйте точку по умолчанию — код чище. Переключайтесь на скобки только когда ключ содержит спецсимволы или хранится в переменной.

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

Иногда важно знать — есть ли у объекта такое свойство вообще, или его нет. Просто проверить obj.key === undefined не всегда надёжно, потому что свойство может существовать, но иметь значение undefined. Для надёжной проверки используем оператор in или метод hasOwnProperty():

let user = {
  name: "Кирилл",
  age: 30,
  score: undefined  // свойство ЕСТЬ, но значение undefined
};

// Оператор in — проверяет наличие ключа
console.log("name" in user);  // true
console.log("email" in user); // false
console.log("score" in user); // true — свойство есть, хотя значение undefined!

// hasOwnProperty — то же самое
console.log(user.hasOwnProperty("name"));  // true
console.log(user.hasOwnProperty("email")); // false

// Просто сравнение с undefined — не надёжно
console.log(user.score === undefined);  // true — хотя свойство ЕСТЬ
console.log(user.email === undefined);  // true — хотя свойства НЕТ

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

Три статических метода, которые возвращают массивы из содержимого объекта. Незаменимы при работе с данными.

let person = {
  name: "Светлана",
  age: 32,
  city: "Москва"
};

// Object.keys — массив ключей
console.log(Object.keys(person)); // ["name", "age", "city"]

// Object.values — массив значений
console.log(Object.values(person)); // ["Светлана", 32, "Москва"]

// Object.entries — массив пар [ключ, значение]
console.log(Object.entries(person));
// [["name", "Светлана"], ["age", 32], ["city", "Москва"]]

// Практический пример: перебор всех свойств
let prices = { яблоко: 50, банан: 80, апельсин: 120 };
let total = 0;
for (let value of Object.values(prices)) {
  total += value;
}
console.log("Итого:", total); // 250

🗑️ Удаление свойства — оператор delete

Чтобы полностью убрать свойство из объекта (не просто поставить undefined, а именно удалить ключ) — используем оператор delete:

let user = {
  name: "Олег",
  age: 25,
  tempToken: "abc123"  // временное поле, нужно удалить перед сохранением
};

console.log("tempToken" in user); // true
console.log(Object.keys(user));   // ["name", "age", "tempToken"]

// Удаляем свойство
delete user.tempToken;

console.log("tempToken" in user); // false — свойства больше нет
console.log(Object.keys(user));   // ["name", "age"]
console.log(user.tempToken);      // undefined

📝 Разница важна: user.tempToken = undefined — свойство осталось, но значение стало undefined. delete user.tempToken — свойство исчезло полностью. Object.keys() больше его не покажет.

🧪 Практика: объект-профиль

// Создаём профиль пользователя
let profile = {
  username: "dev_anna",
  firstName: "Анна",
  lastName: "Иванова",
  age: 24,
  isPremium: true,
  "preferred-lang": "JavaScript"
};

// Читаем через точку (простые ключи)
console.log(profile.username);  // "dev_anna"
console.log(profile.isPremium); // true

// Читаем через скобки (ключ с дефисом)
console.log(profile["preferred-lang"]); // "JavaScript"

// Динамический ключ
let field = "firstName";
console.log(profile[field]); // "Анна"

// Проверяем наличие
console.log("email" in profile);    // false
console.log("isPremium" in profile); // true

// Перечисляем всё что есть
console.log("Свойств всего:", Object.keys(profile).length); // 6

// Удаляем временное поле (например, если нужно передать публично)
let publicProfile = { ...profile }; // копируем
delete publicProfile.isPremium;
console.log("isPremium" in publicProfile); // false

✅ Итоги урока

  • Объект — коллекция пар «ключ: значение» в фигурных скобках {}
  • Доступ через точку: obj.name — читаемо, но только для простых ключей
  • Доступ через скобки: obj["key"] — гибко, нужно для спецсимволов и переменных
  • Проверка наличия: "key" in obj или obj.hasOwnProperty("key")
  • Object.keys() — массив ключей; Object.values() — массив значений
  • Object.entries() — массив пар [ключ, значение]
  • delete obj.key — полностью удалить свойство

В следующем уроке: изменение объектов, вложенные структуры и optional chaining ?.. 🚀

Тест: объекты — свойства и доступ

7 вопросов

Создание профиля пользователя

Напишите функцию createProfile(name, age, city), которая принимает имя, возраст и город, и возвращает объект с этими полями, а также методом getInfo(), который возвращает строку 'Имя: name, Возраст: age, Город: city'.

Сумма числовых свойств объекта

Напишите функцию sumNumericValues(obj), которая принимает объект и возвращает сумму всех его свойств, которые являются числами. Свойства других типов игнорируйте. Используйте for...in.