Как добавить объект в массив JavaScript: push, spread и jQuery

Чтобы добавить объект в массив JavaScript, вызовите push(): users.push({ id: 2, name: 'Борис' }). Метод кладёт объект в конец массива и возвращает новую длину. Для начала массива есть unshift(), для середины splice(), а если исходный массив трогать нельзя, соберите новый через spread: [...users, obj].

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

Ниже разобрали основные способы с реальным выводом консоли, вариант для jQuery, добавление свойства в сам объект и ошибки, на которых чаще всего теряют время. Если вы только выбираете, куда расти в JavaScript, начните с обзора профессии JavaScript-разработчика.

Все примеры мы запускали в Node.js 25 и в браузерной консоли, вывод скопирован из терминала. Удобнее всего повторять их в редакторе со встроенным терминалом, подборка таких есть в статье про IDE для веб-разработки.

Рекомендуем курсы по Javascript

• Skillbox9.8 ★JavaScript63 829 ₽3 месяца
• OTUS9.7 ★Fullstack разработчик JavaScript75 000 ₽6 месяцев
• GeekBrains9.7 ★Факультет fullstack JavaScript134 700 ₽15 месяцев
• Эдюсон9.6 ★Fullstack-разработчик на JavaScript158 760 ₽11 месяцев
• Hexlet9.6 ★Автоматизатор тестирования на JavaScript60 000 ₽6 месяцев
• TeachMeSkills9.6 ★Автоматизированное тестирование на JavaScript80 000 ₽4 месяца

Все 209 курсов→

Как добавить объект в конец массива методом push

Это основной способ, и в большинстве задач его хватает. Порядок действий:

1. Объявите массив, даже пустой: const users = [];.
2. Передайте в push() объект целиком, литералом или переменной.
3. Если нужен результат, сохраните его: метод вернёт новую длину массива, а не сам массив.

const users = [{ id: 1, name: 'Анна' }];
const length = users.push({ id: 2, name: 'Борис' });
console.log(length);
console.log(users);

// 2
// [ { id: 1, name: 'Анна' }, { id: 2, name: 'Борис' } ]

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

users.push({ id: 2, name: 'Борис' }, { id: 3, name: 'Вера' });
console.log(users.length); // 3

Поведение описано в справке MDN по Array.prototype.push(). Метод работает во всех браузерах с 2015 года, полифилы не нужны.

Обратите внимание: const не мешает вызвать push(). Константа запрещает присвоить переменной другой массив, а менять содержимое того же массива можно.

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

Для начала массива есть unshift(), он работает так же, как push(), только с другой стороны. Для вставки по индексу нужен splice(индекс, 0, объект): ноль во втором аргументе значит «ничего не удалять».

const users = [{ id: 2, name: 'Борис' }];
users.unshift({ id: 1, name: 'Анна' });
users.splice(1, 0, { id: 99, name: 'Вера' });
console.log(users.map(u => u.name));

// [ 'Анна', 'Вера', 'Борис' ]

На больших массивах unshift() и splice() работают медленнее, чем push(): движку приходится сдвигать индексы у всех элементов правее точки вставки. На списке из сотни записей разницы не заметить, на сотнях тысяч она уже есть.

Как добавить объект, не меняя исходный массив

Иногда исходный массив менять нельзя. Так устроено состояние в React и Redux: интерфейс перерисуется, только если вы передадите новый массив, а не изменённый старый. Подробнее о том, где это пригодится в работе, мы писали в статье про React-разработчика, а программы обучения собраны в каталоге курсов по React.

Новый массив собирают тремя способами:

const users = [{ id: 1, name: 'Анна' }];
const next = [...users, { id: 2, name: 'Борис' }];
const withConcat = users.concat({ id: 3, name: 'Вера' });
console.log(users.length, next.length, withConcat.length);

const middle = next.toSpliced(1, 0, { id: 7, name: 'Глеб' });
console.log(middle.map(u => u.name));

// 1 2 2
// [ 'Анна', 'Глеб', 'Борис' ]

• Spread [...arr, obj] читается проще всего, синтаксис описан в справке MDN по spread.
• concat() делает то же самое и встречается в старом коде.
• toSpliced() вставляет по индексу без мутации, это метод из стандарта ES2023, его описание есть на MDN. В старых браузерах его нет, там подойдёт spread с slice().

