Объекты: свойства и доступ через точку и скобки
Если массив — это список «один за другим», то объект — это именованная коллекция данных. Вместо индексов 0, 1, 2 — понятные ключи: имя, возраст, email. Объекты — сердце JavaScript.
🗂️ Что такое объект и зачем он нужен
Представьте анкету на нового сотрудника: имя, возраст, должность, зарплата. Как хранить всё это в коде?
Через отдельные переменные — неудобно и не связано:
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 вопросов