JavaScript - Creating unique array from a given array

Screenshot from the tutorial

Creating a Unique Array from a Given Array in JavaScript

In the world of programming, dealing with arrays is a common task. Often, you may find yourself needing to create a unique array—one that contains no duplicate values—derived from an existing array. In this tutorial, we will explore several methods to achieve this in JavaScript, focusing on simplicity and efficiency.

Why Create a Unique Array?

Creating a unique array is crucial in various scenarios, such as:

• Eliminating duplicates from user input.
• Preparing data for analysis where duplicates can skew results.
• Ensuring that a set of items is distinct, such as product IDs or usernames.

Basic Approach: Using Set

One of the simplest and most efficient ways to create a unique array in JavaScript is by using the Set object. A Set automatically removes duplicates for you.

Example

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

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

Explanation

• We create a new Set with the original array as an argument, which removes duplicates.
• We then use the spread operator ... to convert the Set back into an array.

Alternative Method: Using filter()

If you are interested in a more manual approach, you can also use the filter() method along with indexOf().

Example

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

const uniqueArray = originalArray.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

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

Explanation

• The filter() method creates a new array with all elements that pass the test implemented by the provided function.
• The condition checks whether the current value's first occurrence index matches the current index. If true, it means the value is unique.

Using reduce()

Another interesting method to create a unique array is through the reduce() function. This allows you to build the unique array iteratively.

Example

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

const uniqueArray = originalArray.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

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

Explanation

• The reduce() method executes a reducer function on each element of the array, resulting in a single output value.
• We initialize an empty array as the accumulator and check if the current value is already included before adding it.

Performance Considerations

While all methods discussed are effective, their performance can vary based on the size of the array and the number of duplicates:

• Set: Generally offers the best performance for large arrays due to its underlying hash table implementation.
• filter(): Can be slower because it checks the entire array for each element.
• reduce(): Similar to filter(), it can be less efficient due to the use of includes().

Conclusion

Creating a unique array in JavaScript can be accomplished through several methods, each with its advantages. The Set method is the most straightforward and efficient for most use cases, while filter() and reduce() provide more flexibility for customizing the uniqueness criteria.

Understanding these approaches will not only enhance your JavaScript skills but also empower you to handle data more effectively. So go ahead, try these methods, and see how they can simplify your coding tasks!

Feel free to leave a comment or share your own methods for creating unique arrays below!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios