Set vs Array in JavaScript: When to Use Which?

JavaScript offers two powerful data structures for storing collections: Setand Array. While both can store multiple values, their unique characteristics make them better suited for different scenarios. Let's explore when and why you might choose one over the other.

1. Unique Values by Default

The most distinctive feature of Set is its automatic handling of duplicates.

// Arrays allow duplicates
const arr = [1, 2, 2, 3, 3, 4];
console.log(arr); // [1, 2, 2, 3, 3, 4]

// Sets automatically remove duplicates
const set = new Set([1, 2, 2, 3, 3, 4]);
console.log([...set]); // [1, 2, 3, 4]

// Removing duplicates from an array using Set
const uniqueArray = [...new Set(arr)];
console.log(uniqueArray); // [1, 2, 3, 4]

2. Element Checking Performance

Set provides much faster lookup times for checking if an element exists.

const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
const largeSet = new Set(largeArray);

// Array lookup
console.time('Array includes');
console.log(largeArray.includes(999999));
console.timeEnd('Array includes');

// Set lookup
console.time('Set has');
console.log(largeSet.has(999999));
console.timeEnd('Set has');

// Set is significantly faster because it uses hash table internally

3. Available Methods and Operations

Arrays offer more built-in methods for data manipulation, while Sets focus on uniqueness management.

// Array methods
const arr = [1, 2, 3, 4, 5];
arr.push(6);                    // Add to end
arr.pop();                      // Remove from end
arr.unshift(0);                 // Add to beginning
arr.shift();                    // Remove from beginning
arr.splice(2, 1, 'new');       // Replace elements
arr.slice(1, 3);               // Extract portion
arr.map(x => x * 2);           // Transform elements
arr.filter(x => x > 2);        // Filter elements
arr.reduce((a, b) => a + b);   // Reduce to single value

// Set methods
const set = new Set([1, 2, 3, 4, 5]);
set.add(6);                    // Add value
set.delete(6);                 // Remove value
set.has(5);                    // Check existence
set.clear();                   // Remove all values

4. Order and Index Access

Arrays maintain insertion order and provide index-based access, while Sets only maintain insertion order.

// Array index access
const arr = ['a', 'b', 'c'];
console.log(arr[0]);      // 'a'
console.log(arr[1]);      // 'b'
arr[1] = 'x';            // Direct modification

// Set has no index access
const set = new Set(['a', 'b', 'c']);
console.log([...set][0]); // Need to convert to array first
// No direct index modification possible

5. Memory Usage

Sets generally use more memory than arrays but provide faster lookups.

// Memory comparison (rough example)
const numbers = Array.from({ length: 1000 }, (_, i) => i);

// Array memory
const arr = [...numbers];
console.log(process.memoryUsage().heapUsed);

// Set memory
const set = new Set(numbers);
console.log(process.memoryUsage().heapUsed);
// Set typically uses more memory due to hash table structure

6. Common Use Cases

When to Use Arrays:

// 1. When order and index access matters
const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
const currentTrack = playlist[currentIndex];

// 2. When you need array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = numbers.reduce((a, b) => a + b, 0);

// 3. When duplicates are acceptable or desired
const votes = ['yes', 'no', 'yes', 'yes', 'no'];
const yesVotes = votes.filter(vote => vote === 'yes').length;

When to Use Sets:

// 1. When tracking unique values
const uniqueVisitors = new Set();
function logVisitor(userId) {
    uniqueVisitors.add(userId);
    console.log(`Total unique visitors: ${uniqueVisitors.size}`);
}

// 2. For quick lookup operations
const allowedUsers = new Set(['user1', 'user2', 'user3']);
function checkAccess(userId) {
    return allowedUsers.has(userId);
}

// 3. For removing duplicates
function getUniqueHashtags(posts) {
    const uniqueTags = new Set();
    posts.forEach(post => {
        post.hashtags.forEach(tag => uniqueTags.add(tag));
    });
    return [...uniqueTags];
}

Converting Between Sets and Arrays

You can easily convert between Sets and Arrays when needed.

// Array to Set
const arr = [1, 2, 2, 3, 3, 4];
const set = new Set(arr);

// Set to Array - three methods
const back1 = [...set];
const back2 = Array.from(set);
const back3 = Array.from(set.values());

// Useful for array deduplication
const deduped = [...new Set(arr)];

Conclusion

Choose Array when you need:

• Index-based access
• Extensive array methods (map, reduce, filter, etc.)
• Duplicate values
• Memory efficiency
• Traditional iteration patterns

Choose Set when you need:

• Unique values only
• Fast lookup operations
• Simple add/remove operations
• To maintain a list of unique items
• Quick deduplication

Remember, you can always convert between the two types when needed, so pick the one that best suits your immediate needs.