6 Methods to add items in Javascript array

JavaScript

In this post, we are going to explore 6 Methods to add 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

6 Methods to add items in Javascript array

Table of Contents

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.

1.1 Add Single Element using array.push

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

1.2 Add multiple elements using array.push()

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/add elements in javascript array using splice()

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 item in js 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 add items in Javascript array.These methods (Push(),splice(),length,unshift()) append elements into existing array ,(Spread operator,concat()) return a new array after appending elements.

Related Posts