Как добавить элемент в массив в JavaScript? (append)

Основные способы добавления элементов в массив

В JavaScript есть несколько способов добавить элементы в массив. Выбор зависит от того, хотите ли вы изменить исходный массив или создать новый.

1. Метод push() — изменение исходного массива

Это самый распространённый и простой способ добавить один или несколько элементов в конец массива. Метод push() изменяет исходный массив и возвращает новую длину массива.

let numbers = [1, 2, 3];
let newLength = numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]
console.log(newLength); // 4

// Добавление нескольких элементов
numbers.push(5, 6, 7);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]

2. Метод unshift() — добавление в начало

Если нужно добавить элемент в начало массива, используйте unshift(). Он также изменяет исходный массив.

let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']

3. Метод concat() — создание нового массива

Метод concat() не изменяет исходный массив, а возвращает новый, объединяя исходные массивы или добавляя элементы. Это важно, если вы работаете с иммутабельными данными (например, в React).

let arr1 = [1, 2];
let arr2 = arr1.concat(3, 4);
console.log(arr1); // [1, 2] — исходный массив не изменился
console.log(arr2); // [1, 2, 3, 4] — новый массив

// Можно объединять массивы
let arr3 = arr1.concat([5, 6], 7);
console.log(arr3); // [1, 2, 5, 6, 7]

4. Оператор spread (ES6+) — современный способ

Синтаксис расширения (spread operator) ... позволяет создавать новый массив, "разворачивая" элементы существующего массива. Это часто используется вместо concat().

let original = [1, 2, 3];
let newArray = [...original, 4, 5];
console.log(newArray); // [1, 2, 3, 4, 5]
console.log(original); // [1, 2, 3] — исходный не изменился

// Можно добавить и в начало
let anotherArray = [0, ...original];
console.log(anotherArray); // [0, 1, 2, 3]

5. Прямое присвоение по индексу

Если вы точно знаете индекс, куда нужно вставить элемент (например, в конец, зная длину массива), можно использовать присвоение:

let arr = [10, 20, 30];
arr[arr.length] = 40;
console.log(arr); // [10, 20, 30, 40]

Но этот способ менее удобен, чем push().

Когда что использовать?

• push() / unshift() — когда нужно изменить исходный массив и добавить один или несколько элементов (например, в цикле или при обработке данных).
• concat() — когда нужно сохранить исходный массив неизменным и получить новый (функциональное программирование).
• Spread оператор — современная альтернатива concat(), особенно удобна при работе с React-состоянием.
• Прямое присвоение — только если вам нужно вставить элемент по конкретному индексу, который вы вычисляете.

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

let colors = ['red', 'green', 'blue'];
// Вставляем 'yellow' на позицию с индексом 1 (между 'red' и 'green')
colors.splice(1, 0, 'yellow');
console.log(colors); // ['red', 'yellow', 'green', 'blue']

// Можно вставить несколько элементов сразу
colors.splice(2, 0, 'pink', 'orange');
console.log(colors); // ['red', 'yellow', 'pink', 'orange', 'green', 'blue']