Объекты в JavaScript: создание, свойства и методы

В JavaScript объекты помогают описывать всё, что состоит из нескольких характеристик. Пользователь с именем, возрастом и email — это объект. Товар с ценой, описанием и наличием на складе — тоже.

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

Содержание

1. Что такое объект
2. Как его создать
3. Как получить данные из объекта
4. Изменение объектов
5. Защита объектов от изменений
6. Вложенные объекты
7. Типичные ошибки и как их избежать
8. Советы по работе с объектами

Что такое объект

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

Объекты используют, например:

• Когда нужно объединить в одной структуре несколько характеристик: имя, возраст и статус пользователя и прочие.
• Когда важно передать в функцию не длинный список параметров, а один структурированный аргумент.
• При работе с API: серверы часто отправляют данные в виде объектов — особенно в формате JSON.
• Когда данные и функции, которые с ними работают, нужно держать вместе (например, в методах объекта).

Посмотрим, как выглядит объект в коде:

const user = {
  name: "Анна",
  age: 28,
  email: "anna@example.com",
  isActive: true
};

В этом примере:

• user — переменная, содержащая объект;
• name, age, email, isActive — свойства объекта;
• каждое свойство имеет своё значение: строку, число или логическое значение (true или false).

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

Как создать объект в JavaScript

В JavaScript есть простой способ создать объект — через литерал. Это специальная форма записи, где объект описывается с помощью фигурных скобок {}.

Пример:

const user = {
  name: "Анна",
  age: 25,
  isStudent: true
};

Здесь мы создаём объект и задаём в нём три свойства:

• name — имя пользователя,
• age — возраст,
• isStudent — учится ли он сейчас.

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

Читайте также:

Как запустить JavaScript-код: в браузере, консоли и редакторе кода

Альтернативный способ: через new Object()

В JavaScript можно создать объект с помощью специального встроенного конструктора — Object. Для этого используют ключевое слово new:

const user = new Object();

Это создаёт пустой объект, в котором пока нет никаких свойств.

Дальше вы можете добавить в него нужные данные:

user.name = "Анна";
user.age = 25;
user.isStudent = true;

Теперь объект user выглядит так же, как если бы вы создали его через литерал.

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

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

Массив объектов — структура, где каждый элемент является полноценным объектом со своими свойствами.

Пример — список студентов:

const users = [
  { name: "Алина", age: 19 },
  { name: "Марк", age: 20 },
  { name: "Юля", age: 18 }
];

Каждый элемент — это отдельный объект, и у всех у них одинаковая «форма» (одни и те же поля: name, age).

Для добавления нового объекта в массив используйте метод .push():

users.push({ name: "Иван", age: 21 });

Теперь в массиве четыре студента.

Читайте также:

Методы массивов в JavaScript: объясняем на пальцах для новичков

Как получить данные из объекта и работать со свойствами

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

Точечная запись

Это самый распространённый и простой способ. Вы пишете имя объекта, ставите точку и указываете название свойства:

const user = {
  name: "Анна",
  age: 25
};

console.log(user.name); // "Анна"
console.log(user.age);  // 25

Этот способ работает, если имя свойства — обычное слово без пробелов и специальных символов.

Квадратные скобки

Квадратные скобки нужны, если:

• имя свойства содержит пробелы или спецсимволы,
• имя свойства хранится в переменной.

const user = {
  name: "Анна Владимировна",
  "user role": "admin"
};

console.log(user["name"]);        // "Анна Владимировна"
console.log(user["user role"]);   // "admin"

Если имя свойства хранится в переменной:

const key = "name";
console.log(user[key]); // "Анна Владимировна"

Перебираем свойства объекта

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

Способ 1. for...in

Цикл for...in перебирает все ключи (имена свойств) объекта по одному. Для каждого свойства внутри цикла можно получить его значение, используя квадратные скобки.

const user = {
  name: "Алина",
  age: 19
};

