How to add elements to an existing array dynamically in JavaScript ?

An array is a JavaScript object that can hold multiple values at a time, irrespective of the data type. In this article, we will see how to add new elements to an existing array dynamically in Javascript. We will discuss two methods in this article i.e. push() method and dynamically adding an element at any index using the index of the array.

Example:

var a = ['Geeks', 'For', 'Geeks', 1];

In the above example, “Geeks” is of type “string” while 1 is of “integer” type. An array can also store JavaScript objects. JavaScript arrays are dynamic in nature, they do not need the size during initialization. They are accessed using numbered indexes.

console.log(a[1]);

The above statement prints ‘For’ from the above example in the console window.

Output:

For

or

document.write(a[1]);

Output:

For

To add elements into an array dynamically in JavaScript, the programmer can use any of the following methods.

Method 1: Use number indexes to add an element to the specified index.

JavaScript

// JavaScript Array Initialization
var a = ['Hi', 'There'];

// New element added dynamically.
a[3] = 'Geeks';

console.log(a[3]);
console.log(a[2]);

Output:

Geeks
undefined

It can be seen that the index of {0, 1} was declared only. Index 3 was dynamically created and initialized to ‘Geeks’. Index 2 was created automatically and initialized to undefined, to keep up the ordering.

Method 2: Use push() method is used to add elements at the end of the array.

JavaScript

// JavaScript Array Declared
var a = [];

// Elements pushed into the
// array using push() method
a.push('Geeks');
a.push('For');
a.push('Geeks');

// Obtaining the value
console.log(a);

Output:

['Geeks', 'For', 'Geeks']

The console window shows an array object containing 3 values, they are [‘Geeks’, ‘For’, ‘Geeks’]. The push() method maintains the ordering of indexes by adding the new elements at the end of the array and returns the new length of the array.

Method 3: Use unshift() method is used to add elements at the beginning of the array.

Javascript

// JavaScript Array Declared
var a = [];

// Elements pushed into the
// array using push() method
a.unshift('Geeks');
a.unshift('For');
a.unshift('Geeks');

// Obtaining the value
console.log(a);

Output:

['Geeks', 'For', 'Geeks']

Method 4: Using splice() method: this method is used to modify the contents of an array by removing the existing elements and/or by adding new elements.

Syntax:

Array.splice( index, remove_count, item_list )

Example:

Javascript

const language = ['HTML', 'Css'];

language.splice(
    language.length, // We want add at the END of our array
    0, // We do NOT want to remove any item
    'Javascript', 'react', // These are the items we want to add
);

console.log(language);

Output:

['HTML', 'Css', 'Javascript', 'react']