Set vs Array
Written byPhuoc Nguyen
Category
JavaScript
Created
28 Aug, 2023
JavaScript is a powerful programming language that enables developers to manipulate data in various ways. Sets and arrays are two of the most frequently used data structures in JavaScript, each with its own unique features. Although both can store collections of data, they differ in several significant ways.
In the following sections, we'll explore these differences and learn more about sets and arrays.
#Arrays
An array is like a container that can hold a bunch of values. Each value in an array has an index number that helps you find it. You can store all sorts of things in a JavaScript array, like numbers, words, or even whole objects.
Here's how you can make your own array in JavaScript:
let colors = ['red', 'green', 'blue'];
To get the value at a certain index in an array, you can use this simple syntax:
colors[0]; // `red`
colors[1]; // `green`
Arrays come equipped with built-in methods for managing their values. For instance, you can use methods like
`push()`
and `pop()`
to add or remove values from the end of an array. Similarly, you can use `shift()`
and `unshift()`
to add or remove values from the beginning of an array.#Sets
A set is a useful data structure for storing a collection of unique values. Unlike arrays, sets don't have indexes. Instead, each value in a set is unique and appears only once.
Here's an example of how to create a set in JavaScript:
let colors = new Set(['red', 'green', 'blue']);
Good to knowHave you ever wondered what happens when we declare a set with duplicated values? Does the browser throw an exception? The answer is no, it doesn't. Actually, it automatically removes the duplicate values for us.Let's take an example. If you pass the array`['red', 'green', 'blue', 'green', 'red']`
to a`Set`
constructor, then the final set only contains the unique values, which is`Set(['red', 'green', 'blue'])`
.Using a`Set`
is a way to remove duplicates from an array. So, if you want to get rid of duplicate values in an array, just pass it to a`Set`
constructor and voila!
Sets has some methods to add or remove a value. For example:
colors.add('yellow');
colors.delete('green');
You can also use the
`has()`
method to check if a value is in the set:colors.has('red'); // true
colors.has('white'); // false
#Differences
The main difference between sets and arrays is that arrays can contain duplicates, while sets cannot. Additionally, arrays can be accessed using an index, while sets cannot.
Arrays are typically used when you need to store a list of items in a specific order, even if some items appear more than once. Sets, on the other hand, are ideal for storing a collection of unique values without worrying about their order.
Arrays come with various built-in methods for manipulating data, while sets have fewer methods available. However, sets have some unique methods of their own, such as
`clear()`
, which removes all values from the set.colors.clear();
When it comes to sets and arrays, each has its own strengths and weaknesses. Choosing the right one for your project depends on the specific needs and requirements.
Questions? 🙋
Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.
Recent posts ⚡
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Quickly insert alternate characters while typing
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
Display the line numbers in a text area
24 Sep, 2023
Select a given line in a text area
24 Sep, 2023
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn