What are the Differences between Array and Set in JavaScript?

Written by Kolade Chris | Dec 1, 2024 | #JavaScript | 5 minutes Read

In JavaScript, array and set are both data structures used to associate data.

While both might seem similar at first glance, they serve distinct purposes and behave differently.

Arrays are more versatile, allowing duplicates and offering indexed access, while sets focus on uniqueness and efficient lookups.

Let’s explore the key differences between arrays and sets so you can have a clear picture of when and why to use each.

Ability to Store Duplicate Values

An Array lets you store duplicates but a set does not. This makes arrays more suitable when you need values to be repeated.

In the example below, the “Chimp” entry happens to be a duplicate. It was accepted by the array but ignored by the set:

1
const myAnimalsArr = ['Elephant', 'Chimp', 'Fowl', 'Chimp', 'Goat', 'Lion'];
2
console.log(myAnimalsArr); // (6) ['Elephant', 'Chimp', 'Fowl', 'Chimp', 'Goat', 'Lion']
3

4
const myAnimalsSet = new Set([
5
  'Elephant',
6
  'Chimp',
7
  'Fowl',
8
  'Chimp',
9
  'Goat',
10
  'Lion',
11
]);
12
console.log(myAnimalsSet); // Set(5) {'Elephant', 'Chimp', 'Fowl', 'Goat', 'Lion'}

Accessing Elements by Position

An Array allows direct indexing by position, but a set does not. If you want to access an item in a set by positioning, you have to convert it to an array. In the array below, you can access any of the elements by specify its index:

1
const myAnimalsArr = ['Elephant', 'Chimp', 'Fowl', 'Chimp', 'Goat', 'Lion'];
2
console.log(myAnimalsArr[3]); // Chimp

To do the same with a set, spread the data inside square braces and attach the index to it:

1
const myAnimalsSet = new Set([
2
  'Elephant',
3
  'Chimp',
4
  'Fowl',
5
  'Chimp',
6
  'Goat',
7
  'Lion',
8
]);
9
console.log([...myAnimalsSet][3]); // Goat

Built-in Methods for Manipulation

JavaScript has unique built-in methods for manipulating both arrays and sets.

An Array has a ton of these methods, with many more being added after almost every JavaScript update release. They include push(), pop(), map(), filter(), and more. With set, you get access to methods like add(), delete(), has(), and clear().

How to Convert Between Array and Set

In many situations, you might need to convert an array to a set and set to an array. For instance, if you want to remove a duplicate from an array, then you would need to convert it to a set:

1
const myAnimalsArr = [
2
  'Elephant',
3
  'Chimp',
4
  'Fowl',
5
  'Chimp',
6
  'Goat',
7
  'Lion',
8
  'Fowl',
9
];
10
console.log(myAnimalsArr);
11
// (7) ['Elephant', 'Chimp', 'Fowl', 'Chimp', 'Goat', 'Lion', 'Fowl']
12

13
const removeDuplicatesFromAnimalsArray = new Set([...myAnimalsArr]);
14
console.log(removeDuplicatesFromAnimalsArray);
15
// Set(5) {'Elephant', 'Chimp', 'Fowl', 'Goat', 'Lion'}

A good case for converting a set to an array is direct indexing and having more methods available for manipulation:

1
const myAnimalsSet = new Set([
2
  'Elephant',
3
  'Chimp',
4
  'Fowl',
5
  'Chimp',
6
  'Goat',
7
  'Lion',
8
]);
9

10
convertAnimalsSetToArray = [...myAnimalsSet];
11
console.log(convertAnimalsSetToArray);
12
// (5) ['Elephant', 'Chimp', 'Fowl', 'Goat', 'Lion']
13
// now you can use direct indexing and array methods

Summary

As you’ve seen, arrays and sets are both essential tools for working with data, but they shine in different scenarios.

Use arrays when you need order and duplicates, and choose sets for unique values and faster lookups.

For a better lookup of the differences between an array and a set, here’s a tabulation with more differences added:

Share this article by copying the link:

Or share the it with your friends and family on social media: