Three methods to get unique values from arrays in ES6.
Tags: javascript, arrays, es6
Published: 2020-03-30 08:24:47

---
title: Three methods to get unique values from arrays in ES6.
published: true
description: In this article we discuss three ways to get unique values from an array in ES6.
tags: JavaScript, arrays, ES6
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mw0jn785qp2b04axccnd.png
canonical_url: https://everistus.me/three-methods-to-get-unique-values-from-arrays-in-es6-ck8dypcjd01a8xjs13gde9xmc
---

This article was originally published on [everistus.me](https://everistus.me/three-methods-to-get-unique-values-from-arrays-in-es6-ck8dypcjd01a8xjs13gde9xmc)


There are several ways and several algorithms that you can easily implement to retrieve unique element in an array in JavaScript. In this article, we will discuss three of those ways. This is the first article in The JavaScript Snippet Series. It is accompanied by a  [video](https://www.youtube.com/watch?v=aTABbLQ9yvg).

## Using Set
In ES6, a Set is a collection of values. The values in a set are unique in the Set's collection. Using this property of a Set, we can pass an array into a Set and because each value in the Set has to be unique, the value equality will be checked. This means the Set will only retain unique values. We can, therefore, using the `spread` operator return a new array of unique values.


```javascript
const arr = [2019, 2020, 2019, 2018, 2020, 2021, 2030, 2020, 2019];

// Using sets
const useSet = arr => {
  return [...new Set(arr)];
};

console.log(result);
``` 
This will return a new array with only unique elements like we wanted.

![Screen Shot 2020-03-30 at 5.04.56 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1585541120378/FL1Q89Dxq.png)

## Using Array.filter
The next method we will be using is using ES6 `Array.filter` function. The `Array.filter` function takes a callback whose first parameter is the current element in the operation. It also takes an optional `index` parameter and the array itself. Combining these, we can use Array.filter to ensure only unique element are returned in the array

```javascript
// Using Array.filter
const useFilter = arr => {
  return arr.filter((value, index, self) => {
    return self.indexOf(value) === index;
  });
};

const result = useFilter(arr);
```

This will give us the same result as before:


![Screen Shot 2020-03-30 at 5.04.56 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1585541388717/GmHXsZV7S.png)

## Using Iteration
The last method we will consider is using a for...of loop to iterate through the array and keep only unique elements in a new array.

```javascript
// Using iteration
const useIteration = arr => {
  const map = [];
  for (let value of arr) {
    if (map.indexOf(value) === -1) {
      map.push(value);
    }
  }

  return map;
};

const result = useIteration(arr);
```

We create a new array, simply loop through the initial array and then if the current element is not in the new array, we push it into the new array else, we leave it out. At the end of the iteration, we return the new array that contains unique values.

It also produces the correct result for us


![Screen Shot 2020-03-30 at 5.04.56 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1585541388717/GmHXsZV7S.png)

That is three simple ways to return unique values in an array in ES6. 

Note: We did not discuss the time and space complexity using these simple algorithms. If you would like to discuss it, why not add a comment either on the youtube page or on the comment below. 

We will be discussing array sorting in the next episode of JavaScript Snippet Series.  Hope to see you back here soon.