How to Create a Distinct Array in JavaScript

In JavaScript, a distinct array is an array where each element appears only once. If you have an array with duplicate values and you want to remove those duplicates to create a new array with unique elements, you can use several methods. This article will guide you through different approaches to achieve this.

What is a Distinct Array?

A distinct array is an array that contains only unique elements. For example:

• Original array: [1, 2, 2, 3, 4, 4, 5]
• Distinct array: [1, 2, 3, 4, 5]

Method 1: Using the Set Object

The easiest way to create a distinct array in JavaScript is by using the Set object. A Set automatically removes duplicate values.

Example 1: Using Set

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const distinctArray = Array.from(new Set(originalArray));

console.log(distinctArray); // Output: [1, 2, 3, 4, 5]

Explanation

1. new Set(originalArray) creates a Set from the original array, automatically removing duplicates.
2. Array.from() converts the Set back into an array.

Method 2: Using a Loop

If you prefer not to use the Set object, you can create a distinct array manually using a loop.

Example 2: Using a Loop

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const distinctArray = [];

for (const item of originalArray) {
  if (!distinctArray.includes(item)) {
    distinctArray.push(item);
  }
}

console.log(distinctArray); // Output: [1, 2, 3, 4, 5]

Explanation

1. Initialize an empty array distinctArray to store unique elements.
2. Loop through each element of the original array.
3. For each element, check if it already exists in distinctArray using includes().
4. If it does not exist, add it to distinctArray using push().

Method 3: Using Array.prototype.filter

You can also use the filter() method to create a distinct array.

Example 3: Using filter()

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const distinctArray = originalArray.filter((item, index) => {
  return originalArray.indexOf(item) === index;
});

console.log(distinctArray); // Output: [1, 2, 3, 4, 5]

Explanation

1. The filter() method creates a new array with elements that pass the test provided by the callback function.
2. The callback function checks if the current element’s first occurrence index is the same as the current index. If it is, the element is unique.

Method 4: Using Array.from() with Set

This is a modern approach that combines the Set object with Array.from().

Example 4: Using Array.from() with Set

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const distinctArray = Array.from(new Set(originalArray));

console.log(distinctArray); // Output: [1, 2, 3, 4, 5]

Explanation

1. new Set(originalArray) creates a Set from the original array, removing duplicates.
2. Array.from() converts the Set back into an array.

Example with Strings

You can also use these methods with arrays of strings.

Example 5: Using Set with Strings

const originalArray = ['apple', 'banana', 'banana', 'orange'];
const distinctArray = Array.from(new Set(originalArray));

console.log(distinctArray); // Output: ['apple', 'banana', 'orange']

Frequently Asked Questions (FAQs)

1. Does the order of elements change when using Set?

No, the order of elements remains the same as the original array.

2. Can I use these methods with objects in the array?

Yes, but the Set method will consider objects as unique if they are different instances. For example:

const originalArray = [{a: 1}, {a: 1}, {a: 2}];
const distinctArray = Array.from(new Set(originalArray));

console.log(distinctArray.length); // Output: 3

If you want to compare objects by their content, you need to implement a custom solution.

3. Which method is the most efficient?

The Set method is generally the most efficient, especially for large arrays, because it has a time complexity of O(n).

4. Can I make the array distinct while preserving the order?

Yes, all the methods mentioned above preserve the order of elements.

5. How to handle case sensitivity in strings?

If you want to make the array distinct in a case-insensitive manner, you need to normalize the strings first. For example:

const originalArray = ['Apple', 'apple', 'Banana'];
const lowerCaseArray = originalArray.map(item => item.toLowerCase());
const distinctArray = Array.from(new Set(lowerCaseArray));

console.log(distinctArray); // Output: ['apple', 'banana']

Conclusion

Creating a distinct array in JavaScript is straightforward with the help of the Set object or other array methods like filter() and loops. Choose the method that best fits your needs based on readability, performance, and compatibility.