Set vs Array

Written byPhuoc Nguyen

Created

28 Aug, 2023

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

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

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