JavaScript Add to Array

By Arvind Rai, September 12, 2019
JavaScript
This page will walk through how to add elements in JavaScript Array. We will provide examples to add elements at start of the Array, at end of the Array, adding elements at given index and joining Arrays. We will use following Array methods in our example.
unshift(): Inserts one or more elements at the start of the Array.
push(): Adds one or more elements at the end of the Array.
splice(): Adds new elements at index and replaces or removes the existing element at that index.
concat(): Joins the Arrays.
Contents

Create Array

1. Create Array with string. 
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
console.log(isro.length);
The length will be 3.
2. Create Array with numbers. 
var myNums = [23, 25, 30];
console.log(myNums.length);
The length will be 3. 3. Create Array with objects. 
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];

persons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
Krishna - 22
Mahesh - 30
Shiva - 25
3. Create Array using push(). 
var isro = new Array();
isro.push('Mangalyaan');
isro.push('Chandrayaan');
isro.push('Gaganyaan');
console.log(isro);
Output 
Array(3) [ "Mangalyaan", "Chandrayaan", "Gaganyaan" ]
4. Create Array using index. 
isro[isro.length] = 'Mangalyaan';
isro[isro.length] = 'Chandrayaan';
isro[isro.length] = 'Gaganyaan';
console.log(isro);
Output 
Array(3) [ "Mangalyaan", "Chandrayaan", "Gaganyaan" ]

Add to the start of an Array with unshift()

Use unshift() method to insert one or more elements at the start of the Array that returns new length of the Array. 
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan']; 
var len = isro.unshift('Aditya');
console.log(len);
console.log(isro);
Output 
4
Array(4) [ "Aditya", "Mangalyaan", "Chandrayaan", "Gaganyaan" ]
Now add more than one elements at the start of the Array. 
console.log('--- String ---');    
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
isro.unshift('Aditya', 'Shukrayaan ');
console.log(isro);

console.log('--- Number ---');
var myNums = [23, 25, 30];
myNums.unshift(40, 50);
console.log(myNums);

console.log('--- Objects ---');
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];
persons.unshift(
    {name: 'Ram', age: 24},
    {name: 'Shyam', age: 25}
);
persons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
--- String ---
Array(5) [ "Aditya", "Shukrayaan ", "Mangalyaan", "Chandrayaan", "Gaganyaan" ]

--- Number ---
Array(5) [ 40, 50, 23, 25, 30 ]

--- Objects ---
Ram - 24
Shyam - 25
Krishna - 22
Mahesh - 30
Shiva - 25

Add to the end of an Array with push()

Use push() method to add one or more elements at the end of an Array and this method returns the new length of the Array. 
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
var len = isro.push('Aditya');
console.log(len);
console.log(isro);
Output 
4
Array(4) [ "Mangalyaan", "Chandrayaan", "Gaganyaan", "Aditya" ]
Now add more than one elements at the end of the Array. 
console.log('--- String ---');    
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
isro.push('Aditya', 'Shukrayaan ');
console.log(isro);

console.log('--- Number ---');
var myNums = [23, 25, 30];
myNums.push(40, 50);
console.log(myNums);

console.log('--- Objects ---');
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];
persons.push(
    {name: 'Ram', age: 24},
    {name: 'Shyam', age: 25}
);
persons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
--- String ---
Array(5) [ "Mangalyaan", "Chandrayaan", "Gaganyaan", "Aditya", "Shukrayaan " ]

--- Number ---
Array(5) [ 23, 25, 30, 40, 50 ]

--- Objects ---
Krishna - 22
Mahesh - 30
Shiva - 25
Ram - 24
Shyam - 25

Add to Array at Index using splice()

