Table of contents
1.
Introduction
2.
The Equality Operator ==
3.
Type Coercion with ==
3.1.
Examples:
4.
When to Use ==
5.
The Strict Equality Operator ===
6.
No Type Coercion with ===
6.1.
Examples:
7.
When to Use ===
8.
Comparison Table
9.
Practical Examples
10.
Frequently Asked Questions
10.1.
Is === always better than ==?
10.2.
Can == lead to unexpected behavior?
10.3.
What's the difference between !== and !=?
11.
Conclusion
Last Updated: Mar 27, 2024
Easy

Difference between == and === operator in JavaScript

Author Nikunj Goel
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In JavaScript, both == and === operators are used to compare values, but they function in distinct ways. Although they might seem similar, understanding the difference between these two operators is crucial for writing accurate and efficient code. This article will explore the difference between the == and === operators, including their usage, behavior, and practical examples.

Difference between == and === operator in JavaScript

The Equality Operator ==

The equality operator == is known as the loose equality operator. It compares two values for equality, but it does so without considering the data type.

Type Coercion with ==

One of the key characteristics of the == operator is that it performs type coercion, which means it automatically converts the values being compared to a common type before making the comparison.

Examples:

'5' == 5  // true
null == undefined // true
You can also try this code with Online Javascript Compiler
Run Code

 

The == operator converts the string '5' to a number, so the expression returns true. Similarly, null and undefined are considered loosely equal.

When to Use ==

Using == can be beneficial when you want to compare values that may come from different sources and might be of different types, but should be considered equal.

The Strict Equality Operator ===

The strict equality operator === compares both value and type, meaning that the values must be the same, and they must be of the same data type.

No Type Coercion with ===

With ===, there is no type coercion, so the comparison is more strict.

Examples:

'5' === 5  // false
null === undefined // false
You can also try this code with Online Javascript Compiler
Run Code

 

Here, the comparison between a string '5' and a number 5 returns false because the data types are different.

When to Use ===

Use === when you want to ensure that the values being compared are not only equal but also of the same type.

Comparison Table

Here is a table that encapsulates the differences between == and ===:

Aspect  == (Loose Equality)  === (Strict Equality)
Type Coercion Performs Doesn't Perform
Type Checking  No  Yes
Use Cases Useful when type coercion is required Useful when type matching is required
Example  '5' == 5 returns true '5' === 5 returns false
Results Can lead to unexpected results  Ensures more predictable behavior

Practical Examples

Using ==:

if (userInput == 'yes') {
  // Execute code if userInput is 'yes', even if userInput is a string.
}
You can also try this code with Online Javascript Compiler
Run Code

 

Using ===:

if (userInput === true) {
  // Execute code if userInput is strictly equal to true (value and type).
}
You can also try this code with Online Javascript Compiler
Run Code

Frequently Asked Questions

Is === always better than ==?

Not necessarily. Use === for strict comparison (value and type), and == if you want to allow type coercion. It depends on the specific requirements of your code.

Can == lead to unexpected behavior?

Yes, the automatic type coercion performed by == can sometimes lead to unexpected results, especially when comparing different types.

What's the difference between !== and !=?

Similar to the equality operators, != is the loose inequality operator (ignores type), while !== is the strict inequality operator (considers type).

Conclusion

Understanding the difference between the == and === operators in JavaScript is vital for writing clean and predictable code. While == allows for type coercion and may be suitable in some situations, === ensures that both value and type are the same, offering more strict comparison.
 

Choosing the right operator requires understanding the context in which it will be used. Being mindful of these operators will help you avoid common pitfalls and enhance the overall robustness of your code. As with many aspects of programming, there's no one-size-fits-all solution, so understanding the nuances and applying them judiciously is key.

Live masterclass