Javascript Tutorial | Adding elements to Array in JavaScript

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.

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().

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.

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.

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.

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.

#js #javascript