Difference Between == and === in JavaScript

Overview

In JavaScript, == and === are comparison operators that are used to compare the values of variables. The difference between the two is that the == operator performs type coercion, which means it does the type conversion of the operands before comparison. However, === will only return true if the operands are of the same type and have the same value.

Let's understand with examples:

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

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

In the example above, x is a number and y is a string, but == converts y into a number and then compares the values, so the expression evaluates to true. On the other hand, === does not do any type conversion and compares the values as they are, so the expression evaluates to false.

Generally, it is recommended to use === instead of == because it can prevent unexpected type conversion from occurring and can make your code more readable and maintainable and also it is less prone to errors.

Type coercion in JavaScript refers to the process of converting a value from one data type to another, usually to perform an operation that requires both operands to be of the same type.

JavaScript is a dynamically-typed language, which means that the data type of a value can change at runtime. This can sometimes lead to unexpected results when performing operations on values of different types.

For example, consider the following code:

console.log(1 + '2'); // Output: '12' 
console.log(1 + 2 + '3'); // Output: '33'

In the example above, the + operator is used to perform concatenation because one of the operands is a string. In the second example, the + operator is first used to add the two numbers, then the resulting value is converted to a string and concatenated with the third operand.

Type coercion can lead to unexpected results and is generally considered to be a potential source of errors in JavaScript code. It is usually a good idea to be explicit about the data types of your variables and to use comparison operators that do not perform type coercion, such as === and !== .

Read the following code to understand better:

// understand double equal (==) operator
console.log(1 == '1'); // true 
console.log(true == 1); // true 
console.log(0 == false); // true

// understand triple equal (===) operator
console.log(1 === '1'); // false 
console.log(true === 1); // false 
console.log(0 === false); // false

Conclusion

I hope you learned something from this, just as I did! Keep practicing and diving deeper, and your knowledge should keep growing. Don't forget that you can also check out my Github and Linkedin Profiles.