Implementing Unique in JavaScript (Removing Duplicates from an Array)

The purpose 

JavaScriptでUnique（Arrayの中の重複を削除する）を実装します。

filterとSetを使用した2つの方法を紹介します。

Implementation

implementation using filter

We’ll remove duplicate elements using the filter() function. We achieve this by using findIndex() to check if an element identical to the current element exists at an earlier index. If such an element is found (meaning arr.findIndex((ele) => element == ele) == index), the current element is marked for removal.

(You might wonder, “Why aren’t elements with larger indices removed?” This isn’t an issue because those elements will be removed when they are themselves checked later in the iteration process. For instance, in the example below, the first occurrence of "element0" will be kept, while the second "element0" will be removed when it’s evaluated.)

const elements = ["element0", "element0", "element1", "element2", "element3", "element4","element1","element1","element2"];

const result = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element == ele) == index
);

console.log(result);

Result：

Array ["element0", "element1", "element2", "element3", "element4"]

Advanced Use Cases

The definition of whether an element is identical (for the purpose of uniqueness) is determined by the comparison function you provide to findIndex(). This means elements don’t necessarily have to be strictly identical in every sense.

The example below shows the results of performing a case-sensitive Unique (result) and a case-insensitive Unique (resultCaseInsensitive).

const elements = ["Element0", "element0", "element1", "element2", "element3", "element4","element1","Element1","element2"];

const result = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element == ele) == index
);
const result2 = elements.filter((element, index, arr) => 
  arr.findIndex((ele) => element.toUpperCase() == ele.toUpperCase()) == index
);
console.log(result);
console.log(result2);

Result：

 Array ["Element0", "element0", "element1", "element2", "element3", "element4", "Element1"]
 Array ["Element0", "element1", "element2", "element3", "element4"]

To make an array of objects unique, you’ll perform the check using specific properties, like element.name == ele.name, for instance.

implementation using Set

Create a Set (which is like an Array that doesn’t allow duplicate elements), then convert it to an Array.

const elements = ["element0", "element0", "element1", "element2", "element3", "element4","element1","element1","element2"];

console.log([...new Set(elements)]);

Result：

Array ["element0", "element1", "element2", "element3", "element4"]

Result

We have successfully implemented a Unique function in JavaScript to remove duplicates from an Array.

Reference

Set - JavaScript | MDN

Set オブジェクトは、プリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができます。

developer.mozilla.org