Remove Specific Item from an Array in 2 lines! – TypeScript ES6

How to remove a specific item from Array or Object?; we are going to discuss in view of TypeScript ECMAScript 6 how to easily, efficiently with less code of line remove a specific item either from Array.

By using TypeScript ES6 notations; the lines of code we write considerably get reduces, making our code more efficient and easy to read. In this tutorial, we are going to learn a very basic yet mostly searched way to remove a specific item from an Array.

With a simple array, the same requirement also comes in the case of Objects, in which we need to remove an item from Array. The methods we are going to discuss will be using JavaScript methods and function; library solutions including Lodash.

These methods will prove helpful in TypeScript, which is very popular among the latest JavaScript frameworks like Angular, Vue, ReactJS etc.

[lwptoc]

How to Remove Single or Multiple items from Array in TypeScript ES6?

Let,s take example arrays below with Numbers and Strings:

let numArr = [ 53, 8, 14, 12, 1, 5, 5, 7, 96, 23, 5, 23, 85, 8, 99, 13, 304]; 
let strArr = [ 'aaa', 'bbb', 'ccc', 'aa', 'aaa', 'c', 'bbb'];

 

Method 1) Use JavaScript filter() function [Remove Single Value]

// Remove single array item
function remove(value,arr){
    return arr.filter(item => item !== value)
}

console.log(remove('aaa',strArr)); //["bbb", "ccc", "aa", "c", "bbb"]
console.log(remove(5,numArr)); // [53, 8, 14, 12, 1, 7, 96, 23, 23, 85, 8, 99, 13, 304]

Using the filter() method will iterate all Array items and creates a new Array with items for which expression returned as true.

 

Method 2) Use JavaScript filter() + includes()  functions [Remove multiple Items]

// Remove multiple Array items
function remove(values,arr){
    return arr.filter(item => !values.includes(item));
}

console.log(remove(['aaa','bbb'],strArr)); //["ccc", "aa", "c"]
console.log(remove([5,14,96],numArr)); // [53, 8, 12, 1, 7, 23, 23, 85, 8, 99, 13, 304]

The includes() method returns boolean after checking if array values exist in the provided array. By adding the includes() methed we can filter out all the specified items at once.

 

Method 3) Use JavaScript splice() function [Remove Item from Index]

To remove an item at some index we can use the splice() method. The splice() method make changes in the existing array instead of returning a new one.

The splice() method takes two arguments, first is the index (starting from 0); the second is the number of items to remove starting from the index.

let numArr = [ 53, 8, 14, 12, 1, 5, 5, 7, 96, 23, 5, 23, 85, 8, 99, 13, 304]; 
let strArr = [ 'aaa', 'bbb', 'ccc', 'aa', 'aaa', 'c', 'bbb'];

strArr.splice(2, 1); // Remove 'ccc'
console.log(strArr); // ["aaa", "bbb", "aa", "aaa", "c", "bbb"]
numArr.splice(2, 4); // Remove 14, 12, 1, 5
console.log(numArr); // [53, 8, 5, 7, 96, 23, 5, 23, 85, 8, 99, 13, 304]

 

Method 4) Use Lodash Library

Lodash provided lots of helpful in-built methods, it simply makes our work easy. To remove a specific item from Array, we can simply use the _.remove() method.

The _.remove() method takes two arguments; Array from which we want to remove item; second the truth condition returned by a function.

let numArr = [ 53, 8, 14, 12, 1]; 
let strArr = [ 'aaa', 'bbb', 'ccc'];

function removeItem(item, arr){
    return _.remove(arr, (n) => n !== item);
}
console.log(removeItem(53,numArr));  // [8, 14, 12, 1]
console.log(removeItem('bbb',strArr)); // ["aaa", "ccc"]

 

Conclusion

There is a number of ways to achieve a task especially in programming, we tried to pull out some best way on how to remove a specific item from an Array. You can pick your favourite one out of the suggested list. Do share your thought if you have some other preferred way. Thanks…