Home Add an element to array in JavaScript
Post
Cancel

Add an element to array in JavaScript

The following snippets allow you to add an element to array in JavaScript.

Mutating

Using push

1
2
3
let myArray = [1, 2, 3, 4]
myArray.push(5)
console.log(myArray) // [1, 2, 3, 4, 5]

Adds an element to the end of the array and mutates itself.

Using unshift

1
2
3
let myArray = [1, 2, 3, 4]
myArray.unshift(5)
console.log(myArray) // [5, 1, 2, 3, 4]

Adds an element to the start of the array and mutates itself.

Using splice

1
2
3
let myArray = [1, 2, 3, 4]
myArray.splice(myArray.length, 0, 5)
console.log(myArray) // [1, 2, 3, 4, 5]

Adds an element at a specific index. In this example, we used the length of the array as the index to add an element at the end of the array.

1
2
3
let myArray = [1, 2, 3, 4]
myArray.splice(0, 0, 5)
console.log(myArray) // [5, 1, 2, 3, 4]

Adds an element at a specific index. In this example, we used 0 as the index to add an element at the start of the array.

1
2
3
let myArray = [1, 2, 3, 4]
myArray.splice(1, 0, 5)
console.log(myArray) // [1, 5, 2, 3, 4]

Adds an element at a specific index. In this example, we used 1 as the index.

Non-mutating

Using concat

1
2
3
let myArray = [1, 2, 3, 4]
myArray = myArray.concat(5)
console.log(myArray) // [1, 2, 3, 4, 5]

Adds an element to the end of the array and returns a new array.

Using length

1
2
3
let myArray = [1, 2, 3, 4]
myArray[myArray.length] = 5
console.log(myArray) // [1, 2, 3, 4, 5]

Adds an element to the end of the array using the next index of the last element.

Using the spread operator

1
2
3
let myArray = [1, 2, 3, 4]
myArray = [...myArray, 5]
console.log(myArray) // [1, 2, 3, 4, 5]

Adds an element to the end of the array and returns a new array.

1
2
3
let myArray = [1, 2, 3, 4]
myArray = [5, ...myArray]
console.log(myArray) // [5, 1, 2, 3, 4]

Adds an element to the start of the array and returns a new array.

Do you have any more ways to add an element to array in JavaScript? Share it on the comments below.

This post is licensed under CC BY 4.0 by the author.

Dynamically import class with no SSR in Next.js

Remove an element from array in JavaScript