How to Remove Element from Array JavaScript and Craft Clean Code

You will often come across Arrays when writing JavaScript code. How can you remove an element from an Array in JavaScript? 

In JavaScript, an Array is a type of global object you can use to store data. An array in JavaScript can contain a list containing zero, or more data types or an ordered collection. To access specific items from an Array, we use numbered indices starting from 0. 

In this article, I will describe the syntax for creating Arrays in JavaScript, why one should remove an element from an array in JavaScript, and the different approaches to remove elements from Arrays in JavaScript by mutating or without mutating the original array. 

Syntax for a JavaScript array

Arrays allow us to store multiple valuables in a single variable. For instance, if we want to represent the seven continents in JavaScript, we can have this code:

const continent1 = "Asia";
const continent2 = "Africa";
const continent3 = "North America";
const continent4 = "South America";
const continent5 = "Antarctica";
const continent6 = "Europe";
const continent7 = "Australia"

However, we can condense this code and represent it in an array as follows;

 let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Instead of having 7 variables, we only have one variable and we use square brackets to represent our objects. 

If you want to access the first continent on our list, you can run this command; console.log(continents[0])

You can use our free online JavaScript compiler to test your code.

This is what you get:

If you want to access the last item in our array, you will run this command; console.log(continents[6]).

Please note that numbering in JavaScript starts from 0. 

Why Remove an Element from a JavaScript Array?

You can use JavaScript arrays with strings, numbers, and various data structures. However, there are instances where you may need to remove one or several elements from an array. These are some of the scenarios:

• Handle dynamic data: You can store dynamic sets of data in arrays. You may need to remove an element/ elements from an array based on the changing requirements.
• Maintain data integrity: You can delete/ remove outdated information from your arrays to ensure that your data structures are up-to-date.
• Manage memory: The size of your code affects the performance of your application. You can remove unnecessary information from your arrays and optimize your code. 

Remove Elements without Mutating the Original Array

When you want to remove an element without mutating the original array, the best practice is to create a new array without the element you want to remove. Such an approach fits an array like a function parameter. You can use the following approaches:

#1. Remove an element using slice()

We can remove the first continent from our list using the slice() method. 

This is our original code: 

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

We will create a new array as follows:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using slice
let newContinents = continents.slice(1);
If you now run:
console.log(newContinents);

You will get this as your output:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#2. Remove the first element from an Array using filter()

The filter method creates a new array where elements must pass a certain condition. I can create a condition that excludes the first element from our array. This is how I can achieve that:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using filter() method
let newContinents = continents.filter((continent, index) => index !== 0);
console.log(newContinents);

If I run the code, this is what I will get:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Use slice() together with concat() to remove an element from any position

Our first example removes the first element from our list. What if we want to remove, let us say, the third or fourth element from our array? We need to combine slice() with concat() methods for this to happen. In the following example, I will remove the fourth element as follows:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the fourth element using slice and concat
let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4));
console.log(continentsWithoutFourth);

If I run the code, we get this as the output:

[
  'Asia',
  'Africa',
  'North America',
  'Antarctica',
  'Europe',
  'Australia'
]

The slice() method creates two new slices. We then use the concat() method to combine the two slices but omit the fourth element. You can use this approach with any element on the array. 

#4. Remove an element using for loop together with push()

We can omit the fifth element from our list using the for loop and push() method. Check out this code:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i  ) {
  if (i !== 4) {
    continentsWithoutFifth.push(continents[i]);
  }
}
console.log(continentsWithoutFifth);

The for loop iterates over each element in our continents array. We use the if statement to check if the current index is not equal to four. If the condition is true, the elements are pushed into a new array.

This is what we get when you run the code:

[

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Europe',
  'Australia'
]

Remove Elements by Mutating the Original Array

You can mutate or change the structure of the original array by removing an element. These are some of the approaches: 

#1. Remove an element from an array using pop()

You can use the pop() method to remove the last element from our continents array. Our original code is 

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

We can have this code to remove the last element:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the last element using pop
let lastContinent = continents.pop();

If you run:

console.log("Updated Continents Array:", continents);

The updated list will be:

Updated Continents Array: [

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe'
]

You can also check the removed element using this code:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the last element using pop
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);

#2. Remove an element from an array using splice()

The splice () method allows you to remove elements from a specific index in your array. I can remove an element from the index of 2 using this code:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the element at index 2 using splice
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);

This code mutates the original array and then returns a new array. The code also has two console.log statements that check the ‘Removed Elements’ and the ‘Updated Continents Array’.

When we run the entire code, this will be the output:

Removed Element: [ 'North America' ]
Updated Continents Array: [
  'Asia',
  'Africa',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Remove the first element from an array using shift()

The shift () method removes the first element from a JavaScript array. This method modifies/ destroys the original array and also returns the removed element. We can still use our continents array for this demonstration. 

We can remove the first element as follows:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using shift
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);

We have two console.log statements, where one returns the `Removed Continent’ while the second one returns ‘Updated Continents’. 

If we run the code, we get this output:

Removed Continent: Asia
Updated Continents Array: [

  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

Add an Element to an Array in JavaScript

We have so far discussed how to remove an element from an array. However, there are incidences where you may want to add a new element to an array. These are some of the approaches to use:

#1. The push() method

We will use this code for these examples:

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

We can add a new color at the end of the array using the push() method. 

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

// Add a new color to the array
colors.push('orange');

Our array now will have six colors.

#2. The unshift() method

You can add a new element to the start of the array using the unshift() method. We can still use the colors array.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);

As you can see in the following screenshot, orange is now the first color on our array:

Conclusion

You now understand how to remove an element in a JavaScript array and produce efficient code. The choice of approach will depend on your end goals, skills, and preferences. 

The slice() method is a perfect choice when you are looking for a simple approach and you don’t want to mutate the original array. On the other hand, I found the combination of slice() and concat() methods a perfect choice if you want to remove any element. 

Check out our article on JavaScript cheat sheets for devs.