Объекты в JavaScript: создание, свойства и методы
2026-02-21 12:03 Diff
https://skillbox.ru/media/code/javascript-objects/

#статьи

  • 5 авг 2025
  • 0

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

Иллюстрация: Polina Vari для Skillbox Media

Автор статей о программировании. 14 лет в IT. Умеет рассказывать о технологиях простыми словами. Автор спецпроекта Advertising for Social Change.

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

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

Содержание

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

const user = new Object();

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

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

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

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

Чем конструктор отличается от литерала

Литерал — это краткая форма, при которой объект сразу заполняется внутри фигурных скобок.

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

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

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

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

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

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

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

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

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

После того как объект создан, следующий шаг — доступ к его данным. В 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]); // "Анна Владимировна"

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

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

Цикл 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 — это переменная.

Метод 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 });

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

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

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

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

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

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

const user = { name: "Анна", age: 25 }; user.age = 26; // меняем возраст user.name = "Мария"; // меняем имя

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

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

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

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

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

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

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

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

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 user = { name: "Анна" }; // создаём объект user = { name: "Иван" }; // заменяем его на новый

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

Если вы использовали 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.

Чтобы запретить изменения самого объекта, используйте методы 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 объект может хранить внутри себя другие объекты. Это позволяет строить более сложные структуры и связывать их между собой. Такой подход помогает избежать повторов одинаковых данных. Если изменить что-то в одном месте, изменения сразу будут видны везде, где используется этот объект.

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

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

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

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

Новичку легко запутаться в объектах 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); // undefinedconst user = { default: "значение" };

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

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

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

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

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, их лучше удалить, чтобы не хранить пустые данные.

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

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"

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

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

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); // ["Анна", "Марк", "Юля"]

Что здесь происходит:

1. Мы создаём пустой массив names, куда будем складывать имена.

2. С помощью цикла for...of проходим по каждому элементу массива students.

3. В каждой итерации берём имя из объекта student (student.name) и добавляем его в массив names.

4. После цикла в names остаются только имена студентов.

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

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

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

Решение:

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

Что здесь происходит:

1. Создаём переменную count и даём ей значение 0.

2. С помощью for...in перебираем все ключи (имена свойств) в объекте user.

3. Каждый раз, когда находим свойство, увеличиваем count на 1.

4. После цикла в count хранится количество свойств.

Задача: есть объект 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 }

Что здесь происходит:

1. Цикл for...in перебирает все свойства объекта config.

2. Внутри цикла проверяем: если значение свойства равно undefined, удаляем его с помощью delete.

3. После цикла в config остаются только свойства с нормальными значениями.

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе