Arrays - Add or Remove elements from an array.

Working with arrays in JavaScript is inevitable. But knowing what to use in certain situations might come in handy.

Sometimes, we have to add or remove elements from an array and there is more than one way to do it.

In this article, I'm going to show you different ways to add or remove elements of an array with examples.

So, let's get started.

1. How to remove the first element in an array

// How to remove the first element in an array
let arr= [ 1, 2, 3, 4 , 5]
arr.shift( ) // 1
arr // [ 2, 3, 4 , 5]
// returns the array without the first element

Facts:

1. The shift method mutates the array i.e., it changes the array. If you don't want the original array to be mutated, then copy the array to another variable and then use the shift method on it.

2. Only the first element is removed from the array and It brings down the index of previous elements. For example,

let arr = [1, 2, 3, 4, 5] => Here, index 0 =1, index 1 =2, and so on 
arr.shift( ) // 1 
arr = [ 2, 3, 4, 5] => Here, index 0 = 2, index 1 = 3, and so on.

3.If the array is empty, it returns undefined.

2. How to remove the last element in an array

let arr= [ 1, 2, 3, 4 , 5]
arr.pop( ) //  5
arr // [1, 2, 3, 4 ]
// returns the array without the last element

Facts:

1. Pop removes the last element of the array changing its length. Similar to the shift, it mutates the array.
2. .If the array is empty, it returns undefined.

3. How to remove the last two elements in an array.

let arr= [ 1, 2, 3, 4 , 5]
arr.slice( 0, 3) // [1, 2, 3]
// The 0 and 3 are indexes of the elements above. 

//  You don't know the length of the array, then you can try this. 
let arr= [ 1, 2, 3, 4 , 5]
arr.slice( 0, arr.length-2) // [1, 2, 3] 

// or 
arr.slice( 0, -2)

Another Method:

let arr= [ 1, 2, 3, 4 , 5]
arr.length =4
arr // [ 1, 2, 3, 4 ]

Facts:

1. The slice method doesn't mutate the array. It returns a new array.
2. It doesn't throw an error if the array is empty. Instead, it returns the empty array.

4. How to empty the array

let arr= [ 1, 2, 3, 4 , 5]
arr.length =0 // [ ]

// Another Method
let arr= [ 1, 2, 3, 4, 5]
arr.slice( 0, 0) // [ ]

This question was asked in an interview.

5. How to get the middle number of an array.

const arr = [1,2,3,4,5,6,7]
arr.filter((item, i)=> i === (arr.length-1)/2) // [ 4 ]

Here, the item refers to each element in the array. i is the index of each element. This method works only if the length of the array is odd.

6. How to add an element to the beginning of the array

let arr= [ 1, 2, 3, 4 , 5]
arr.unshift(9 ) // [ 9, 1, 2, 3, 4, 5]

Facts:

1. Unshift adds one or more elements to the beginning of the array.
2. Like the Shift method, Unshift mutates the array by pushing the elements to the right.
3. It also changes the index of the previous elements.

7. How to add an element to the end of the array

let arr= [ 1, 2, 3, 4 , 5]
arr.push( 7 ) //  [ 1, 2, 3, 4 , 5, 7]

Facts:

1. Push adds an element to the end of an array.
2. It changes the length of the array but doesn't change the index of elements.

8. How to add all the elements of an array.

let arr= [ 1, 2, 3, 4 , 5]
arr.reduce( ( acc, curr)=> acc+curr, 0) // 15

You can read the detailed explanation of the reduce here.

Final Thoughts:

That's all for today's article guys. Which of the above did you find interesting? Let me know in the comments.

Also, if you want me to write about any concepts in JavaScript, drop your suggestions in the comments.