The Power of Template Literals and Set in JavaScript

I was recently solving a LeetCode medium problem to find the minimum area rectangle (problem number 939), and let me tell you, it was chaotic in the beginning. At first, I was solving it:

• First, identifying all 4 corners
• Finding the pairs with the least differences
• Then multiplying them to get the area

All this… manually. But that turned out to be a total mess — like, it had 3 nested for loops inside a while loop — and as expected, it threw a lovely little “Time limit exceeded” error.

While optimizing it, I came across an approach that was like adding all the coordinate arrays into a set — so I did. Then, when I called the values by the set.has() method, it said no such values were present in the set, and I was shocked… like… what??? Are you kidding me??? I have added them just now, and you are saying they aren’t there??

Anyway, moving forward, after that moment, I started searching for why this was happening. That’s when I came across something new — a turning point in solving the problem: stringifying the array.

Yes, you heard that right — stringifying the array before storing it in the set. Not like this: " [1, 3] ", but like this: "1,3" — Yep, you saw it right.

How to Do It Using Template Literals

First of all, let's see how it is done. So if we have an array like this:

points = [[1,2],[2, 3]] And we need to stringify it, we will use “template literal”.

(${x},${y})

This step converts the array into a unique string format so it can be added to the set. It’s a pretty amazing trick — it takes the x and y values from the array and turns them into a string, separated by a comma, like this: "x,y".

For example:

let set = new Set();
let points = [[1, 2], [2, 3]];
for (let [x, y] of points) {
 set.add(`${x},${y}`);
}
//i.e., `${x},${y}` → "1,2".

//Thus, the output will be:

console.log(set.has("1,2")); // true
console.log(set.has("2,3")); // true
console.log(set.has("3,2")); // false

Clean. Simple. Efficient.

The Reason Behind this

So now that we know how to do it, let’s talk about why we need to.

In a language like JavaScript, we can’t reliably store arrays in a Set and check for them using the has() method — at least, not in the way you might expect. It will say: new Set([[1 , 3]]).has([1,3]) //false

That’s because [1,3] !== [1,3]They are two different objects in memory. So, we use string keys instead, like: new Set(["1 , 3"]).has("1,3") //true

Now the question is, why does it display new Set([[1 , 3]]).has([1,3]) //false. So the answer is: even though both arrays [1, 3] look the same to us, the result is false because JavaScript doesn’t see them as the same. In JavaScript, variables are compared in two different ways: by value and by reference. If you’ve studied C or C++ in university, you’ve probably come across these concepts before, and they work similarly here.

Primitive types, i.e, numbers, strings, and booleans, are compared by value, meaning their actual content is checked. On the other hand, objects, including arrays, functions, and plain objects, are compared by reference, not by their content.

Imagine two identical twins; they look the same, but they are different people. Similarly, in JavaScript: let a = [1,3]; let b = [1,3]; These two arrays look the same, but they are stored in different places in memory. So: a === b //false.

Even though both are [1,3] JavaScript sees them as two separate things (like twin brothers).

Thus, in the case of set:

let set = new Set();
let a = [1, 3];

set.add(a); //adds the reference to the array a

set.has([1, 3]); // false because [1, 3] is a new array in memory,
        // even though it looks like "a", it's not the same reference.

set.has(a); // true

So when you write:

set.add(`${x},${y}`) // e.g., “1,3”

Here, now you’re storing a string, not an array, and as strings are primitive types, JavaScript compares them by value, not by reference.

If you found this helpful or faced something similar, let’s **connect and **nerd out over JavaScript quirks!

JavaScript #LeetCode #JavaScriptSet #TemplateLiterals #CodingTips

WebDevelopment #Stringify #AlgorithmOptimization #ReferenceVsValue #DataStructures