This content originally appeared on DEV Community and was authored by thinkThroo

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 us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

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

This content originally appeared on DEV Community and was authored by thinkThroo

Print Share Comment Cite Upload Translate Updates

APA

thinkThroo | Sciencx (2024-10-18T20:43:42+00:00) Create a unique array using Set() in JavaScript.. Retrieved from https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/

MLA

" » Create a unique array using Set() in JavaScript.." thinkThroo | Sciencx - Friday October 18, 2024, https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/

HARVARD

thinkThroo | Sciencx Friday October 18, 2024 » Create a unique array using Set() in JavaScript.., viewed ,<https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/>

VANCOUVER

thinkThroo | Sciencx - » Create a unique array using Set() in JavaScript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/

CHICAGO

" » Create a unique array using Set() in JavaScript.." thinkThroo | Sciencx - Accessed . https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/

IEEE

" » Create a unique array using Set() in JavaScript.." thinkThroo | Sciencx [Online]. Available: https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/. [Accessed: ]

rf:citation

» Create a unique array using Set() in JavaScript. | thinkThroo | Sciencx | https://www.scien.cx/2024/10/18/create-a-unique-array-using-set-in-javascript/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.