Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Remove Duplicate Elements from an Array in JavaScript?
To remove duplicate elements from an array in JavaScript can be achieved using various approaches. We will be understanding six different approaches in this article, which can be used according to our requirement in various cases.
In this article we are having a JavaScript array and our task is to remove duplicate elements from array in JavaScript.
Approaches to Remove Duplicate Elements From an Array
Here is a list of approaches to remove duplicate elements from an array in JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.
- Using Set() Method
- Using filter() Method
- Using reduce() with includes() Method
- Using forEach() with includes() Method
- Using Underscore.js _.uniq() Method
- Using Lodash _.uniq() Method
Using Set() Method
To remove duplicate elements from array in JavaScript, we have used Set() method. A Set is a collection of unique values and holds only unique values.
- We convert the array to a Set using new Set(arr), which automatically removes duplicates
- Then we convert the Set back to an array using the spread operator (...)
- The result is stored in a new array containing only unique values
Example
Here is a complete example code implementing above mentioned steps to remove duplicate elements from an array in JavaScript using Set() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Duplicates with Set</title>
</head>
<body>
<h2>Removing Duplicate Elements From an Array in JavaScript</h2>
<p>In this example we have used <strong>Set()</strong> method to remove duplicate elements from an array in JavaScript.</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Remove Duplicates</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array").innerHTML = "Initial array: " + arr;
function unique() {
let newArray = [...new Set(arr)];
document.getElementById("result").innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
Initial array: steve,mark,mark,bill,steve,Zoro Unique array: steve,mark,bill,Zoro
Using filter() Method
In this approach to remove duplicate elements from array in JavaScript, we have used filter() method with indexOf() method.
- The filter() method creates a new array with elements that pass a test condition
- We use indexOf(item) to find the first occurrence index of each element
- Only elements where their current index equals their first occurrence index are kept
- This effectively removes all duplicate occurrences, keeping only the first one
Example
Here is a complete example code implementing above mentioned steps to remove duplicate elements from an array in JavaScript using filter() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Duplicates with Filter</title>
</head>
<body>
<h2>Removing Duplicate Elements From an Array in JavaScript</h2>
<p>In this example we have used <strong>filter()</strong> method to remove duplicate elements from an array in JavaScript.</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Remove Duplicates</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array").innerHTML = "Initial array: " + arr;
function unique() {
let newArray = arr.filter((item, index) => arr.indexOf(item) === index);
document.getElementById("result").innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
Initial array: steve,mark,mark,bill,steve,Zoro Unique array: steve,mark,bill,Zoro
Using reduce() with includes() Method
In this approach we have used reduce() method with includes() method to remove duplicate elements from array in JavaScript.
- The reduce() method processes each element and builds up a result array
- For each element, we check if it already exists in the accumulator array using includes()
- If the element doesn't exist, we add it using push()
- The accumulator starts as an empty array and grows with unique elements only
Example
Here is a complete example code implementing above mentioned steps to remove duplicate elements from an array in JavaScript using reduce() with includes() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Duplicates with Reduce</title>
</head>
<body>
<h2>Removing Duplicate Elements From an Array in JavaScript</h2>
<p>In this example we have used <strong>reduce()</strong> with <strong>includes()</strong> method to remove duplicate elements from an array in JavaScript.</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Remove Duplicates</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array").innerHTML = "Initial array: " + arr;
function unique() {
var newArray = arr.reduce(function (acc, curr) {
if (!acc.includes(curr)) {
acc.push(curr);
}
return acc;
}, []);
document.getElementById("result").innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
Initial array: steve,mark,mark,bill,steve,Zoro Unique array: steve,mark,bill,Zoro
Using forEach() with includes() Method
In this approach we have used forEach() method with includes() method to remove duplicate elements from array in JavaScript.
- We initialize an empty array newArray to store unique elements
- The forEach() method iterates through each element in the original array
- For each element, we check if it already exists in newArray using includes()
- Only elements that don't already exist are added to the result array
Example
Here is a complete example code implementing above mentioned steps to remove duplicate elements from an array in JavaScript using forEach() with includes() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Duplicates with forEach</title>
</head>
<body>
<h2>Removing Duplicate Elements From an Array in JavaScript</h2>
<p>In this example we have used <strong>forEach()</strong> with <strong>includes()</strong> method to remove duplicate elements from an array in JavaScript.</p>
<hr>
<div id="array"></div>
<br>
<button onclick="unique()">Remove Duplicates</button>
<br><br>
<div id="result"></div>
<script>
var arr = ["steve", "mark", "mark", "bill", "steve", "Zoro"];
document.getElementById("array").innerHTML = "Initial array: " + arr;
function unique() {
let newArray = [];
arr.forEach((c) => {
if (!newArray.includes(c)) {
newArray.push(c);
}
});
document.getElementById("result").innerHTML = "Unique array: " + newArray;
}
</script>
</body>
</html>
Initial array: steve,mark,mark,bill,steve,Zoro Unique array: steve,mark,bill,Zoro
Using Underscore.js _.uniq() Method
In this approach to remove duplicate elements from array in JavaScript we have used _.uniq() method of Underscore.js library.
- We include the Underscore.js library via CDN in the HTML head section
- The _.uniq() method is a built-in utility that removes duplicates from an array
- This method handles the duplicate removal logic internally and returns a new array with unique values
Example
Here is a complete example code implementing above mentioned steps to remove duplicate elements from an array in JavaScript using Underscore.js _.uniq() method.
2K+ Views