for (let key in user) {
  console.log(key);           // выводит ключ: name, age
  console.log(user[key]);  // выводит значение: "Алина", 19
}

Здесь используется скобочная запись user[key], потому что key — это переменная.

Читайте также:

Циклы в JavaScript: какие бывают, чем различаются и зачем нужны

Способ 2. Object.keys()

Метод Object.keys() возвращает массив всех ключей объекта. Этот массив можно обойти любым методом массивов, например forEach или map.

const user = { name: "Алина", age: 19 };
const keys = Object.keys(user);

keys.forEach(key => {
  console.log(key);        // "name", "age"
  console.log(user[key]);  // "Алина", 19
});

Способ 3. Object.values()

Метод Object.values() возвращает массив всех значений свойств объекта.

const user = { name: "Алина", age: 19 };
const values = Object.values(user);
console.log(values); // ["Алина", 19]

Способ 4. Object.entries()

Метод Object.entries() возвращает массив пар [ключ, значение]. Это удобно, если нужны и ключи, и значения одновременно.

const user = { name: "Алина", age: 19 };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Алина
// age: 19

Изменение объектов в JavaScript

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

Изменение существующих свойств

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

const user = {
  name: "Анна",
  age: 25
};

user.age = 26; // меняем возраст
user.name = "Мария"; // меняем имя

Добавление новых свойств

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

user.city = "Москва"; // Добавляем новое свойство "city"

Удаление свойств

Чтобы полностью удалить свойство, используйте оператор delete:

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

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

Чтобы узнать, есть ли в объекте какое-то свойство, можно использовать оператор in или метод hasOwnProperty().

Способ 1. Оператор in.

Проверяет, существует ли свойство с таким именем в самом объекте или в его прототипе.

"name" in user; // true (свойство "name" есть)
"age" in user;  // false (если мы его удалили)

Способ 2. Метод hasOwnProperty().

Проверяет только собственные свойства объекта, не учитывая прототип.

user.hasOwnProperty("city"); // true

Добавление методов к объектам

Объекты в JavaScript могут хранить не только данные, но и функции — методы, которые работают с этими данными.

В примере ниже объект объект student хранит данные о студенте и умеет печатать их в консоль.

const student = {
  name: "Алина",
  age: 19,
  group: "БИ-01",
  printInfo() {
    console.log(`Студент: ${this.name}, возраст: ${this.age}, группа: ${this.group}`);
  }
};

student.printInfo();
// Студент: Алина, возраст: 19, группа: БИ-01

Что происходит:

1. Объект student хранит три свойства: name, age и group.

2. Внутри него мы добавили метод printInfo. Это функция, которая может обращаться к свойствам объекта.

3. Ключевое слово this в методе указывает на сам объект student.

• this.name берёт значение свойства name ("Алина").
• this.age берёт возраст (19).
• this.group берёт группу ("БИ-01").

4. Метод выводит все эти данные в консоль в удобном виде.

Защита объектов от изменений

В JavaScript переменные можно создавать с помощью let или const. Но важно понимать: эти ключевые слова управляют только тем, можно ли поменять саму переменную на что-то другое. Они не делают сам объект внутри переменной неизменяемым.

let: переменную можно переназначить

Если объявить переменную с let, вы сможете в любой момент присвоить ей другой объект.

let user = { name: "Анна" }; // создаём объект
user = { name: "Иван" };     // заменяем его на новый

Здесь всё работает, потому что let разрешает изменять значение переменной.

const: переменную нельзя переназначить, но объект внутри — изменяемый

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

const user = { name: "Анна" };

// Изменяем свойство объекта -- это можно
user.name = "Иван"; 

// Пытаемся заменить объект на новый -- это ошибка
user = { name: "Пётр" }; // Ошибка: нельзя переназначить переменную

Почему так: const блокирует только саму переменную — она всегда ссылается на один и тот же объект. Но свойства этого объекта можно менять.

