Adding Elements to an array with the Spread Operator in JavaScript

In JavaScript, the spread operator (...) is a powerful tool that allows you to easily work with arrays and objects. When it comes to adding new elements to an existing array using the spread operator, you can place the new element at the front (beginning) or the end of the array.

Adding Elements to the Front of an Array

If you want to add an element at the beginning of an array, you can use the spread operator like below.

 

// Add Elements to the beginning of the array
let originalArray = [3, 4, 5, 6];
let newArray = [1, 2, ...originalArray];

 

The ...originalArray takes the elements from originalArray (which are [3, 4, 5, 6]) and spreads them into the new array. By placing 1, 2 before the spread, you insert 1 and 2 at the front of the new array.

 

The spread operator in the examples provided is immutable, meaning it does not modify the original array. Instead, it creates a new array that includes the elements of the original array plus any new elements you add.

 

Adding Elements to the End of an Array

To add an element at the end of an array, you simply place the spread operator at the front and the new elements at the end.

let originalArray = [3, 4, 5, 6];
let newArray = [...originalArray, 7, 8]; // newArray contain values 3,4,5,6,7,8

 

The spread operator ...originalArray takes the original array’s elements ([3, 4, 5, 6]) and spreads them into the new array. Then, by placing 7, 8 after the spread, you add 7 and 8 at the end of the array.

 

Find the below working application.

 

addElements.js

 

console.log("Adding Elements to the beginning of the array");
let originalArray = [3, 4, 5, 6];
let newArray = [1, 2, ...originalArray]; // newArray contain values 1,2,3,4,5,6
console.log(`originalArray : ${originalArray}`);
console.log(`newArray : ${newArray}`);

console.log("\nAdding Elements at the end of the Array");
originalArray = [3, 4, 5, 6];
newArray = [...originalArray, 7, 8]; // newArray contain values 3,4,5,6,7,8
console.log(`originalArray : ${originalArray}`);
console.log(`newArray : ${newArray}`);

Output

Adding Elements to the beginning of the array
originalArray : 3,4,5,6
newArray : 1,2,3,4,5,6

Adding Elements at the end of the Array
originalArray : 3,4,5,6
newArray : 3,4,5,6,7,8

Using the spread operator doesn’t modify the original array. Instead, it creates a new array with the added elements. This is important in modern JavaScript, especially when working with libraries like React, where immutability is encouraged.

 

Following example demonstrate how to add objects to the array using spread operator.

 

addObjects.js

const emps = [
  {
    id: 1,
    name: "Krishna",
    age: 36,
  },
  {
    id: 2,
    name: "Ram",
    age: 37,
  },
];

const updatedEmps = [...emps, { id: 3, name: "Gopi", age: 39 }];

console.log(`Employees: ${JSON.stringify(emps)}`);
console.log("\nAdd new Employee to the end of employees object");
console.log(`Employees: ${JSON.stringify(updatedEmps)}`);

Output

Employees: [{"id":1,"name":"Krishna","age":36},{"id":2,"name":"Ram","age":37}]

Add new Employee to the end of employees object
Employees: [{"id":1,"name":"Krishna","age":36},{"id":2,"name":"Ram","age":37},{"id":3,"name":"Gopi","age":39}]

Previous                                                    Next                                                    Home