Equality Operators: == vs ===, Reference Comparison

Let’s start with something that might surprise you:

console.log(5 == "5"); // Output: true
console.log(5 === "5"); // Output: false

Looks confusing, right?

If you've ever compared two values in JavaScript and got a result you didn’t expect, you're not alone.

Let’s understand why some comparisons don’t work the way you think they will. But before that, you should know about the difference between == and ===.

== Loose Equality

The equality operator (==) is used to compare only the values of variables. But it tries to convert them to the same type first.

For example:

console.log(1 == "1"); // Output: true (string becomes number)
console.log(true == 1); // Output: true (true becomes 1)

Here you can see that even if the types are different, JavaScript tries to convert them to the same type, this is called type coercion.

Learn more about type coercion!

=== Strict Equality

The strict equality operator (===) is used to compare both values and data types of variables, and no conversion happens here.

For example:

console.log(1 === "1"); // Output: false (number is not equal to string)
console.log(true === 1); // Output: false (boolean is not equal to number)

Always prefer using === because it gives more reliable results, as it checks both value and type. Only reach for == if you really know what you're doing.

Reference Comparison (Objects, Arrays, etc.)

console.log([] === []); // Output: false

Looks strange, right?

They look identical, so the output should be true, but why is it false?

Because in JavaScript:

• Primitives (like numbers, strings, and booleans) are compared by their value.
• Objects (including arrays and functions) are compared by reference, not by their content. That means even if two arrays look exactly the same, they are not equal unless they are the exact same object in memory.

For example:

const a = [];
const b = [];
console.log(a === b); // Output: false, different memory locations
 
const c = a;
console.log(a === c); // Output: true, same reference

So when comparing objects or arrays, JavaScript checks where they live in memory, not what’s inside them.

Understanding Memory and References

In JavaScript, every time you create an object, array, or function, it gets stored at a specific place in memory.

Think of memory as a library, where each object is a book placed on its own unique shelf.

When you do something like this:

const a = [];
const b = [];

You’re saying, put one empty array on one shelf (a) and another empty array on a different shelf (b).

Even though they look the same, they’re on different shelves. So, when you compare them, JavaScript checks if they are both pointing to the same shelf? But they are not, so it returns false.

console.log(a === b); // Output: false

But if you do this:

const c = a;
console.log(a === c); // Output: true

You’re saying, put a and c on the same shelf, so it returns true.

So, now you know why objects, arrays, and functions are called reference types, they’re compared by the reference (the memory location), not their content.