Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>5 авг 2025</li>

3 <li>0</li>

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

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

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

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

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

9 Содержание

10 <ul><li><a>Что такое объект</a></li>

11 <li><a>Как его создать</a></li>

12 <li><a>Как получить данные из объекта</a></li>

13 <li><a>Изменение объектов</a></li>

14 <li><a>Защита объектов от изменений</a></li>

15 <li><a>Вложенные объекты</a></li>

16 <li><a>Типичные ошибки и как их избежать</a></li>

17 <li><a>Советы по работе с объектами</a></li>

18 </ul>Объект в JavaScript - это набор пар "ключ: значение". Ключ (или свойство) задаёт название характеристики, а значение может быть строкой, числом, логическим значением, массивом, другим объектом или функцией.

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

20 <ul><li>Когда нужно объединить в одной структуре несколько характеристик: имя, возраст и статус пользователя и прочие.</li>

21 <li>Когда важно передать в функцию не длинный список параметров, а один структурированный аргумент.</li>

22 <li>При работе с API: серверы часто отправляют данные в виде объектов - особенно в формате JSON.</li>

23 <li>Когда данные и функции, которые с ними работают, нужно держать вместе (например, в методах объекта).</li>

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

25 const user = { name: "Анна", age: 28, email: "anna@example.com", isActive: true };В этом примере:

26 <ul><li>user - переменная, содержащая объект;</li>

27 <li>name, age, email, isActive - свойства объекта;</li>

28 <li>каждое свойство имеет своё значение: строку, число или логическое значение (true или false).</li>

29 </ul>Теперь все связанные данные хранятся вместе - и их легко получить, изменить или передать туда, куда нужно.

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

31 Пример:

32 const user = { name: "Анна", age: 25, isStudent: true };Здесь мы создаём объект и задаём в нём три свойства:

33 <ul><li>name - имя пользователя,</li>

34 <li>age - возраст,</li>

35 <li>isStudent - учится ли он сейчас.</li>

36 </ul>Каждое свойство записывается в формате "ключ: значение". Ключ (слева) - это название свойства, значение (справа) - что именно хранится. Значения могут быть любого типа: число, строка, логическое значение, массив, другой объект и так далее.

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

38 const user = new Object();Это создаёт пустой объект, в котором пока нет никаких свойств.

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

40 user.name = "Анна"; user.age = 25; user.isStudent = true;Теперь объект user выглядит так же, как если бы вы создали его через литерал.

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

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

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

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

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

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

46 + Пример - с��исок студентов:

47 const users = [ { name: "Алина", age: 19 }, { name: "Марк", age: 20 }, { name: "Юля", age: 18 } ];Каждый элемент - это отдельный объект, и у всех у них одинаковая "форма" (одни и те же поля: name, age).

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

49 users.push({ name: "Иван", age: 21 });Теперь в массиве четыре студента.

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

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

52 const user = { name: "Анна", age: 25 }; console.log(user.name); // "Анна" console.log(user.age); // 25Этот способ работает, если имя свойства - обычное слово без пробелов и специальных символов.

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

54 <ul><li>имя свойства содержит пробелы или спецсимволы,</li>

55 <li>имя свойства хранится в переменной.</li>

56 </ul>const user = { name: "Анна Владимировна", "user role": "admin" }; console.log(user["name"]); // "Анна Владимировна" console.log(user["user role"]); // "admin"Если имя свойства хранится в переменной:

57 const key = "name"; console.log(user[key]); // "Анна Владимировна"Важно:в квадратных скобках имя свойства должно быть в кавычках, если это текст, или без кавычек, если используется переменная.

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

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