Новый массив при этом содержит те же объекты, а не их копии. Поменяете свойство у next[0], и оно поменяется в users[0]. Как с этим быть, разобрали в разделе об ошибках.

Как добавить объект в массив через jQuery

Отдельного метода для этого в jQuery нет, и он не нужен: массив в jQuery-коде остаётся обычным массивом JavaScript, и push() работает так же. Библиотека пригодится, когда объектов много или их надо слить из другого массива.

const users = [{ id: 1, name: 'Анна' }];
users.push({ id: 2, name: 'Борис' });

$.merge(users, [{ id: 3, name: 'Вера' }, { id: 4, name: 'Глеб' }]);
console.log(users.length); // 4

$.each([{ id: 5 }, { id: 6 }], function (i, obj) {
  users.push(obj);
});
console.log(users.length); // 6

По документации jQuery, $.merge() дописывает элементы второго массива в первый и меняет его. Нужна копия, тогда первым аргументом передайте пустой массив: $.merge([], users). Проверяли на jQuery 4.0.0, вышедшей в январе 2026 года, и на ветке 3.7.

Не путайте массив объектов с jQuery-коллекцией. Метод .add() добавляет в выборку элементы страницы, а не объекты с данными. Как устроены эти элементы, объясняем в статье про DOM-дерево.

CheckroiПодборка курсов для Frontend-разработчиков109 курсов • 29 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как добавить свойство в объект

Часто под «добавить объект» имеют в виду другую задачу: дописать новое поле в уже существующий объект. Есть четыре записи:

const user = { name: 'Анна' };
user.age = 28;              // через точку
user['city'] = 'Казань';    // через скобки
const key = 'role';
user[key] = 'admin';        // имя свойства в переменной
console.log(user);

// { name: 'Анна', age: 28, city: 'Казань', role: 'admin' }

const updated = { ...user, age: 29 };              // новый объект
Object.assign(user, { email: 'anna@example.com' }); // дописать в старый
console.log(updated.age, user.age, Object.keys(user).length);

// 29 28 5

Точка подходит, когда имя свойства известно заранее. Квадратные скобки нужны, если имя лежит в переменной или содержит пробел или дефис. В jQuery-проектах ту же работу делает $.extend(user, { age: 28 }): он, как и Object.assign(), меняет первый объект, подробности в описании метода.

Объекты из API чаще всего приходят в формате JSON и после разбора становятся обычными объектами, к которым свойства добавляются так же. Какие навыки ещё нужны для работы с данными на фронтенде, перечислили в статье о навыках веб-разработчика.

CheckroiПодборка курсов по Javascript209 курсов • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Частые ошибки и что с ними делать

В массиве три одинаковых объекта вместо трёх разных

Частая история с циклом: объект создали один раз снаружи, а внутри только меняли поле и вызывали push(). В массив трижды попала ссылка на один и тот же объект, и все элементы показывают последнее значение.

const list = [];
const item = { qty: 0 };
for (let i = 1; i <= 3; i++) {
  item.qty = i;
  list.push(item);
}
console.log(list); // [ { qty: 3 }, { qty: 3 }, { qty: 3 } ]

Решение: создавайте объект внутри цикла, list.push({ qty: i }). Тогда вывод будет [ { qty: 1 }, { qty: 2 }, { qty: 3 } ].

Вместо двух объектов добавился вложенный массив

cart.push(extra), где extra тоже массив, кладёт его целиком одним элементом. Длина вырастет на один, а не на число объектов.

Решение: разверните массив, cart.push(...extra). В нашем примере с двумя товарами в корзине и двумя добавочными длина стала 4, а без spread была 3.

RangeError на большом массиве

Spread в аргументах функции передаёт каждый элемент отдельным аргументом, а у движка есть предел. В Node.js 25, на котором пишут серверную часть (о ней в статье про Node.js-разработчика), вызов target.push(...big) на 500 000 объектов упал с ошибкой RangeError: Maximum call stack size exceeded.

Решение: для больших массивов используйте target = target.concat(big) или обычный цикл for…of с push().

Длина массива выросла, а элементов нет

