JavaScript === vs ==

One of the most common tasks in programming is comparison of various values and types. In most programming languages, we use the equality operator, commonly denoted by double equal signs.

However, when you dive into the world of JavaScript, you quickly realize that things are little hazy as you do not have one equality operator. Instead you will find double equal and triple equal signs operators.

In this tutorial, we are going to explore what these operators do, how they work, and why they exists in the first place.

What is == in JavaScript?

In JavaScript, the double equals (==) is a comparison operator that transforms the operands to have the same type before comparison.

It is also known as abstract equality operator.

When we use the double equal operator to compare a string with a number, JavaScript wil convert the provided string into a number.

In a case of an empty string, JavaScript will treat it as a zero while a string with no numeric value is converted into NaN or Not a Number which returns a Boolean false.

What is === in JavaScript?

But what about the triple equals operator. This is also known as a strict equality operator. Unlike the double equals operator, the triple equal operator, will return false for the values that are not of similar type.

This means that a string and a numerical value, although intuitively equal, the operator will not return true as they are not of the same type.

What’s the difference?

The big difference between these two is that the abstract equality operator doesn’t mind what kind of data you’re comparing, while the strict equality operator does care about the data types.

Examples

Let us cover some examples that demonstrate how the double equals and triple equals operators works.

No Type Conversion

Consider the following examples that demonstrates how to use the double equal operator without the need for type conversion.

> 'hello' == 'hello'
true
> 'hello' == 'hell'
false
> 1 == 1

As you will notice the operator does not care about the types as long as the values are intuitively similar.

The same cannot be said about the triple equality operator. Consider the examples below.

> 'hello' === 'hello'
true
> 'hello' === 'hell'
false
> 1 === 1
true
> 1 === 10
false

In this case, an example such as ‘hello’ and ‘hell’ are not equal. This shows how the triple equal operator is more precise.

With Various Types

Let us see how each operator behaves when dealing with various types such as string, arrays, etc.

// Comparing different types using ==
console.log(5 == "5");        // true, because abstract equality converts types
console.log(0 == false);       // true, because both are falsy values
console.log(null == undefined); // true, because both are considered loosely equal

// Comparing different types using ===
console.log(5 === "5");        // false, because strict equality checks types too
console.log(0 === false);       // false, because types are different
console.log(null === undefined); // false, because types are different

// Comparing with NaN
console.log(NaN == NaN);   // false, because NaN is never equal to itself
console.log(NaN === NaN);  // false, because strict equality checks types

// Comparing objects and arrays
const obj1 = { key: "value" };
const obj2 = { key: "value" };
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(obj1 == obj2);   // false, because they are different objects
console.log(obj1 === obj2);  // false, for the same reason
console.log(arr1 == arr2);   // false, because they are different objects
console.log(arr1 === arr2);  // false, for the same reason

// Comparing null and undefined
console.log(null == undefined); // true, because abstract equality treats them as equal
console.log(null === undefined); // false, because they are different types

As you will notice, each operator has different comparison technique.

When to use == or ===?

The time and need as to which you should use will depend on the target expected result. But here is a basic breakdown.

Use == (abstract equality) when:

• You want to check if two values are equal in value, allowing for type coercion. JavaScript will try to convert the values to a common type before making the comparison.
• You are comparing primitive data types like numbers, strings, or booleans and want to allow for type conversion.

Use === (strict equality) when:

• You want to check if two values are equal in both value and data type.
• You want to avoid type coercion, ensuring that the values being compared are of the same type.
• You need to compare objects, arrays, functions, or non-primitive data types for reference equality.

We recommend using the === (strict equality) as it leads to more predictable and safer code by explicitly checking both value and data type.

Conclusion

In this guide, we learned all about the two infamous equality operators in the world of JavaScript. We learned what each operator is, what it does, how it behaves, and why you need to use one over the other.