60 const user = { name: "Алина", age: 19 }; for (let key in user) { console.log(key); // выводит ключ: name, age console.log(user[key]); // выводит значение: "Алина", 19 }Здесь используется скобочная запись user[key], потому что key - это переменная.

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

62 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() возвращает массив всех значений свойств объекта.

63 const user = { name: "Алина", age: 19 }; const values = Object.values(user); console.log(values); // ["Алина", 19]Метод Object.entries() возвращает массив пар [ключ: значение]. Это удобно, если нужны и ключи, и значения одновременно.

64 const user = { name: "Алина", age: 19 }; for (const [key, value] of Object.entries(user)) { console.log(`${key}: ${value}`); } // name: Алина // age: 19Объекты в JavaScript очень гибкие - вы можете не только читать их свойства, но и в любой момент менять, добавлять, удалять и проверять, есть ли в объекте нужные данные. Все эти действия выполняются буквально в одну строчку.

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

66 const user = { name: "Анна", age: 25 }; user.age = 26; // меняем возраст user.name = "Мария"; // меняем имяЧтобы добавить новое свойство в объект, укажите его имя и присвойте значение:

67 user.city = "Москва"; // Добавляем новое свойство "city"Чтобы полностью удалить свойство, используйте оператор delete:

68 delete user.age; // Удаляем свойство "age"Чтобы узнать, есть ли в объекте какое-то свойство, можно использовать оператор in или метод hasOwnProperty().

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

70 "name" in user; // true (свойство "name" есть) "age" in user; // false (если мы его удалили)Проверяет только собственные свойства объекта,не учитывая прототип.

71 user.hasOwnProperty("city"); // trueОбъекты в JavaScript могут хранить не только данные, но и функции - методы, которые работают с этими данными.

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

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

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

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

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

77 <ul><li>this.name берёт значение свойства name ("Алина").</li>

78 <li>this.age берёт возраст (19).</li>

79 <li>this.group берёт группу ("БИ-01").</li>

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

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

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

83 let user = { name: "Анна" }; // создаём объект user = { name: "Иван" }; // заменяем его на новыйЗдесь всё работает, потому что let разрешает изменять значение переменной.

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

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

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

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

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

89 const user1 = { name: "Анна" }; const user2 = user1; user2.name = "Ольга"; console.log(user1.name); // "Ольга"Здесь user1 и user2 - это переменные, хранящие одну и ту же ссылку. Когда мы меняем user2.name, мы по сути меняем общий объект, доступный и через user1.

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

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

92 const user = { name: "Анна", age: 25 }; Object.seal(user); user.age = 26; // Можно изменить существующее свойство user.city = "Москва"; // Не добавится -- новые свойства запрещены delete user.name; // Не удалится -- удаление свойств запрещено console.log(user); // { name: "Анна", age: 26 }Object.freeze()полностью замораживает объект: нельзя менять, добавлять или удалять свойства.

93 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 позволяет проверить, защищён ли объект:

94 <ul><li>Object.isSealed(obj) - вернёт true, если объект запечатан.</li>

95 <li>Object.isFrozen(obj) - вернёт true, если объект заморожен.</li>

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

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

98 const group = { name: "БИ-01", faculty: "Бизнес-информатика", course: 2 }; const student = { name: "Алина", age: 19, group: group // ссылка на объект группы };Теперь свойство group в объекте student указывает на отдельный объект group.

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

100 const student = { name: "Алина", age: 19, group: { name: "БИ-01", faculty: "Бизнес-информатика", course: 2 } };Чтобы обратиться к свойствам вложенного объекта, используйте точку для каждого уровня:

101 console.log(student.group.name); // "БИ-01" console.log(student.group.faculty); // "Бизнес-информатика"Вы можете добавить второго студента и обновить курс - и он автоматически изменится для всех студентов, потому что они ссылаются на один и тот же объект group.

102 const student2 = { name: "Максим", group: group }; group.course = 3; console.log(student.group.course); // 3 console.log(student2.group.course); // 3Почему это полезно:

103 <ul><li>Можно не повторять одни и те же данные в каждом объекте.</li>

104 <li>Достаточно изменить данные в одном месте, и они обновятся везде.</li>

105 <li>Это свойство помогает строить сложные структуры: студент → группа → факультет → университет.</li>

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

107 const user = { name: "Анна" }; console.log(user.age); // undefinedПочему это происходит: свойства age в объекте нет. JavaScript не выдаёт ошибку, а просто возвращает undefined. Это может сбить с толку и поломать логику программы.

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

109 if ("age" in user) { console.log(user.age); }const key = "name"; console.log(user.key); // undefinedПочему это происходит: user.key ищет свойство с именем "key", а не берёт значение из переменной key.

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

111 console.log(user[key]); // "Анна"const user1 = { name: "Анна" }; const user2 = user1; user2.name = "Иван"; console.log(user1.name); // "Иван"Почему это происходит: user1 и user2 указывают на один и тот же объект. Изменение через user2 затрагивает и user1.

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

113 const user2 = { ...user1 };const student = {}; console.log(student.group.name); // TypeError: Cannot read property 'name' of undefinedПочему это происходит: student.group не существует, и JavaScript не может найти у него свойство name.

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

115 console.log(student.group?.name); // undefinedconst user = { default: "значение" };Что может пойти не так: хотя современные версии JavaScript разрешают это, в старых браузерах или некоторых средах могут возникнуть проблемы.

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

117 const user = { defaultValue: "значение" };Это называется "висячая запятая":

118 const user = { name: "Алиса", age: 30, // ← запятая здесь };Она помогает легко добавлять новые свойства и избегать конфликтов в системах контроля версий.

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

120 const name = "Алиса"; // Вместо const user = { name: name }; // Используйте const user = { name };А для методов можно опустить слово function:

121 const user = { greet() { console.log("Привет!"); } };Чтобы получить список всех ключей или всех значений объекта, используйте:

122 const user = { name: "Алиса", age: 30 }; console.log(Object.keys(user)); // ["name", "age"] console.log(Object.values(user)); // ["Алиса", 30"]Если в объекте появились свойства с undefined, их лучше удалить, чтобы не хранить пустые данные.

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

124 const obj1 = { a: 1 }; const obj2 = { b: 2 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // { a: 1, b: 2 }Храните данные и методы отдельно. Например, данные юзера и пользовательские настройки:

125 const settings = { theme: "dark", language: "en" }; const user = { name: "Алиса", settings: settings }; console.log(user.settings.theme); // "dark"Задача: есть массив объектов-студентов. Нужно получить новый массив, в котором будут только их имена.

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

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

128 let names = []; // создаём пустой массив для имён // перебираем всех студентов for (let student of students) { // берём имя студента и добавляем его в массив names names.push(student.name); } console.log(names); // ["Анна", "Марк", "Юля"]Что здесь происходит:

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

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

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

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

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

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

135 const user = { name: "Иван", age: 30, isAdmin: true };Решение:

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

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

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

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

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

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

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

143 let config = { theme: "dark", language: undefined, debug: true, version: undefined };Решение:

144 for (let key in config) { if (config[key] === undefined) { delete config[key]; // удаляем свойство } } console.log(config); // { theme: "dark", debug: true }Что здесь происходит:

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

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

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

148 <ul><li><a>Методы библиотеки Lodash для работы с объектами, в том числе метод lodash.cloneDeep() для глубокого копирования объектов, содержащих функции, методы, массивы, даты и вложенные структуры</a></li>

149 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>