Find unique and biggest string values from an array in JavaScript

In JavaScript, we often need to filter arrays to get unique values and sort them by specific criteria. This article demonstrates how to find the longest unique string values from an array of objects.

Problem Statement

Given an array of objects with text properties, we need to create a function that returns n objects with the longest unique string values. If fewer than n unique objects exist, return all unique objects.

const arr = [
    {text: 'use'},
    {text: 'secur'},
    {text: 'form'},
    {text: 'user'},
    {text: 'users'},
    {text: 'form'},
    {text: 'secur'},
    {text: 'sec'},
    {text: 'users'},
    {text: 'secu'},
    {text: 'secur'},
    {text: 'for'},
    {text: 'form'}
];

console.log("Original array length:", arr.length);

Original array length: 13

Solution Implementation

The solution involves three main steps: sorting by string length, filtering for uniqueness, and limiting the results.

const arr = [
    {text: 'use'},
    {text: 'secur'},
    {text: 'form'},
    {text: 'user'},
    {text: 'users'},
    {text: 'form'},
    {text: 'secur'},
    {text: 'sec'},
    {text: 'users'},
    {text: 'secu'},
    {text: 'secur'},
    {text: 'for'},
    {text: 'form'}
];

const sorter = (a, b) => {
    return b.text.length - a.text.length;
}

const longestUnique = (arr, num) => {
    const copy = arr.slice();
    copy.sort(sorter);
    const map = new Map();
    const uniqueCopy = copy.filter(el => {
        const exists = map.get(el.text);
        if(exists){
            return false;
        };
        map.set(el.text, 1);
        return true;
    });
    return uniqueCopy.splice(0, num);
}

console.log("Top 4 longest unique strings:");
console.log(longestUnique(arr, 4));
console.log("\nAll unique strings (requesting 12):");
console.log(longestUnique(arr, 12));

Top 4 longest unique strings:
[
    { text: 'secur' },
    { text: 'users' },
    { text: 'form' },
    { text: 'user' }
]

All unique strings (requesting 12):
[
    { text: 'secur' },
    { text: 'users' },
    { text: 'form' },
    { text: 'user' },
    { text: 'secu' },
    { text: 'use' },
    { text: 'sec' },
    { text: 'for' }
]

How It Works

The function follows these steps:

1. Copy and Sort: Creates a copy and sorts by string length (descending)
2. Filter Duplicates: Uses a Map to track seen values and filter duplicates
3. Limit Results: Returns only the requested number of items

Alternative Approach Using Set

Here's a more concise version using Set for uniqueness:

const longestUniqueSimple = (arr, num) => {
    const seen = new Set();
    return arr
        .sort((a, b) => b.text.length - a.text.length)
        .filter(obj => {
            if (seen.has(obj.text)) {
                return false;
            }
            seen.add(obj.text);
            return true;
        })
        .slice(0, num);
}

console.log("Using Set approach:");
console.log(longestUniqueSimple(arr, 3));

Using Set approach:
[
    { text: 'secur' },
    { text: 'users' },
    { text: 'form' }
]

Key Points

• Always create a copy before sorting to avoid mutating the original array
• Map or Set can efficiently track unique values
• The function handles cases where fewer unique items exist than requested
• Sorting by string length ensures longest strings appear first

Conclusion

This approach efficiently combines sorting, deduplication, and limiting to find the longest unique string values. The Map-based solution provides clear tracking of duplicates while maintaining the desired order.