Comparisons in Javascript

Not sure what is the difference between the different JavaScript comparison operators ? When to use ==, ===,!= Or !== ? Follow this article and you will hopefully have all the information you need.

JavaScript has two ways of comparing values. One form is more rigorous (===), while in the other, a type conversion occurs (==). Example: 1 == ‘1’ (true). 1 === ‘1’ (false).

Although it is a simple concept, understanding some details about JavaScript comparisons can save you a lot of time.

Operators == vs ===

In JavaScript we have two comparison operators that are quite similar, but in practice they provide very different results.

When we use three equal signs === , a strict comparison is performed. First, the type of the two values ​​in question is compared, and then the actual values ​​are compared.

When we use two equal signs == , an abstract comparison is performed. First, an attempt is made to convert the values ​​to the same type and then the comparison is carried out.

See the example below that illustrates each type of comparison and its results.

console.log(1 === 1); // true

console.log(1 === ‘1’); // false

console.log(1 == 1); // true

console.log(1 == ‘1’); // true

Operation 1 === ‘1’ returns false, as the type of the first value is numeric, while the second is a string, so it is not even necessary to compare the values, because in strict comparison it is necessary that both the value and the type are equal in order to return true.

Operation 1 == ‘1’ returns true, because when we do an abstract comparison, the values ​​will be converted to a common type. In this case, the conversion from string to number is done and finally the values ​​are compared.

Read: How to convert a JSON object to String in Javascript

In theory the strict comparison tends to be faster, as it does not need to convert the values, and if they are of different types, it already returns false. However, the difference between the two methods of comparison is so insignificant that this should not be the reason for wanting to use one or the other.

Ok so far, here are some more similar examples:

// Common type

console.log(22 == ’22’); // true

// Different types

console.log(22 === ’22’); // false: javascript compare strings to integers

// Different values, same types

console.log(22 === 11); // false

// Same values and types

const a = 22;

console.log(a === 22); // true

Now here is another example which is not so obvious:

// Different types

console.log(1 === true); // false

console.log(0 === false); // false

// Booleans

console.log(1 == true); // true

console.log(0 == false); // true

Note that zeros and ones can represent true and false in an abstract comparison. And not only these values, but other values ​​like undefined and null can represent false in JavaScript, so it is useful to remember some caveats (see below).

Some caveats regarding JavaScript comparisons

Understanding these caveats can save you a lot of time when debugging code that doesn’t work, especially in JavaScript, where some operations may return values such as NaN, undefined, null, etc. Refer to the Abstract equality algorithm further down.

Here are some examples to better understand the issue:

// NaN is not like anything, not even itself.

NaN == NaN; // false : useless javascript equality !

// undefined and null are values that are not Boolean at the same time, but can represent false in an if (undefined) or if (null) comparison

console.log( ( undefined == null ) ); //javascript undefined vs null

var input ;

if (input == null) {

console.log( “undefined==null”);}

// Like null and undefined, the empty string, although not strictly a Boolean value, can represent false

” == false; // true

// An empty array also represents false in the abstract comparison, but when compared alone in an if, it returns true

[] == false; // true

See below all values ​​in JavaScript that can represent false :

  • false – Boolean value
  • ”, “” ou “ – All types of empty strings.
  • 0 – The number 0, even with a negative sign, represents false.
  • null
  • undefined
  • NaN – Not a number.
  • [] – Empty array

Remember that when comparing complex types of variables such as arrays or objects , the results are not based on the content of the object, but rather where these objects point. Example:

const obj = { a: 1 };

const obj2 = obj;

// The obj variable and the instantiated object {a: 1} are different objects

console.log(obj == { a: 1 }); // false

// As soon as obj2 is instantiated, it receives the same obj address, therefore having the same value, even in the strict comparison

console.log(obj === obj2); // true

The Abstract equality algorithm :

For more on this, you may want to refer to this table of comparisons.

Operators != vs !==

In the same way as the abstract or strict equality operators, we can also check if two values ​​are different in a strict or abstract way.

Read: How to delete values ​​from an array in Javascript

Examples:

// Conversion is made on the same types and then it is checked if they are different

console.log(1 != ‘1’); // false

// The types being different, the result is different, so the operation is true

console.log(1 !== ‘1’); // true

Conclusion

As you can see, unless you’re already familiar with javascript comparison operators, taking into account the type and value ​​can be a bit confusing at first. Notwithstanding javascript logical operators, the double equality operator == first tries to convert the types before comparing them. The === operator does not, it does a direct comparison although it always returns false if the types are different.

Understanding the results of the main abstract comparisons can be of great help, but in general it is always advisable to always use the equal three operator, so you can be sure that you are making a complete comparison of the values. For more on comparison operators, please refer to the official Mozilla page.


If you like the content, we would appreciate your support by buying us a coffee. Thank you so much for your visit and support.

 

Marianne elanotta

As a graduate in communication technologies, Marianne likes to share the latest technological advances in various fields. She likes to program in Java OO and Javascript and prefers to work on Open source operating systems. She likes to play chess and computer games in her spare time along with her 2 kids.

Leave a Reply