How do I get all of the unique values in a JavaScript array (remove duplicates)?

Matthew C.

The Problem

You have an array that should only have unique values. How do you remove duplicates?

The Solution

There are various ways to remove duplicate values in an array. The simplest, most easy-to-read solution is to use the ES6 Set object.

Using Set and spread syntax

You can remove duplicates from an array by creating a new Set object using the Set() constructor. You pass in an iterable, such as an array:

const arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 5]; const set = [...new Set(arr)]; console.log(set); // [1, 2, 3, 4, 5]

To convert the Set object back to an array, you can use the spread syntax to spread the iterable Set object into an array literal.

Using .filter() and .indexOf()

Alternatively, you can use the filter() method, which filters elements from the array that pass the test of the callbackFn argument. The element passes the test if the callbackFn returns a truthy value. In the example code below, the test callbackFn uses the indexOf() method to return the first index of the item in the array:

const arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 5]; const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(uniqueArr); // [1, 2, 3, 4, 5]

Only the first occurrence of an item in the array will pass the test callbackFn by returning true.

Using a For Loop and .indexOf()

The function below removes duplicate values from an array by looping through each value of the array and adding the item to a helper array, uniqueArr, if it does not exist in the helper array already. The function uses the indexOf() method to check for duplicates. If a value does not exist in uniqueArr then the indexOf() method will return -1.

function removeArrDuplicates(array) { const uniqueArr = []; for (let i = 0; i < array.length; i++) { if (uniqueArr.indexOf(array[i]) === -1) { uniqueArr.push(array[i]); } } return uniqueArr; } const arr = [1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 5]; const uniqueArr = removeArrDuplicates(arr); console.log(uniqueArr); // [1, 2, 3, 4, 5]

You can also use a for...of loop instead of a regular for loop for the function above.

Performance

The method using .filter() and .indexOf() to remove duplicates from an array as well as the for loop and .indexOf() method use nested loops so they’ll be less performant than the method that uses Set() and the spread syntax. Using the Set() method and spread syntax is the best choice in terms of performance, conciseness, and readability.

The performance difference between the different methods is unlikely to be significant in most applications unless you are dealing with very large arrays.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.111.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.