Create a unique array using Set() in JavaScript.

In this article, we analyze how you can create a unique array using new set in JavaScript, inspired by a code reference from TypeDoc.

Let’s first understand this unique function in the above image with an example and then we will look at how this is used in TypeDoc source code.

unique function

export function unique<T>(arr: Iterable<T> | undefined): T[] {
    return Array.from(new Set(arr));
}

This function is picked from typedoc/src/lib/utils/array.ts.

Array.from static method creates a new, shallow-copied Array instance from an iterable or array-like object.

Array.from() lets you create Arrays from:

• iterable objects (objects such as Map and Set); or, if the object is not iterable,

• array-like objects (objects with a length property and indexed elements).

If you were to run this below code in your browser’s console, you will quickly realise that Set removes duplicate values.

new Set([1,2,3,1,2,5,4,3,])
// result: Set(5) {1, 2, 3, 5, 4}

Combining these two concepts, you can now create a unique array using new Set(), simple and easy.

How TypeDoc uses unique function

TypeDoc imports unique function into lib/application.ts at L366.

There is a similar approach suggestion in this Stackoverflow answer.

const unique = (list) => {
  return [...new Set(list)];
}

This is picked from Stackoverflow and uses spread operator instead of Array.from method.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at [e-mail]

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/TypeStrong/typedoc/blob/master/src/lib/application.ts#L366

2. https://github.com/TypeStrong/typedoc/blob/master/src/lib/utils/array.ts#L98C8-L100C2

3. https://stackoverflow.com/questions/6940103/how-do-i-make-an-array-with-unique-elements-i-e-remove-duplicates

4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from