How to remove a specific item from an array in JavaScript? Example Tutorial

Provided you have an array and you need to remove a specific item, how would you go about it? no worries, there are many ways to kill a bird. So, in JavaScript, there are different methods and techniques you can use to remove element(s) from an array(s). For example, you can use the pop() method to remove the last element of a given array, or you can use the shift() method to remove the first element of a given array. You also have a splice() method which can remove multiple elements from the given array. If you are wondering how to use them then don't worry, you will see examples of all those methods in this article. 

Firstly, What is an array? In JavaScript, An Array is a single variable that is used to store different elements. This means that JavaScript array(s) can hold different types of data like the number, string, boolean and object values at the same time. Unlike in Java, sorry You can’t do that. It is strongly typed. 

in fact, from creation time you would specify what type of data is coming in and its length. And you can’t do otherwise once you have stated the type of data and length. any attempts to do otherwise to what you stated leads to compilation error.

Also, the length of an array is dynamically sized and can keep growing. In other words, you don’t need to specify the array size upfront.  You can access the values by referring to an index number. The index number starts from zero as you can see from the image below. The first item in the array is index 0, the second item, index 1. the third item, index 2. E. t. c.

How to create Arrays in JavaScript? Example

There are ways to create arrays in JavaScript, The first one is to use the Array constructor as follows:

1. let students = Array(10);

The students' array is empty hence why it holds no element.

If you know the number of elements that the array will hold, you can create an array with an initial size as shown in the following example:

1. let students = Array(10);

To create an array with some elements, you pass the elements as a comma-separated list into the Array() constructor.

For example, the following creates the students' array that has five elements (or numbers):

1. let students = new Array(9,10,8,7,6);

It’s important to notice that if you use the array constructor to create an array and pass it into a number, you are creating an array with an initial size.

However, when you pass a value of another type like string into the Array() constructor, you create an array with an element of that value. For example:

1. let students= new Array(3); // creates an array with initial size 3
2. let scores = new Array(1, 2, 3); // create an array with three numbers 1,2 3
3. let color = new Array('Pink'); // creates an array with one element 'Pink'

The above are different ways to create an array in javaScript but the more preferred and common way to create an array is to use the array literal notation, The array literal form uses the square brackets [] to wrap a comma-separated list of elements. The following example creates the colors array that holds three strings:

1. let colors = ['red', 'green', 'blue'];

You can as well create an empty array for later use by doing the following:

1. Let my_Array = [];

Arrays in JavaScript have their own in-built method which you can bank on at any time. You don’t just have to start writing them. All you need is to call the method needed for the task you are doing.

The methods are:

• The join() method also joins all array elements into a string.
• The pop() method returns the value that was "popped out"
• The push() method adds a new element to an array (at the end). When you work with arrays, it is easy to remove elements and add new elements.
• The indexOf() method finds the index of an element.
• The Array.isArray() method checks if a value is an array, it returns true if the value you are looking for is present, otherwise returns false. 
• The shift() method removes the first array element and "shifts" all other elements to a lower index and returns the value that was "shifted out".
• The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements, and returns the new array length.
• The splice() method can be used to add new items to an array, specifying what index you want to add the new items to.
• The concat() method creates a new array by merging (concatenating) existing arrays, Note that The concat() method does not change the existing arrays. It always returns a new array. The concat() method can take any number of array arguments.

Multiple ways to remove elements from an array in JavaScript

Now, let's see a couple of examples of removing array elements in Javascript:

1. Pop method

1. var array = [1, 2, 3, 4, 5, 6];
2. array.pop(); // removes 6
3. console.log( array ); // [1, 2, 3, 4, 5]

2. Shift method

1. var array = ['zero', 'one', 'two', 'three'];
2. array.shift(); // removes "zero"
3. console.log( array ); // ["one", "two", "three"]

3. Splice method

1. var list = ["candy", "crush", "cookies", "oat"];
2. list.splice(0, 2);

Starting at index position 0, it removes two elements ["candy", "crush"] and retains ["cookies", "oat"].

What if you have more than one element of the same value which you would love to remove, here is how to go about it:

1. var numbers = [1, 2, 3, 4, 5, 5, 6, 7, 8, 5, 9, 0];
2. for( var i = 0; i < arr.length; i++){
3. if ( arr[i] === 5) {
4. arr.splice(i, 1);
5. i--;
6. }
7. }

 [1, 2, 3, 4, 6, 7, 8, 9, 0]//Output

That's all about how to remove a specific element from a given array in JavaScript. We have seen three ways to remove items from an array like the pop method which removes the last element of a given array or shift method which removes the first element of the given array, or the splice which can remove a set of elements from an array. 

You can also use that to create sub arrays like head or tail arrays. If you want ot learn more, you should join a good JavaScript course and if you need a recommendation you can check out this list of best JavaScript courses for beginners. 

Other JavaScript Articles and TutorialsYou May like to explore

• The React Developer RoadMap
• 5 Best courses to learn React Native for Beginners
• My favorite books to learn React.js
• 6 Best Courses to learn React Hooks in depth
• How to use lifecycle methods in React?
• Top 5 Modern JavasCript features for Beginners
• How to loop through an array in JavaScript
• What are Variable and Function hoisting in JavaScript
• What is restructuring in JavaScript? Example
• Difference between let, var, and const in JavaScript
• How to use recursion in JavaSCript
• How to use Rest and Spread Operator in javascript?
• Difference between == and  === in JavaScript?
• 10 Books and Courses to learn Angular
• Top 5 Websites to learn React.js for Beginners
• How to use state in React.js? Example
• 5 Online training courses to learn Angular for Free
• 3 Best and Free Svelete.js courses for beginners
• My favorite free Courses to learn Angular and React

Thanks for reading this article so far.  If you like this JavaScript array remove element tutorial and how to check if any includes a value in JavaScript then please share it with your friends and colleagues. If you have any questions or feedback, then, please drop a comment.

P. S. - If you want to master JavaScript but looking for free resources to learn JavaScript then you can also go through these free JavaScript courses. It has many hands-on free courses to learn modern JavaScript. It contains the best free Javascript courses from Udemy, Coursera, and Pluralsight.