Объекты в JavaScript — ссылочные типы: при присваивании копируется не сам объект, а ссылка на него. Поэтому даже при использовании const можно изменять содержимое объекта. Это означает, что при присваивании объекта в новую переменную копируется не сам объект, а ссылка на него — то есть указание на одну и ту же область памяти.

Это как Google-документ: когда вы делитесь ссылкой с коллегами, то все, у кого есть эта ссылка, работают с одним и тем же документом. Если кто-то внесёт правки, их увидят все.

Поэтому, даже если объект объявлен через const, его содержимое всё равно можно изменить, потому что const защищает только саму ссылку, но не данные по этой ссылке.

const user1 = { name: "Анна" };
const user2 = user1;

user2.name = "Ольга";

console.log(user1.name); // "Ольга"

Здесь user1 и user2 — это переменные, хранящие одну и ту же ссылку. Когда мы меняем user2.name, мы по сути меняем общий объект, доступный и через user1.

Читайте также:

Чем различаются var, let и const в JavaScript

Как защитить объект от изменений

Чтобы запретить изменения самого объекта, используйте методы Object.freeze() или Object.seal().

Object.seal() как бы «запечатывает» объект: нельзя добавлять или удалять свойства, но можно менять существующие значения.

const user = {
  name: "Анна",
  age: 25
};

Object.seal(user);

user.age = 26;          // Можно изменить существующее свойство
user.city = "Москва";   // Не добавится -- новые свойства запрещены
delete user.name;       // Не удалится -- удаление свойств запрещено

console.log(user);
// { name: "Анна", age: 26 }

Object.freeze() полностью замораживает объект: нельзя менять, добавлять или удалять свойства.

const settings = {
  theme: "dark",
  language: "ru"
};

Object.freeze(settings);

settings.theme = "light";   // Не изменится
settings.mobile = true;     // Не добавится
delete settings.language;   // Не удалится

console.log(settings);
// { theme: "dark", language: "ru" }

А ещё — JavaScript позволяет проверить, защищён ли объект:

• Object.isSealed(obj) — вернёт true, если объект запечатан.
• Object.isFrozen(obj) — вернёт true, если объект заморожен.

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

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

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

const group = {
  name: "БИ-01",
  faculty: "Бизнес-информатика",
  course: 2
};

const student = {
  name: "Алина",
  age: 19,
  group: group // ссылка на объект группы
};

Теперь свойство group в объекте student указывает на отдельный объект group.

Если данные о группе нужны только в одном объекте, их можно сразу вставить в свойство group и не создавать отдельную переменную:

const student = {
  name: "Алина",
  age: 19,
  group: {
    name: "БИ-01",
    faculty: "Бизнес-информатика",
    course: 2
  }
};

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

console.log(student.group.name); // "БИ-01"
console.log(student.group.faculty); // "Бизнес-информатика"

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

const student2 = {
  name: "Максим",
  group: group
};

group.course = 3;

console.log(student.group.course); // 3
console.log(student2.group.course); // 3

Почему это полезно:

• Можно не повторять одни и те же данные в каждом объекте.
• Достаточно изменить данные в одном месте, и они обновятся везде.
• Это свойство помогает строить сложные структуры: студент → группа → факультет → университет.

Типичные ошибки при работе с объектами в JavaScript

Новичку легко запутаться в объектах JS. Особенно часто ошибки возникают при получении данных, копировании объектов или работе с вложенными свойствами. Ниже — самые распространённые ошибки и способы их избежать.

Обращение к свойству, которого нет

const user = { name: "Анна" };
console.log(user.age); // undefined

Почему это происходит: свойства age в объекте нет. JavaScript не выдаёт ошибку, а просто возвращает undefined. Это может сбить с толку и поломать логику программы.

Правильный вариант: проверьте, есть ли такое свойство, перед тем, как его использовать.

if ("age" in user) {
  console.log(user.age);
}

Точечная запись вместо квадратных скобок

