Which Equals Operator (== VS ===) Should Be Used in JavaScript Comparisons

Which equals operator (== vs ===) should be used in JavaScript comparisons?

The strict equality operator (===) behaves identically to the abstract equality operator (==) except no type conversion is done, and the types must be the same to be considered equal.

Reference: Javascript Tutorial: Comparison Operators

The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. Both are equally quick.

To quote Douglas Crockford's excellent JavaScript: The Good Parts,

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0'           // false
0 == '' // true
0 == '0' // true

false == 'false' // false
false == '0' // true

false == undefined // false
false == null // false
null == undefined // true

' \t\r\n ' == 0 // true

Equality Comparison Table

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisons just shown produce false with the === operator.


Update:

A good point was brought up by @Casebash in the comments and in @Phillipe Laybaert's answer concerning objects. For objects, == and === act consistently with one another (except in a special case).

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b // false
a === b // false

c == d // false
c === d // false

e == f // true
e === f // true

The special case is when you compare a primitive with an object that evaluates to the same primitive, due to its toString or valueOf method. For example, consider the comparison of a string primitive with a string object created using the String constructor.

"abc" == new String("abc")    // true
"abc" === new String("abc") // false

Here the == operator is checking the values of the two objects and returning true, but the === is seeing that they're not the same type and returning false. Which one is correct? That really depends on what you're trying to compare. My advice is to bypass the question entirely and just don't use the String constructor to create string objects from string literals.

Reference

http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3

Which equals operator (== vs ===) should be used in JavaScript comparisons?

The strict equality operator (===) behaves identically to the abstract equality operator (==) except no type conversion is done, and the types must be the same to be considered equal.

Reference: Javascript Tutorial: Comparison Operators

The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false. Both are equally quick.

To quote Douglas Crockford's excellent JavaScript: The Good Parts,

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable. These are some of the interesting cases:

'' == '0'           // false
0 == '' // true
0 == '0' // true

false == 'false' // false
false == '0' // true

false == undefined // false
false == null // false
null == undefined // true

' \t\r\n ' == 0 // true

Equality Comparison Table

The lack of transitivity is alarming. My advice is to never use the evil twins. Instead, always use === and !==. All of the comparisons just shown produce false with the === operator.


Update:

A good point was brought up by @Casebash in the comments and in @Phillipe Laybaert's answer concerning objects. For objects, == and === act consistently with one another (except in a special case).

var a = [1,2,3];
var b = [1,2,3];

var c = { x: 1, y: 2 };
var d = { x: 1, y: 2 };

var e = "text";
var f = "te" + "xt";

a == b // false
a === b // false

c == d // false
c === d // false

e == f // true
e === f // true

The special case is when you compare a primitive with an object that evaluates to the same primitive, due to its toString or valueOf method. For example, consider the comparison of a string primitive with a string object created using the String constructor.

"abc" == new String("abc")    // true
"abc" === new String("abc") // false

Here the == operator is checking the values of the two objects and returning true, but the === is seeing that they're not the same type and returning false. Which one is correct? That really depends on what you're trying to compare. My advice is to bypass the question entirely and just don't use the String constructor to create string objects from string literals.

Reference

http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3

Difference between == and === in JavaScript

=== and !== are strict comparison operators:

JavaScript has both strict and
type-converting equality comparison.
For strict equality the objects being
compared must have the same type and:

  • Two strings are strictly equal when they have the same sequence of
    characters, same length, and same
    characters in corresponding positions.
  • Two numbers are strictly equal when they are numerically equal (have
    the same number value). NaN is not
    equal to anything, including NaN.
    Positive and negative zeros are equal
    to one another.
  • Two Boolean operands are strictly equal if both are true or
    both are false.
  • Two objects are strictly equal if they refer to the same Object.
  • Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]

Comparison Operators - MDC

Difference between != and !==

= is an assignment operator, e.g. If you run var x = 1; then x will have the value of 1.

== (or !=) is a comparison operator that checks if the value of something is equal to the value of something else. e.g. if(x == 1) will evaluate to true and so will if(x == true) because 1 will evaluate to true and 0 evaluate to false.