Запись arr[5] = obj в массив из одного элемента даёт длину 6 и четыре пустые ячейки. arr[3] вернёт undefined, а forEach такие дыры пропустит.

Решение: в конец добавляйте через push() или arr[arr.length] = obj, а не по угаданному индексу.

Поменяли копию, а изменился оригинал

Spread, concat() и $.merge([], arr) копируют только сам массив. Объекты внутри остаются общими, и правка вложенного списка тегов в копии видна в исходнике.

const original = [{ id: 1, tags: ['a'] }];
const shallow = [...original];
shallow[0].tags.push('b');
console.log(original[0].tags); // [ 'a', 'b' ] — оригинал тоже изменился

const deep = structuredClone(original);
deep[0].tags.push('c');
console.log(original[0].tags, deep[0].tags);

// [ 'a', 'b' ] [ 'a', 'b', 'c' ]

Решение: для полной копии используйте structuredClone(), он работает во всех основных браузерах с марта 2022 года, это видно в таблице совместимости MDN. Функции и DOM-элементы он не копирует, для таких объектов нужна своя логика.

Старый приём JSON.parse(JSON.stringify(arr)) тоже даёт полную копию, но превращает даты в строки и выбрасывает поля со значением undefined. Почему так выходит, понятно из устройства формата JSON.

В массиве появились дубли

push() не проверяет, есть ли такой объект в массиве. Два одинаковых объекта для JavaScript разные, потому что сравниваются ссылки, а не содержимое.

function addUnique(arr, obj) {
  if (!arr.some(x => x.id === obj.id)) arr.push(obj);
  return arr;
}

Решение: сравнивайте по ключу, например по id, через метод some(). Когда записей тысячи, быстрее хранить их в Map с ключом id.

После обновления jQuery код упал на $.isArray

В jQuery 4.0.0 удалили $.isArray, $.trim, $.parseJSON и ещё десяток устаревших функций, список есть в анонсе релиза. Проверка «массив ли это» перед push() теперь выдаёт TypeError.

Решение: замените вызов на Array.isArray(arr). $.merge(), $.extend() и $.each() в четвёртой версии остались.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Какой способ выбрать

Если вы пишете на TypeScript, добавьте тип массива при объявлении, const users: User[] = []. Тогда редактор сразу подсветит объект без обязательного поля, и ошибка не дойдёт до запуска.

CheckroiПодборка курсов по React.js63 курса • 19 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Где освоить JavaScript системно

Массивы и объекты встречаются в любой задаче фронтенда: корзина магазина, лента сообщений, таблица из API. Если такие вопросы возникают каждый день, быстрее пройти язык по порядку, чем искать ответ на каждый отдельно. Что ещё нужно уметь на старте, расписано по месяцам в плане как стать фронтенд-разработчиком.

Ниже курсы из каталога по JavaScript, отсортированные по рейтингу. Больше программ по профессии собрано в разделе курсов фронтенд-разработчика.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
JavaScript Перейти на сайт курса	Skillbox	63 829 ₽	4086 ₽/мес.	3 месяца	Обзор курса
Fullstack разработчик JavaScript Перейти на сайт курса	OTUS	75 000 ₽	20 000 ₽/мес.	6 месяцев	Обзор курса
Факультет fullstack JavaScript Перейти на сайт курса	GeekBrains	134 700 ₽	3742 ₽/мес.	15 месяцев	Обзор курса
Fullstack-разработчик на JavaScript Перейти на сайт курса	Эдюсон	158 760 ₽	6615 ₽/мес.	11 месяцев	Обзор курса
Фулстек-разработчик на JavaScript Перейти на сайт курса	Skillbox	153 348 ₽	4296 ₽/мес.	11 месяцев	Обзор курса

• 

  JavaScript

  Skillbox63 829 ₽4086 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  Fullstack разработчик JavaScript

  OTUS75 000 ₽20 000 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор
• 

  Факультет fullstack JavaScript

  GeekBrains134 700 ₽3742 ₽/мес15 месяцев
  Перейти на сайт курсаОбзор
• 

  Fullstack-разработчик на JavaScript

  Эдюсон158 760 ₽6615 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Фулстек-разработчик на JavaScript

  Skillbox153 348 ₽4296 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Javascript