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

Last Updated : 19 Jul, 2024

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

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']

Method 5: Using the spread operator (...): The spread operator (...) is a concise and versatile syntax for adding elements to an array dynamically. It allows you to create a new array by combining existing arrays with additional elements.

Example:

JavaScript

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

// New element added dynamically using spread operator
a = [...a, 'Geeks'];

console.log(a); // Output: ['Hi', 'There', 'Geeks']

Output

[ 'Hi', 'There', 'Geeks' ]

Method 6: Using the concat() method: The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Example: In this example, the concat() method merges the existing array a with a new array containing the elements ['Geeks', 'For', 'Geeks'], and returns a new array with all elements combined.

JavaScript

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

// New elements added dynamically using concat() method
a = a.concat(['Geeks', 'For', 'Geeks']);

console.log(a);

Output

[ 'Hi', 'There', 'Geeks', 'For', 'Geeks' ]

Using Array.map() Method for Dynamic Addition

Another approach to dynamically add elements to an existing array in JavaScript is by using the map() method in combination with the spread operator or other array methods. This approach allows you to iterate over the array, apply transformations, and append elements based on specific conditions or logic.

Example: In this example, we will dynamically add new elements to an array by using the map() method to iterate over the original array and then use the spread operator to append new elements based on a condition.