Arrays vs Set in JavaScript

Javascript Web Development Object Oriented Programming

In this article, we will learn about the difference between an array and a set in JavaScript. Arrays are used to store ordered collections of elements, whereas in Sets, we can store only unique values.

What is an Array?

An Array is an ordered, indexed collection of values in JavaScript. It allows duplicate values and provides various built-in methods to manipulate elements.

Syntax

let numbers= [1, 2, 3, 4, 5];

What is a Set?

A Set is an unordered collection of unique values in JavaScript. Unlike arrays, a Set does not allow duplicate values.

Syntax

let numbers= new Set([1, 2, 3, 4, 5]);

The Set data type was introduced in ES6, and the difference between array and set is that while an array can have duplicate values, a set can't. Elements can be accessed in the array using an index, which isn't possible in a Set since it uses keys, and elements can be traversed only in the way they were entered.

Difference Table

The following are the key differences between a set and an array in JavaScript ?

Sr. No.	Key	Array	Set
1	Duplicates	Allows duplicates.	Only stores unique values.
2	Ordering	Elements are stored in a specific order.	Unordered collection.
3	Indexing	Access elements using an index (e.g., arr[0]).	No direct indexing.
4	Performance	Slower for checking existence (uses includes()).	Faster lookup using has().
5	Modification	Can modify elements directly.	Elements can only be added or removed.
6	Iteration	Uses for, forEach, map, etc.	Uses forEach, for...of, and the spread operator.

Example

Below is an example displaying the difference between an array and a Set in JavaScript ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Vs Set</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result, .sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .result {
      color: red;
      margin-top: 10px;
      white-space: pre-line;
   }
</style>
</head>
<body>
<h1>Array Vs Set</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">Convert</button>
<h3>Click on the above button to convert the above array into a set</h3>
<button class="Disp">Display</button>
<h3>Click on the above button to display array and set elements using index</h3>
<script>
   let resultEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let arr = [2, 3, 4, 2, 3, 4, "A", "A", "B", "B"];
   let set1;
   sampleEle.innerHTML = "arr = " + arr;
   document.querySelector(".Btn").addEventListener("click", () => {
      set1 = new Set(arr);
      resultEle.innerHTML = "set1 = " + [...set1];
   });
   document.querySelector(".Disp").addEventListener("click", () => {
      resultEle.innerHTML += "

arr[1] = " + arr[1] + "
set1[1] = " + ([...set1][1] !== undefined ? [...set1][1] : "undefined");
   });
</script>
</body>
</html>