Insert multiple values into an array in JavaScript

This post will discuss how to insert multiple values into an array in JavaScript.

1. Using ES6 Spread operator with slicing

The recommended approach is to use the ES6 Spread operator with slicing for inserting multiple values into an array. The idea is to split the array into two subarrays using the index where specified values need to be inserted. Then we insert the specified values between the two subarrays with the help of the Spread operator. The following code example shows how to implement this.

function insert(arr, index, ...items)

{

return [

...arr.slice(0, index),

...items,

...arr.slice(index)

];

}

var arr = [3, 4, 5];

var result = insert(arr, 0, 1, 2);

console.log(result);

Output: [ 1, 2, 3, 4, 5 ]

Download Run Code

2. Using `Array.prototype.splice()` function

Alternatively, you can use the splice() method, which can change the array’s contents by adding new elements in-place. Here’s what the code would look like:

function insert(arr, index, ...items)

{

var subarray = arr.slice.call(items);

arr.splice.apply(arr, [index, 0].concat(subarray));

}

var arr = [3, 4, 5];

insert(arr, 0, 1, 2);

console.log(arr)

Output: [ 1, 2, 3, 4, 5 ]

Download Run Code

Note that the code modifies the original array, and no copy is made. The code can be simplified using the Spread operator:

function insert(arr, index, ...items) {

arr.splice(arr, index, ...items);

}

var arr = [3, 4, 5];

insert(arr, 0, 1, 2);

console.log(arr);

Output: [ 1, 2, 3, 4, 5 ]

Download Run Code

3. Using `Array.prototype.push()` function

To add elements at the end of an array, you can use the push() method with spread syntax.

function insert(arr, ...items) {

arr.push(...items);

}

var arr = [ 1, 2, 3, 4 ];

insert(arr, 5, 6, 7);

console.log(arr);

Output: [ 1, 2, 3, 4, 5, 6, 7 ]

Download Run Code

4. Using `Array.prototype.unshift()` function

Similarly, to add elements at the beginning of an array, you can use the unshift() method with spread syntax.

function insert(arr, ...items) {

arr.unshift(...items);

}

var arr = [ 4, 5, 6, 7 ];

insert(arr, 1, 2, 3);

console.log(arr);

Output: [ 1, 2, 3, 4, 5, 6, 7 ]

Download Run Code

That’s all about inserting multiple values into an array in JavaScript.

Insert multiple values into an array in JavaScript

1. Using ES6 Spread operator with slicing

2. Using Array.prototype.splice() function

3. Using Array.prototype.push() function

4. Using Array.prototype.unshift() function

Share this:

2. Using `Array.prototype.splice()` function

3. Using `Array.prototype.push()` function

4. Using `Array.prototype.unshift()` function