JavaScript Add to Array
September 12, 2019
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);
2. Create Array with numbers.
var myNums = [23, 25, 30]; console.log(myNums.length);
var persons = [ {name: 'Krishna', age: 22}, {name: 'Mahesh', age: 30}, {name: 'Shiva', age: 25}, ]; persons.forEach(person => { console.log(person.name + " - " + person.age); })
Krishna - 22 Mahesh - 30 Shiva - 25
push()
.
var isro = new Array(); isro.push('Mangalyaan'); isro.push('Chandrayaan'); isro.push('Gaganyaan'); console.log(isro);
Array(3) [ "Mangalyaan", "Chandrayaan", "Gaganyaan" ]
isro[isro.length] = 'Mangalyaan'; isro[isro.length] = 'Chandrayaan'; isro[isro.length] = 'Gaganyaan'; console.log(isro);
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);
4 Array(4) [ "Aditya", "Mangalyaan", "Chandrayaan", "Gaganyaan" ]
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); })
--- 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);
4 Array(4) [ "Mangalyaan", "Chandrayaan", "Gaganyaan", "Aditya" ]
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); })
--- 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...)
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);
Array(4) [ "Mangalyaan", "Aditya", "Chandrayaan", "Gaganyaan" ]
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);
Array(3) [ "Mangalyaan", "Aditya", "Shukrayaan" ] arrDeletedItems:Chandrayaan,Gaganyaan
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); })
--- String --- Array(4) [ "Mangalyaan", "Chandrayaan", "Aditya", "Shukrayaan" ] --- Number --- Array(5) [ 23, 50, 60, 25, 30 ] --- Objects --- Krishna - 22 Ram - 24 Shyam - 25 Shiva - 25
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); })
--- 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);
Array(5) [ "Mangalyaan", "Chandrayaan", "Gaganyaan", "Aditya", "Shukrayaan" ]
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); })
--- 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