In this article, we’ll have a look at quite a few JavaScript quirks.

Some useful tips and tricks in JavaScript Image by CodingExercises

A Set is a Collection of Unique Members

To create a set, we use the Set() constructor.

var daysOfTheWeek = new Set();

To populate a set, we use the add method.

daysOfTheWeek.add('Mon');
daysOfTheWeek; // returns: Set(1) { 'Mon' }

A useful thing about sets is that if you already have a value inside of a set, using the add method to add an exact same value is not possible; the JavaScript engine will simply ignore it.

For example, if we continue the above code by adding Tuesday, it will work:

daysOfTheWeek.add('Tue');
daysOfTheWeek; // returns: Set(2) {"Mon", "Tue" }

However, re-adding Monday to our set will simply be ignored:

daysOfTheWeek.add('Mon');
daysOfTheWeek; // still returns: Set(2) {"Mon", "Tue" }

Convert a set to an array

To convert a set to an array, we can:

  • use a spread operator
  • use the Array.from method

With the spread operator, it’s simple:

var a = [...daysOfTheWeek];
a; // returns an array of values from the original set in the form of an array

It’s not much harder using the Array.from method either:

var arr = Array.from(daysOfTheWeek);
arr; // returns an array of values from the original set in the form of an array

Convert an array to a set

To convert an array to a set, we can just pass the array to a set constructor:

var arr = ['one', 'two', 'three', 'one', 'two', 'three'];
var set = new Set(arr);
set; // returns a Set with values same as in the array

Remove duplicates from an array using a set

Now for a fun part. We can easily remove duplicates from an array by converting it to a set, then back to array.

Here it is:

var arr = ['one', 'two', 'three', 'one', 'two', 'three'];
var set = new Set(arr);
var arr2 = [...set];
arr; // returns: the original array with 6 members
arr2; // returns: a filtered array with 3 unique members

Just for fun (re-duplicate an array)

Let’s try to do the opposite, and re-duplicate array members, with a twist: we’ll do that only if they’re numbers, otherwise we’ll remove them.

Here’s one approach:

var arr = [1,2,3, 'a'];
arr = arr.join('');
arr = arr.repeat(2);
arr = [...arr]; // returns: ["1", "2", "3", "a", "1", "2", "3", "a"]
arr = arr.map(x => +x); // returns: [1,2,3,NaN,1,2,3,NaN]
arr = arr.filter(x => !Number.isNaN(x)); // returns: [1,2,3,1,2,3]

Does a value exist in a set?

Let’s add a new array, we’ll call it arr. We’ll also add a new set and call it set.

var arr = ['Mon', 'Tue', 'Wed'];
var set = new Set();
set.add('Mon');
set.add('Tue');
set.add('Wed');

Now we can check if the set has a 'Mon' string.

set.has('Mon');

We can also check if an array includes a 'Mon'.

arr.includes('Mon');

Here’s a quick check to see if both of them have the 'Mon' entry:

set.has('Mon') === arr.includes('Mon')

Sets don’t consider objects the same even if they hold the same values

Expectedly, all objects are unique, even if their values are exactly the same.

For example:

var set = new Set().add(['a','b','c']).add(['a','b','c']);
set; // returns Set { [ 'a', 'b', 'c', ], [ 'a', 'b', 'c' ]}

Check the length of a set

To check the length of a set, we use the size property. For example:

var arr = [1,2,3,4,5];
var set = new Set(arr);
set.size; // returns: 5

Using two sets to find the items that exist in both

Let’s say our first set has these values:

var arr1 = [1,2,3,9];
var set1 = new Set(arr1);

Let’s say our second set has these values:

var arr2 = [4,5,6,9];
var set2 = new Set(arr2);

We can now find the duplicate members of each set by doing this:

var duplicates = new Set(   [...set1].filter( x => set2.has(x) ) );
console.log(duplicates);