#49 Coding - Write a code in javascript to remove duplicates from an array

Method 1: Using ES6 `Set` (The Modern & Easiest Way)

The ES6 (ECMAScript 2015) introduced a new built-in object called Set. A Set lets you store unique values of any type, whether primitive values or object references. This makes it perfect for removing duplicates!

The process is simple: convert your array to a Set (which automatically handles uniqueness), and then convert the Set back into an array using the spread operator (...) or Array.from().

Code Example:

function removeDuplicatesUsingSet(arr) {
  return [...new Set(arr)];
}

// Test cases
const numbers = [1, 2, 2, 3, 4, 4, 5, 1, 6];
const uniqueNumbers = removeDuplicatesUsingSet(numbers);
console.log("Unique Numbers (Set):", uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6]

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape', 'banana', 'kiwi'];
const uniqueFruits = removeDuplicatesUsingSet(fruits);
console.log("Unique Fruits (Set):", uniqueFruits); // Output: ['apple', 'banana', 'orange', 'grape', 'kiwi']

const mixedData = [1, 'hello', 2, 'world', 1, 'hello', true, false, true];
const uniqueMixedData = removeDuplicatesUsingSet(mixedData);
console.log("Unique Mixed Data (Set):", uniqueMixedData); // Output: [1, 'hello', 2, 'world', true, false]

Explanation:

• new Set(arr): Creates a new Set object, populating it with elements from the input arr. Duplicates are automatically discarded.
• [...setObject]: The spread syntax transforms the Set object back into an array.

Pros: This is by far the most concise, readable, and often the most performant method for modern JavaScript environments.

Cons: Not compatible with very old browsers (e.g., IE 11 and below), but widely supported in all modern browsers and Node.js.

Method 2: Using `filter()` and `indexOf()` (The Classic Way)

Before Set was widely available, a common technique involved using the filter() array method in combination with indexOf().

The filter() method creates a new array with all elements that pass the test implemented by the provided function. Our test checks if the first occurrence of an element is at the current index. If it is, it means we haven't encountered this element yet, so we keep it.

Code Example:

function removeDuplicatesFilterIndexOf(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

// Test cases
const numbers = [1, 2, 2, 3, 4, 4, 5, 1, 6];
const uniqueNumbers = removeDuplicatesFilterIndexOf(numbers);
console.log("Unique Numbers (filter & indexOf):", uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6]

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape', 'banana', 'kiwi'];
const uniqueFruits = removeDuplicatesFilterIndexOf(fruits);
console.log("Unique Fruits (filter & indexOf):", uniqueFruits); // Output: ['apple', 'banana', 'orange', 'grape', 'kiwi']

Explanation:

• arr.filter((item, index) => ...): Iterates over each item in the arr along with its index.
• arr.indexOf(item) === index: For each item, indexOf(item) returns the first index at which that item can be found in the array. If this first index is the same as the current index of the item being processed, it means this is the first time we've encountered this particular value, so it's unique and kept by the filter. If indexOf(item) returns an index smaller than the current index, it means we've already seen this value, and it's a duplicate, so it's filtered out.

Pros: Very widely compatible (works in older browsers), good for understanding array methods.

Cons: Less efficient for very large arrays, especially if there are many duplicates, because indexOf iterates through the array for each item.

Method 3: Using `reduce()` (The Functional Way)

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value. We can use it to build a new array of unique elements.

Code Example:

function removeDuplicatesReduce(arr) {
  return arr.reduce((accumulator, current) => {
    if (!accumulator.includes(current)) {
      accumulator.push(current);
    }
    return accumulator;
  }, []); // Initial value of accumulator is an empty array
}

// Test cases
const numbers = [1, 2, 2, 3, 4, 4, 5, 1, 6];
const uniqueNumbers = removeDuplicatesReduce(numbers);
console.log("Unique Numbers (reduce):", uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6]

const fruits = ['apple', 'banana', 'orange', 'apple', 'grape', 'banana', 'kiwi'];
const uniqueFruits = removeDuplicatesReduce(fruits);
console.log("Unique Fruits (reduce):", uniqueFruits); // Output: ['apple', 'banana', 'orange', 'grape', 'kiwi']

Explanation:

• arr.reduce((accumulator, current) => { ... }, []);: The reduce method iterates over the array. accumulator is the array being built (initially empty []), and current is the element being processed in the current iteration.
• if (!accumulator.includes(current)): Checks if the current element is already present in our accumulator array.
• accumulator.push(current);: If the current element is not found in the accumulator (meaning it's unique so far), it's added.
• return accumulator;: The accumulator is returned for the next iteration.

Pros: A good functional programming approach; helps understand reduce.

Cons: Performance is similar to the `filter()`/`indexOf()` method due to the internal includes() check, which iterates through the accumulator for each element.

Which method should you choose?

• For most modern JavaScript applications (web browsers, Node.js), the Set method is the most recommended due to its simplicity, readability, and performance.
• If you absolutely need to support very old browser environments (like IE 11 or older) without transpilation, the filter() and indexOf() method is a reliable fallback.
• The reduce() method is a nice way to solve this problem for those who prefer a functional style, but it generally doesn't offer performance benefits over `Set` or `filter/indexOf` for this specific task.

And there you have it! Multiple ways to tackle the common problem of removing duplicates from an array in JavaScript. Each method has its strengths, but the ES6 Set approach has truly revolutionized how we handle uniqueness in arrays.

Happy Coding!