The splice() method changes the contents of an Array by adding new elements at given index. The existing element at given index is either removed or replaced. Find the syntax of splice() method. 
var arrDeletedItems = array.splice(start, deleteCount, item...)
1. Find the example of splice(). We will add one element at index 1 and with delete count 0. 
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
isro.splice(1, 0, 'Aditya');
console.log(isro);
Output 
Array(4) [ "Mangalyaan", "Aditya", "Chandrayaan", "Gaganyaan" ]
We can observe that we added our new element at index 1 and the existing element is shifted to right.
2. Find the example with given delete count and adding more than one element. 
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
var arrDeletedItems = isro.splice(1, 2, 'Aditya', 'Shukrayaan');
console.log(isro);
console.log('arrDeletedItems:' + arrDeletedItems);
In the above code we are adding 2 new elements at index 1 with delete count 2 that will delete 2 elements starting from the given index and add 2 new elements. Find the output. 
Array(3) [ "Mangalyaan", "Aditya", "Shukrayaan" ]
arrDeletedItems:Chandrayaan,Gaganyaan
3. Find more examples of splice() method. 
console.log('--- String ---');    
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
isro.splice(2, 1, 'Aditya', 'Shukrayaan');
console.log(isro);

console.log('--- Number ---');
var myNums = [23, 25, 30];
myNums.splice(1,0, 50, 60);
console.log(myNums);

console.log('--- Objects ---');
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];
persons.splice(1, 1,
    {name: 'Ram', age: 24},
    {name: 'Shyam', age: 25}
);
persons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
--- String ---
Array(4) [ "Mangalyaan", "Chandrayaan", "Aditya", "Shukrayaan" ]

--- Number ---
Array(5) [ 23, 50, 60, 25, 30 ]

--- Objects ---
Krishna - 22
Ram - 24 
Shyam - 25
Shiva - 25
4. Arrays can also be updated using index in following way. 
console.log('--- String ---');    
var isro = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
isro[1] = 'Aditya';
console.log(isro);

console.log('--- Number ---');
var myNums = [23, 25, 30];
myNums[2] = 60;
console.log(myNums);

console.log('--- Objects ---');
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];
persons[0] = {name: 'Ram', age: 24};
persons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
--- String ---
Array(3) [ "Mangalyaan", "Aditya", "Gaganyaan" ]

--- Number ---
Array(3) [ 23, 25, 60 ]

--- Objects ---
Ram - 24 
Mahesh - 30
Shiva - 25

Add an Array to an Array using concat()

concat() method returns a new array that is this array joined with other arrays. 
var isroTeam1 = ['Mangalyaan', 'Chandrayaan', 'Gaganyaan'];
var isroTeam2 = ['Aditya', 'Shukrayaan'];
var isro = isroTeam1.concat(isroTeam2);
Output 
Array(5) [ "Mangalyaan", "Chandrayaan", "Gaganyaan", "Aditya", "Shukrayaan" ]
Find more examples to add arrays using concat() method. 
console.log('--- String ---');  
var isroProjects = ['Mangalyaan', 'Chandrayaan1'];
var isro = isroProjects.concat(['Chandrayaan2', 'Gaganyaan'], ['Shukrayaan', 'Aditya']);
console.log(isro);

console.log('--- Number ---');
var myNums = [23, 25, 30];
var allNums = myNums.concat([40, 50], [60, 70]);
console.log(allNums);

console.log('--- Objects ---');
var persons = [
    {name: 'Krishna', age: 22},
    {name: 'Mahesh', age: 30},
    {name: 'Shiva', age: 25},
];
var allPersons = persons.concat(
    [
      {name: 'Ram', age: 24},
      {name: 'Shyam', age: 25}
    ]
);
allPersons.forEach(person => {
    console.log(person.name + " - " + person.age);
})
Output 
--- String ---
Array(6) [ "Mangalyaan", "Chandrayaan1", "Chandrayaan2", "Gaganyaan", "Shukrayaan", "Aditya" ]

--- Number ---
Array(7) [ 23, 25, 30, 40, 50, 60, 70 ]

--- Objects ---
Krishna - 22
Mahesh - 30
Shiva - 25
Ram - 24
Shyam - 25

Reference

JavaScript Array
RELATED POST

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE
JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5








©2024 concretepage.com | Privacy Policy | Contact Us