const key = "name";
console.log(user.key); // undefined

Почему это происходит: user.key ищет свойство с именем "key", а не берёт значение из переменной key.

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

console.log(user[key]); // "Анна"

Копирование объекта через присваивание

const user1 = { name: "Анна" };
const user2 = user1;

user2.name = "Иван";

console.log(user1.name); // "Иван"

Почему это происходит: user1 и user2 указывают на один и тот же объект. Изменение через user2 затрагивает и user1.

Правильный вариант: создайте новую копию объекта.

const user2 = { ...user1 };

Нет проверки для вложенных свойств

const student = {};
console.log(student.group.name); 
// TypeError: Cannot read property 'name' of undefined

Почему это происходит: student.group не существует, и JavaScript не может найти у него свойство name.

Правильный вариант: используйте оператор опциональной цепочки ?., чтобы избежать ошибки.

console.log(student.group?.name); // undefined

Использование зарезервированных слов в качестве имён свойств

const user = {
  default: "значение"
};

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

Совет: лучше избегать зарезервированных слов и выбрать другое имя, например:

const user = {
  defaultValue: "значение"
};

Советы и лайфхаки для работы с объектами в JavaScript

Ставьте запятую после последнего свойства

Это называется «висячая запятая»:

const user = {
  name: "Алиса",
  age: 30, // ← запятая здесь
};

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

Используйте сокращённую запись свойств и методов

Если имя переменной совпадает с именем свойства, можно не указывать его второй раз:

const name = "Алиса";

// Вместо
const user = { name: name };

// Используйте
const user = { name };

А для методов можно опустить слово function:

const user = {
  greet() {
    console.log("Привет!");
  }
};

Получайте ключи и значения объекта быстро

Чтобы получить список всех ключей или всех значений объекта, используйте:

const user = { name: "Алиса", age: 30 };

console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Алиса", 30"]

Удаляйте свойства со значением undefined

Если в объекте появились свойства с undefined, их лучше удалить, чтобы не хранить пустые данные.

Объединяйте объекты с помощью ...

Оператор распространения (...) позволяет собрать несколько объектов в один:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };

console.log(merged); // { a: 1, b: 2 }

Разделяйте данные и логику

Храните данные и методы отдельно. Например, данные юзера и пользовательские настройки:

const settings = {
  theme: "dark",
  language: "en"
};

const user = {
  name: "Алиса",
  settings: settings
};

console.log(user.settings.theme); // "dark"

Практика: тренируемся работать с объектами в JavaScript

Упражнение 1. Получить список имён студентов

Задача: есть массив объектов-студентов. Нужно получить новый массив, в котором будут только их имена.

Исходный массив:

const students = [
  { name: "Анна", age: 20 },
  { name: "Марк", age: 22 },
  { name: "Юля", age: 19 }
];

let names = []; // создаём пустой массив для имён

// перебираем всех студентов
for (let student of students) {
  // берём имя студента и добавляем его в массив names
  names.push(student.name);
}

console.log(names); // ["Анна", "Марк", "Юля"]

Упражнение 2. Подсчёт количества свойств у объекта

Задача: есть объект user. Нужно посчитать, сколько в нём свойств.

Исходный объект:

const user = {
  name: "Иван",
  age: 30,
  isAdmin: true
};

let count = 0; // начинаем с нуля

// перебираем все свойства объекта
for (let key in user) {
  count++; // увеличиваем счётчик на 1 для каждого свойства
}

console.log(count); // 3

Упражнение 3. Удаление свойств со значением undefined

Задача: есть объект config. Нужно удалить все свойства, у которых значение равно undefined.

Исходный объект:

let config = {
  theme: "dark",
  language: undefined,
  debug: true,
  version: undefined
};

for (let key in config) {
  if (config[key] === undefined) {
    delete config[key]; // удаляем свойство
  }
}

console.log(config);
// { theme: "dark", debug: true }