Set vs Array

Written byPhuoc Nguyen

#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 know

Have 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 🥷.

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.