How to Add Elements to an Array In Javascript

In this tutorial, you’ll be going to learn how to add elements to an array in javascript. The easiest approach to add element to array using Array.push(), Array.unshift() and Array.splice().

JavaScript array is a collection of different types of value like number, string, object and more. Which will save at a particular index, starting from 0

Add elements to an array can be done using multiple ways. If you’re a developer then it will really help you because append element to array is so crucial topic. You have to play with an array always.

There is so many interview question you will face related to this topic like how to add value at the end of an array or at the start of an array. It might be inserted value between array. So stick to the end of the post and learn everything.

Also, see our other javascript array series-

  1. How To Empty An Array In JavaScript
  2. Find Max and Min Value from an Array in JavaScript
  3. Empty An Array In JavaScript
  4. Check If object empty in javascript
  5. Check if the array is empty in javascript

Add Elements to an Array In Javascript

  • Table Of Content
    • Add Value to Array With New Array Index
    • Add Element to Array Using Array.push()
      • Add Multiple Element to Array
      • Add Array Element in Array
    • Insert Element At End Of Array Using Array.concat()
      • Insert Multiple Value to JavaScript Array With Array.concat()
      • Add Value by Merge Array using Array.concat()
    • How to Append Element at beginning of array Using Array.unshift()
    • How to Insert Element at Middle Using Array.splice()

We’ll be going to discuss all the above point in detail. So you can crack any interview question related to this topic.

Add Value to Array With New Array Index

In this method, we don’t need to use any javascript built-in function to add an element to ana array. Because we know an array values store at particular index and array had a size. That’s it. So create an array.

Also read: Check if the array is empty in javascript

Now move on to code section.


// create javascript array
let array = [1,2]

// add element to array
array[2] = 3

console.log(array)
// result => [1, 2, 3]

In the above example array already had two value so the last index is 1. We just need to append a new element to index 2. But you can make it dynamic by providing a new index using Array.length. Let’s see the code.


// create javascript array
let array = [1,2]

// add element to array
array[array.length] = 3

// add element to array
array[array.length] = 4

console.log(array)
// result => [1, 2, 3, 4]

So in the above example, instead of specifying a constant number we define an Array.length because array size increase as value-added to an array.

Add Element to Array Using Array.push()

Array.prototype.push() is a javascript array prototype which adds one and more value to end of an array. Every time you use Array.push() it append an element to array.

Now move on to code snippet.


// create javascript array
let array = [1,2,3]

// add element to array
array.push(4)

// add element to array
array.push(5)

console.log(array)
// result => [1, 2, 3, 4, 5]

So in the above example, using Array.push() method we add an element to array.

Add Multiple Element to Array Using Array.push()

We can all add multiple values to an array by passing comma-separated value. Let’s see the code.


// create javascript array
let array = [1,2,3]

// add element to array
array.push(4, 5)

console.log(array)
// result => [1, 2, 3, 4, 5]

So it’s can able to add any number of value with a comma-separated in an array.

Add Array Element in Array

Not only value but you can also add array element to an array. But you can also add an object to array. Let’s see.


// create javascript array
let array = [[1, 2]]

// add element to array
array.push([3, 4])

console.log(array)

// result => [[1, 2], [3, 4]]

So in the above example, we create a multidimensional array. You can also learn how to flatten a multidimensional array.

Insert Element At End Of Array Using Array.concat()

Insert element at end of array can be done using Array.concat(). It mainly used to merge array but it an also add value to an array also.

Now see below code section.


// create javascript array
let array = [1,2,3]

// add element to array
var new_array = array.concat(4)

console.log(new_array)

// result => [1, 2, 3, 4]

So it simple as Array.push() but it does not modify an original array but it returns a new array with added value.

Insert Multiple Value to JavaScript Array With Array.concat()

You can also add multiple values to an array-like we did with Array.push(). So let’s move on to code section.


// create javascript array
let array = [1,2,3]

// add element to array
var new_array = array.concat(4, 5)

console.log(new_array)

// result => [1, 2, 3, 4, 5]

Add Value by Merge Array using Array.concat()

You also insert element to array by merging two arrays. Array.concat() returns a new array with merge values.

Let’s see the code.


// create javascript array
let array = [1, 2]

// add element to array
let new_array = array.concat([3, 4])

console.log(new_array)

// result => [1, 2, 3, 4]

So using Array.concat() we can merge two array but if array contain a nested array then it is not possible to merge it. Let’s see below example.


// create javascript array
let array = [1, 2]

// add element to array
let new_array = array.concat([3, 4, [6, 7]])

console.log(new_array)

// result => [1, 2, 3, 4, [6, 7]]

So for merging nested array you need flatten a multidimensional javascript array.

How to Append Element at beginning of array Using Array.unshift()

Array.unshift() this method adds value to the array at the beginning. All the value in the array gets shifted. You can add single and multiple values to array the starting location. Array.unshift() modify the actual array.

Let see the code in action.


// create javascript array
let array = [1, 2]

// add element to array
array.unshift(0)

console.log(array)

// result => [0, 1, 2]

So we add 0 at the starting index without replacing another value because all value in the array gets shifted.

you can also add multiple values in a single statement by passing a value in comma-separated.


// create javascript array
let array = [2, 3]

// add element to array
array.unshift(0,1)

console.log(array)

// result => [0, 1, 2, 3]

So using shift() method we can easily add an element to the javascript array at the starting position.

How to Insert Element at Middle Using Array.splice()

Array.splice() the method can be used to add an element to array or either remove an element from an array. Array.splice() the first argument specifies the beginning of the index for adding or removing the value. The second argument specifies the number of elements to be deleted. But if you want to add an element to an array then the second argument is zero. And the third and subsequent element to be added to array.


// create javascript array
let array = [1, 5]

// add element to array
array.splice(1,0,2,3,4)

console.log(array)

// result => [1, 2, 3, 4, 5]

Splice method changes the original array in which we add value. Updated array have the length equal to the number of elements in the array. As I already told you using this method you can also empty an array.

Conclusion :

As you can see there are many ways you can implement to how to add elements to an array in javascript

We have used only functions and functionality provide by JavaScript only like an push, unsift, splice and more.

And we have also implemented other approaches to add an element to a javascript array. So based on requirement you can use any method.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section. And let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

Leave a Reply

Your email address will not be published. Required fields are marked *