Array Add/Remove elements

When working with arrays, we often need to add elements to it or remove elements from it. There are many ways to do this, but the most convenient way to work with an array is to use the built-in array methods. With their help, we can iterate through the array and perform operations with each element, filter the array, find the array element we need, as well as remove and add new elements. The remove and add methods are by far the most commonly used methods for modifying an array.

Adding and removing an element

Array elements can be removed and added in the same way as normal properties of any other objects. The simplest way to add an element to an array is to assign a value to the new indexes of the array.

const myArray = [1, 2, 3];

myArray[3] = 4;

console.log(myArray); // [1, 2, 3, 4]

This method is rarely used due to the fact that it doesn't allow you to conveniently work with an array as if it were a list, in other words, it's not flexible. Instead, array methods are used, and they greatly simplify the operations of adding and removing arrays.
Let's have a closer look at them:

• Array.push():

The push() method adds one or more elements to the end of an array:

const myArray = [1, 2, 3];

myArray.push(4);

console.log(myArray); // [1, 2, 3, 4]

It works as if we had assigned a value to the element with an index greater than the last element.

const myArray = [1, 2, 3];

myArray[3] = 4;

console.log(myArray); // [1, 2, 3, 4]

• Array.pop()

The pop() method removes the last element of the array and returns it:

const myArray = [1, 2, 3];

const element = myArray.pop();

console.log(myArray); // [1, 2]
console.log(element); // 3

In addition, it's worth mentioning the data structures stack and queue.

When we use the pop() and push() methods, we treat the array as if it were a stack. A stack is a data structure in which elements are added to and removed from the end. It can be compared to a stack of books. We stack books one on top of the other, but when we take books, we do it only from the top (otherwise our stack of books will fall apart). This principle is called "last in, first out".

The queue data structure is also quite straightforward. Imagine a queue in a store: whoever enters the queue first will be the first to leave it. Similarly, the data that is first added to the queue is the first to be retrieved from the queue.

Shift and unshift methods

The two methods shift() and unshift() allow us to add and remove elements to an array. Unlike pop() and push(), they allow you to interact not with the end of the array, but with the beginning.

• Array.shift()

The shift() method removes the first element of an array and returns it:

const myArray = [1, 2, 3];

const element = myArray.shift();

console.log(myArray); // [2, 3]
console.log(element); // [1]

• Array.unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the length of the array:

const myArray = [1, 2, 3];

myArray.unshift(10);

console.log(myArray); // [10, 1, 2, 3]

Note that the shift and unshift methods, unlike the pop and push methods, are much more expensive in terms of performance. This is because the pop and push methods only need to either remove or add an element to the end of the array, while the shift and unshift methods also shift each subsequent element of the array to the left in case of deletion, and shift to the right in case of adding an element. We must take this feature into account when working with very long arrays.

This happens to elements when we use the shift() array method:

This happens to elements when we use the unshift() array method:

Splice method

The splice() method is incredibly flexible for working with arrays. It is used to insert an element into an array, remove an element from an array, or replace an array element with another element.

• Remove elements with splice()

In order to remove elements, we must pass two arguments to the splice() method. The first is the index of the element and the second is the number of elements we want to remove after the index:

// remove one element

const myArray = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray.splice(2, 1);
console.log(myArray); // ['Moskow', 'Yerevan', 'New-York', 'Paris']

//remove multiple elements

const myArray1 = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray1.splice(2, 2);
console.log(myArray1); // ['Moskow', 'Yerevan', 'Paris']

• Adding elements with splice()

To insert elements into an array using the splice() method, we need the element index as the first argument, the number 0 as the second, and the subsequent elements that we want to insert into the array:

// adding one element

const myArray = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray.splice(2, 0, 'Mexico');
console.log(myArray); // ["Moskow", "Yerevan", "Mexico", "London", "New-York", "Paris"]

//adding multiple elements

const myArray1 = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray1.splice(2, 0, 'Mexico', 'Lisbon');
console.log(myArray1); // ["Moskow", "Yerevan", "Mexico", "Lisbon", "London", "New-York", "Paris"]

• Replace elements with splice()

To replace elements in an array using splice(), we must specify the index of the element we want to replace as the first argument, the number of elements after it that we want to replace, and as the subsequent arguments, we must pass the elements that will replace the deleted ones.

// replace one element

const myArray = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray.splice(2, 1, 'Mexico');
console.log(myArray); // ["Moskow", "Yerevan", "Mexico", "New-York", "Paris"]

//replace multiple elements

const myArray1 = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray1.splice(1, 3, 'Mexico', 'Lisbon');
console.log(myArray1); // ['Moskow', 'Mexico', 'Lisbon', 'Paris']

Other ways to remove array elements

• The delete operator

The delete operator is rarely used on arrays because it will not update the length of the array because it doesn't reindex it. When we use the delete operator, an empty slot appears instead of the element, but it doesn't shift the array and doesn't change the Array.length value. Also, sometimes the delete operator doesn't behave as expected because some JS engines assume the deleted index to be undefined while it is actually an empty slot in the array.

const myArray = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
delete myArray[2];
console.log(myArray); // ["Moskow", "Yerevan", empty, "New-York", "Paris"]

• Assigning a length value

In addition, we can change the value of the Array.length array down, in order to remove a certain number of array elements from its end:

const myArray = ['Moskow', 'Yerevan', 'London', 'New-York', 'Paris'];
myArray.length = 3;
console.log(myArray); // ['Moskow', 'Yerevan', 'London']

Read more on this topic in JavaScript Array Slicing Techniques on Hyperskill Blog.

Conclusion

Removing and adding array elements can be implemented in many ways, the most efficient of which is by using the array methods. By using the pop and push array methods, you can add and remove elements to the end of an array. You can use the shift and unshift methods, you can add and remove elements at the beginning of an array. The splice array method allows you to conveniently add, remove, and replace array elements. You can also delete an array element using the delete operator or by assigning a smaller value to the .length of the array, in case we need to remove several elements from its end.