ES6 Set vs WeakSet vs Arrays – Describing the differences

Mon Oct 23 2017

Paul Shan

If you have used languages like Ruby, Python or Java, surely you have interacted with Set. Set has been introduced to JavaScript little late, in 2015, version 6 (ES6). The inclusion of Set & WeakSet has increased the efficiency of data storing & flexibility of JS. In this article I will be taking you on a short tour of Set and WeakSet.

Set

What is Set?

Using the Set class you can create an array like heterogeneous iterable object, which will contain only unique values in it. Unique is not just unique by values but also by types. i.e. it will consider "2" and 2 separate or different. In case of objects; two objects having the same properties and values will not be considered similar; but only the ones with same memory address will.

Syntax:

var mySet = new Set([iterable]);

Set Examples

var mySet= new Set([0,1]); // 0, 1
mySet.add(2); // 0, 1, 2
mySet.add(2); // 0, 1, 2
mySet.add("Hello"); // 0, 1, 2, 'Hello'
mySet.add({a:1, b:2}); // 0, 1, 2, 'Hello', {a:1, b:2}

mySet.add(function(){}); // 0, 1, 2, 'Hello', {a:1, b:2}, [Function]

mySet.has("Hello"); // ture
mySet.delete("Hello"); // 'Hello' deleted
mySet.has("Hello"); // false

mySet.size; // 5

mySet.clear(); // Set Cleared

Hope the examples have given you a clear view on Sets and you may have also find similarities of Set with JavaScript Array. So, below is the table to differentiate between them.

Set vs Array

Array Set
Contains whatever value you push Contains only unique values
Focused to index. You need to write code to find and delete a particular element Focused to value. You can delete a value easily
.push() to add an element .add() to add an element
.includes() (ES7) to find if an element is there in an array .has() to find if an element is there in a set
.length to find how many elements .size to find number of elements
arr.splice(0,arr.length) to empty an array mySet.clear() to clear a Set

WeakSet

What is WeakSet

Now that you know about set, it will be easier to pick WeakSet from here. If you have read our Map vs WeakMap article, you could have already started guessing what is the difference.
In short, a WeakMap is a collection similar to Set, which holds unique values; but it only holds Objects and nothing else. If an object which is there in your WeakSet object has no other reference variable left, it will automatically be deleted.

Syntax:

var myWeakSet= new WeakSet([iterable with only objects]);

WeakSet Examples

var myWeakSet = new WeakSet([{a:1}]);
var obj1 = {o:1};
var obj2 = {o:2};
myWeakSet.add(obj1); 
myWeakSet.has(obj1); // true
myWeakSet.has(obj2); // false
myWeakSet.add(obj2); 
myWeakSet.has(obj2); // true
delete obj2; // don't take it literally. You cant delete object like that. Use scope to execute this.
myWeakSet.has(obj2); // false, cause you deleted obj2, so WeakSet releases it automatically
myWeakSet.delete(obj1); //obj1 deleted from the set
myWeakSet.add(2); // ERROR, no primitive value

As you can see, no primitive values can be added to WeakSet. It only accepts objects. Functionalities and methods are very similar to Set, but it will auto delete that object from the list which has no other reference left.

Set vs WeakSet

Set WeakSet
Can contain any type of values Can only contain objects
To find number of elements use .size To find elements count use .length
.forEach() is available to iterate No .forEach() to iterate
Nothing is auto destroyed If an element object has no other reference left, it will be auto released to garbage collector

SHARE THIS ARTICLE

Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading