Understanding the Difference Between === (Triple Equal) and == (Double Equal) in JavaScript

In JavaScript, equality is a crucial concept to understand. There are two types of equality operators: the double equal (==) and the triple equal (===). Understanding the difference between the two is essential for writing efficient and effective code.

In this blog post, we’ll explore the difference between == and === in JavaScript and why it’s important to use the triple equal operator.

The Double Equal (==) Operator

The double equal operator is used to compare two values to see if they are equal. If the two values are equal, the operator returns true. If the values are not equal, the operator returns false.

For example:

let x = 5;
let y = "5";

console.log(x == y);
// Output: true
Code language: JavaScript (javascript)

In this example, the double equal operator returns true because x is a number and y is a string, and the operator performs type coercion to convert the string to a number before making the comparison. Type coercion (automatic conversion of data from one data type to another by the compiler a.k.a. implicit type conversion) can be convenient in some cases, but it can also lead to unexpected results.

For example:

let x = null;
let y = undefined;

console.log(x == y);
// Output: true
Code language: JavaScript (javascript)

In this example, the double equal operator returns true even though null and undefined are different values.

The Triple Equal (===) Operator

The triple equal operator is used to compare two values to see if they are equal and of the same type. If the two values are equal and of the same type, the operator returns true. If the two values are not equal or not of the same type, the operator returns false.

For example:

let x = 5;
let y = "5";

console.log(x === y);
// Output: false
Code language: JavaScript (javascript)

In this example, the triple equal operator returns false because x is a number and y is a string. The triple equal operator does not perform type coercion, so the comparison is made based on the actual values and their types.

For example:

let x = null;
let y = undefined;

console.log(x === y);
// Output: false
Code language: JavaScript (javascript)

In this example, the triple equal operator returns false because null and undefined are different values.

The Importance of Using ===

It’s recommended to use the triple equal operator whenever possible. The main reason is that the triple equal operator is more reliable and less prone to errors than the double equal operator.

For example:

let x = 0;
let y = false;

console.log(x == y);
// Output: true
Code language: JavaScript (javascript)

In this example, the double equal operator returns true even though 0 and false are not equal. This is because the double equal operator performs type coercion, and 0 is coerced to false.

However, if we use the triple equal operator in this case:

let x = 0;
let y = false;

console.log(x === y);
// Output: false
Code language: JavaScript (javascript)

The triple equal operator returns false because 0 and false are not equal and not of the same type.

Using the triple equal operator also makes your code easier to read and understand, as it clearly indicates that you are making a comparison based on both value and type.

Type Checking and Caveats with Objects, Null, and Undefined

When comparing objects, arrays, and functions, the double equal and triple equal operators behave differently. The double equal operator only checks if two objects are references to the same object in memory, while the triple equal operator checks if two objects have the same properties and values.

For example:

let x = { name: "Mehul" };
let y = { name: "Mehul" };

console.log(x == y);
// Output: false

console.log(x === y);
// Output: false
Code language: JavaScript (javascript)

In this example, the double equal and triple equal operators both return false because x and y are references to different objects in memory, even though they have the same properties and values.

When comparing null and undefined, the double equal and triple equal operators behave differently as well.

let x = null;
let y = undefined; 

console.log(x == y) // true 
console.log(x === y) // false 
Code language: JavaScript (javascript)

Conclusion

In conclusion, it’s important to understand the difference between the double equal (==) and the triple equal (===) operators in JavaScript. While the double equal operator can be convenient in some cases, it’s generally recommended to use the triple equal operator whenever possible, as it’s more reliable and less prone to errors. If you want to learn about JavaScript operators, you can learn from our Free JavaScript Basics Interactive Course.

Additionally, it’s important to be aware of the differences in behavior when comparing objects, arrays, functions, null, and undefined. By using the triple equal operator, you can ensure that your code is clear, efficient, and free of unexpected results. In conclusion, if you want to write efficient and effective JavaScript code, make sure to use the triple equal operator whenever possible.