Add single or multiple items in Javascript array

JavaScript

In this post, we are going to explore Add single or multiple items in Javascript array with examples. We can add single or multiple elements in the array in javascript that includes adding elements in an existing array or returning a new array

Methods to add item to JS Array


These methods append elements into an existing array

  • Push()
  • splice()
  • length
  • unshift()

These methods return a new array after appending elements

  • Spread
  • concat()

1. Using Push() method


Push(): The push() array method appends an element to the end of the array. Using this we can append single or multiple elements to the array.

Syntax

array.push(element1,element2.....,elementN)

Parameters :

element1,element2….., elements: Required parameters are the new single or multiple elements appending to the end of the array.

Example :Add Single Element

In this example, we are pushing a single element to the end of the array.

let students = [ 'Rack','Phys', 100];


//append a single new element end of an array

students.push('max');


console.log(students)

Output

[ 'Rack', 'Phys', 100, 'max' ]

add multiple elements to JS array

Passing multiple elements to push() method separated by a comma is a headache, so we simply use a spread operator to pass an array of elements

let students = [ 'Rack','Phys', 100];
let name = ['Tax','mack']



console.log(students)

//append mutiple elements to end of array spread operator 
students.push(...name)

console.log('\n spread operator to add multiple elements :',students)

Output

original array : [ 'Rack', 'Phys', 100 ]

 spread operator to add multiple elements : 
[ 'Rack', 'Phys', 100, 'Tax', 'mack' ]

2. Using unshift() Method


The unshift() add a new single or multiple elements at beginning of the array. It modifies the original array by adding elements at the beginning.

Syntax

array.unshidt(element,element.....elementN)

Parameter

element1,element2….., elementN: Required parameters are the new single or multiple elements appending to the end of the array.

Add single element using unshift()

In this example, we are adding single element at beginning of array.

let students = [ 'Rack','Tom'];


//append a single new element start of an array

students.unshift('max');


console.log(students)

Output

[ 'max', 'Rack', 'Tom' ]

Add multiple elements using unshift()

In this example, we are adding multiple elements at beginning of the array using unshift() and unshift() with spread operator.

let students = [ 'Rack','Tom'];
let name = ['nack','mack']


//append a multiple new elements start of an array

students.unshift('Tax','kon');


console.log(students)

//append mutiple array of elements to an array 
students.unshift(...name)



console.log("append elements using spread operator:\n",students)

Output

[ 'Tax', 'kon', 'Rack', 'Tom' ]
append elements using spread operator
: [ 'nack', 'mack', 'Tax', 'kon', 'Rack', 'Tom' ]

3. Using array length property


The length of the array is a number of elements in the array and the index of the array starts from 0 and ends at length-1. So the trick is to assign a new element is at the length index.

Example append element Using length property

let students = [ 'Rack','Tom'];
let array_legth  = students.length;



students[array_legth] = 'Max'

console.log(students)

Output

[ 'Rack', 'Tom', 'Max' ]

4. Using splice() methods


The splice() method changes the contents of the array by adding new elements or removing existing ones.

Syntax

array.splice(startIndex,no_of_element,element1,element2,....,elementn)

Parameters

  • startIndex: required parameter-specific start index to add or remove elements.
  • no_of_elements: optional parameter number of elements to remove.
  • element1,element2,….,elementN: optional parameter the new elements add to array.

Example append elements

let students = [ 'Rack','Tom',
 'Max'];


students.splice('3',2,'Jack','Hans','dev')




console.log(students)

Output

[ 'Rack', 'Tom', 'Max', 'Jack', 'Hans', 'dev' ]

5. Using concat() method


The array concat() method merges two or more arrays. It does not modify the existing array rather returns a new array.

Example append array using concat method

let students = [ 'Rack','Tom'];

const alpha = ['a','b','c']
const num =[1,2,3]

result_array = students.concat(alpha,num)




console.log(result_array)

Output

[
  'Rack', 'Tom',
  'a',    'b',
  'c',    1,
  2,      3
]

6.Using spread operator


The spread operator spreads each element of the array into individual elements. It is represented by three dots(…). It merges two or multiple individual arrays. It does not modify the existing array rather returns a new array.

Example append array using spread operator

let students = [ 'Rack','Tom'];


const num =[1,2,3]
const alpha = ['a','b']

result_array = [...students,...num,...alpha]



console.log(result_array)

Output

[
  'Rack', 'Tom',  1, 2,  3,'a',  'b'
]

Summary :

We have explored 6 Methods to Append data to JavaScript array These methods (Push(),splice(),length,unshift()) append elements into existing array ,(Spread operator,concat()) return a new array after appending elements