1. Array.push() method
The push() method of an array is used to add items to the end of an array.
const fruits = ['🍎 Apple', '🍌 Banana'];
fruits.push('🍍 Pineapple');
console.log(fruits);[ '🍎 Apple', '🍌 Banana', '🍍 Pineapple' ]Array.unshift() method
You can use the Array.unshift() method as the alternative to the push() method, but the unshift() method will append items at the beginning of an array.
const fruits = ['🍎 Apple', '🍌 Banana'];
fruits.unshift('🍍 Pineapple');
console.log(fruits);[ '🍍 Pineapple', '🍎 Apple', '🍌 Banana' ]2. Append items to a specific position of an array
With the help of the length (index number), you can append items to a specific place of an array.
const fruits = ['🍋 Lemon', '🍇 Grapes'];
fruits[2] = '🥭 Mango';
console.log(fruits);[ '🍋 Lemon', '🍇 Grapes', '🥭 Mango' ]In the above examples, we added items to an array in the Mutative way, which means the original array has changed.
Now we will see Non-Mutative ways to append array items, which means the original array remains unchanged.
3. Array.concat() method
Array.concat() returns a new array with the added items, it does not modify the original array.
const fruits = ['🍋 Lemon', '🍇 Grapes'];
const newFruits = fruits.concat('🥭 Mango');
console.log(fruits);
console.log(newFruits);[ '🍋 Lemon', '🍇 Grapes' ]
[ '🍋 Lemon', '🍇 Grapes', '🥭 Mango' ]Add multiple items at once
This Array.concat() method can add multiple items to an array at once.
Example 1
const fruits = ['🍋 Lemon', '🍇 Grapes'];
const newFruits = fruits.concat('🥭 Mango', '🍉 Watermelon');
console.log(fruits);
console.log(newFruits);[ '🍋 Lemon', '🍇 Grapes' ]
[ '🍋 Lemon', '🍇 Grapes', '🥭 Mango', '🍉 Watermelon' ]Example 2
const fruits = ['🍋 Lemon', '🍇 Grapes'];
const fruits2 = ['🥭 Mango', '🍉 Watermelon'];
const newFruits = fruits.concat(fruits2);
// Shorthand
// const newFruits = fruits.concat(['🥭 Mango', '🍉 Watermelon']);
console.log(fruits);
console.log(newFruits);[ '🍋 Lemon', '🍇 Grapes' ]
[ '🍋 Lemon', '🍇 Grapes', '🥭 Mango', '🍉 Watermelon' ]4. Spread Operator
The elements of an array can be spread into another array by using the spread (...) operator. So we can use this spread operator to merge two or more arrays.
const fruits = ['🍒 Cherries', '🍑 Peach'];
const newFruits = [
...fruits,
'🥝 Kiwi',
'🍓 Strawberry'
];
console.log(fruits);
console.log(newFruits);[ '🍒 Cherries', '🍑 Peach' ]
[ '🍒 Cherries', '🍑 Peach', '🥝 Kiwi', '🍓 Strawberry' ]const fruits = ['🍒 Cherries', '🍑 Peach'];
const fruits2 = ['🥝 Kiwi', '🍓 Strawberry']
const newFruits = [
...fruits,
...fruits2
];
console.log(fruits);
console.log(newFruits);[ '🍒 Cherries', '🍑 Peach' ]
[ '🍒 Cherries', '🍑 Peach', '🥝 Kiwi', '🍓 Strawberry' ]Arrays in arrays are also reference types of data
Arrays in arrays are also reference types of data, so when you work with multidimensional arrays, the original array may be affected.
const num = [1, 2, [3, 4], 5];
const num2 = num.concat(6, 7);
num2[1] = 35;
num2[2][0] = 45;
console.log(num);
console.log(num2);[ 1, 2, [ 45, 4 ], 5 ]
[ 1, 35, [ 45, 4 ], 5, 6, 7 ]