=== (or !==) is another comparison operator that checks if the value of something is equal to the value of, and is the same type as something else. e.g. if(x === 1) will evaluate to true however, if(x === true) will evaluate to false because 1 (the value of x) is an integer and true is a boolean.

Should I use == or === In Javascript?

Using == compares only the values, === compares the type of the variable also.

1 == 1 -> true
1 == "1" -> true
1 === 1 -> true
1 === "1" -> false, because 1 is an integer and "1" is a string.

You need === if you have to determine if a function returns 0 or false, as 0 == false is true but 0 === false is false.

Javascript Comparison Operators != vs !==

Human readable text about their differences

Using !== and === will do a more strict compare than ==/!=. The former will check if the objects being compared are of the same type, as well as if the values matches.

Using == will make it possible for an implicit cast to be made, see the below examples.

(0 ==  '0') // true
(0 === '0') // false

('' == 0 ) // true, the string will implicitly be converted to an integer
('' === 0 ) // false, no implicit cast is being made

What does the standard say?

11.9.6 The Strict Equality Comparison


Algorithm The comparison x === y, where x and y are values, produces true or false. Such a comparison
is performed as follows:

  1. If Type(x) is different from Type(y), return false.
  2. If Type(x) is Undefined, return true.
  3. If Type(x) is Null, return true.
  4. If Type(x) is Number, then

    a. If x is NaN, return false.

    b.If y is NaN, return false.

    c. If x is the same Number value as y, return true.

    d. If x is +0 and y is -0, return true.

    e. If x is -0 and y is +0, return true.

    f. Return false.

  5. If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in
    corresponding positions); otherwise, return false.

  6. If Type(x) is Boolean, return true if x and y are both true or both false; otherwise, return false.
  7. Return true if x and y refer to the same object. Otherwise, return false. NOTE This algorithm differs from the SameValue Algorithm (9.12)
    in its treatment of signed zeroes and NaNs.

11.9.3 The Abstract Equality Comparison Algorithm


The comparison x == y, where x and y are values, produces true or
false. Such a comparison is performed as follows:

  1. If Type(x) is the same as Type(y), then

    a. If Type(x) is Undefined, return t rue.

    b. If Type(x) is Null, return true.

    c. If Type(x) is Number, then

    1. If x is NaN, return false.

    2. If y is NaN, return false.

    3. If x is the same Number value as y, return true.

    4. If x is +0 and y is -0, return true.

    5. If x is -0 and y is +0, return true.

    6. Return false.

    d. If Type(x) is String, then return true if x and y are exactly
    the same sequence of characters (same length and same characters in
    corresponding positions). Otherwise, return false.

    e. If Type(x) is Boolean, return true if x and y are both true or
    both false. Otherwise, return false.
    f. Return true if x and y refer to the same object. Otherwise, return false.

  2. If x is null and y is undefined, return true.
  3. If x is undefined and y is null, return true.
  4. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
  5. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.
  6. If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
  7. If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
  8. If Type(x) is either String or Number and Type(y) is Object, return the result of the comparison x == ToPrimitive(y) .
  9. If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x) == y.
  10. Return false

Comparison Operator in JavaScript

In javascript all primitives (string, nubmer, bigint, boolean, undefined, symbol, null) are immutable and will be compared by value:

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.


In comparison to that objects (this also includes arrays and functions, basically everything that is not a primitive) are mutable and will be compared by identity.

Example:

console.log("Primitives compare by value:");
console.log(5 === 5); // true
console.log("foo" === "foo"); // true
console.log(true === true); // true


console.log("Objects compare by identity:");
console.log({} === {}); // false
console.log([] === []); // false
console.log(function(){} === function(){}); // false

When should you use === vs ==, !== vs !=, etc.. in javascript?

=== is the Identity operator, and is used to test that value and type are equal.

so..

"3" == 3 // true
"3" === 3 // false
1 == true // true
1 === true // false
"1" == true // true
"1" === true // false

so when you care that value and type are equal, or not equal use Identity operators === or !==



Related Topics



Leave a reply



Submit