Hey Folks,
Javascript has some weird stuff built into it and sometimes when used in conjunction with other languages, it is easier to forget the corner cases that can come with javascript coding.
Here I compile the list checks, that every developer working in javascript should know, so that there are no accidental bugs and also sometimes these can be use to our advantage
Equal operator comparison
Double Equals
| Comparison | Result |
|---|---|
| null == null | true |
| null == undefined | true |
| null == 0 | false |
| null == ” (empty string) | false |
| null == NaN | false |
| null == ‘2’ | false |
| null == 2 | false |
| undefined == null | true |
| undefined == undefined | true |
| undefined == 0 | false |
| undefined == ” (empty string) | false |
| undefined == NaN | false |
| undefined == ‘2’ | false |
| undefined == 2 | false |
| 0 == null | false |
| 0 == undefined | false |
| 0 == 0 | true |
| 0 == ” (empty string) | true |
| 0 == NaN | false |
| 0 == ‘2’ | false |
| 0 == 2 | false |
| ” (empty string) == null | false |
| ” (empty string) == undefined | false |
| ” (empty string) == 0 | true |
| ” (empty string) == ” (empty string) | true |
| ” (empty string) == NaN | false |
| ” (empty string) == ‘2’ | false |
| ” (empty string) == 2 | false |
| NaN == null | false |
| NaN == undefined | false |
| NaN == 0 | false |
| NaN == ” (empty string) | false |
| NaN == NaN | false |
| NaN == ‘2’ | false |
| NaN == 2 | false |
| ‘2’ == null | false |
| ‘2’ == undefined | false |
| ‘2’ == 0 | false |
| ‘2’ == ” (empty string) | false |
| ‘2’ == NaN | false |
| ‘2’ == ‘2’ | true |
| ‘2’ == 2 | true |
| 2 == null | false |
| 2 == undefined | false |
| 2 == 0 | false |
| 2 == ” (empty string) | false |
| 2 == NaN | false |
| 2 == ‘2’ | true |
| 2 == 2 | true |
Double equals is not the same as triple equals when it comes to javascript. Notice that some things are unexpectedly true example 0 == “” is true when only compared with double equals vs its false when compared with triple equals. Double equals can somehow be helpful when you want to check if the value is either null or undefined you can quickly just do if(val == null) instead of if(val == null || val == undefined). Also notice that double equals does not check for the data type behind the comparator, example 2 == ‘2’ is true but not true in triple equals.
Triple Equals
| Comparison | Result |
|---|---|
| null === null | true |
| null === undefined | false |
| null === 0 | false |
| null === ” (empty string) | false |
| null === NaN | false |
| null === ‘2’ | false |
| null === 2 | false |
| undefined === null | false |
| undefined === undefined | true |
| undefined === 0 | false |
| undefined === ” (empty string) | false |
| undefined === NaN | false |
| undefined === ‘2’ | false |
| undefined === 2 | false |
| 0 === null | false |
| 0 === undefined | false |
| 0 === 0 | true |
| 0 === ” (empty string) | false |
| 0 === NaN | false |
| 0 === ‘2’ | false |
| 0 === 2 | false |
| ” (empty string) === null | false |
| ” (empty string) === undefined | false |
| ” (empty string) === 0 | false |
| ” (empty string) === ” (empty string) | true |
| ” (empty string) === NaN | false |
| ” (empty string) === ‘2’ | false |
| ” (empty string) === 2 | false |
| NaN === null | false |
| NaN === undefined | false |
| NaN === 0 | false |
| NaN === ” (empty string) | false |
| NaN === NaN | false |
| NaN === ‘2’ | false |
| NaN === 2 | false |
| ‘2’ === null | false |
| ‘2’ === undefined | false |
| ‘2’ === 0 | false |
| ‘2’ === ” (empty string) | false |
| ‘2’ === NaN | false |
| ‘2’ === ‘2’ | true |
| ‘2’ === 2 | false |
| 2 === null | false |
| 2 === undefined | false |
| 2 === 0 | false |
| 2 === ” (empty string) | false |
| 2 === NaN | false |
| 2 === ‘2’ | false |
| 2 === 2 | true |
Triple equals is much tighter comparison in javascript, it also checks the data type example see that 2 === ‘2’ is false while its true in double equals
Or (||) operator comparison
| Comparison | Result |
|---|---|
| null || null | null |
| null || undefined | undefined |
| null || 0 | 0 |
| null || ” (empty string) | ” (empty string) |
| null || NaN | NaN |
| null || ‘2’ | 2 |
| null || 2 | 2 |
| undefined || null | null |
| undefined || undefined | undefined |
| undefined || 0 | 0 |
| undefined || ” (empty string) | ” (empty string) |
| undefined || NaN | NaN |
| undefined || ‘2’ | 2 |
| undefined || 2 | 2 |
| 0 || null | null |
| 0 || undefined | undefined |
| 0 || 0 | 0 |
| 0 || ” (empty string) | ” (empty string) |
| 0 || NaN | NaN |
| 0 || ‘2’ | 2 |
| 0 || 2 | 2 |
| ” (empty string) || null | null |
| ” (empty string) || undefined | undefined |
| ” (empty string) || 0 | 0 |
| ” (empty string) || ” (empty string) | ” (empty string) |
| ” (empty string) || NaN | NaN |
| ” (empty string) || ‘2’ | 2 |
| ” (empty string) || 2 | 2 |
| NaN || null | null |
| NaN || undefined | undefined |
| NaN || 0 | 0 |
| NaN || ” (empty string) | ” (empty string) |
| NaN || NaN | NaN |
| NaN || ‘2’ | ‘2’ |
| NaN || 2 | 2 |
| ‘2’ || null | ‘2’ |
| ‘2’ || undefined | ‘2’ |
| ‘2’ || 0 | ‘2’ |
| ‘2’ || ” (empty string) | ‘2’ |
| ‘2’ || NaN | ‘2’ |
| ‘2’ || ‘2’ | ‘2’ |
| ‘2’ || 2 | ‘2’ |
| 2 || null | 2 |
| 2 || undefined | 2 |
| 2 || 0 | 2 |
| 2 || ” (empty string) | 2 |
| 2 || NaN | 2 |
| 2 || ‘2’ | 2 |
| 2 || 2 | 2 |
This works like standard || or operator, if the value of the first comparator does not equals to true it will select the other value. See section truthy value for which values return false when asked for boolean value.
Truthy value
| Comparision | Result |
|---|---|
| if ( null ) | false |
| if ( undefined ) | false |
| if ( 0 ) | false |
| if ( ” (empty string) ) | false |
| if ( NaN ) | false |
| if ( ‘2’ ) | true |
| if ( 2 ) | true |
Hopefully this can help someone have a reference check on what javascript does on == , === and || operators.
Let me know in comments..
PS: I originally created this post in jsfiddle here (http://jsfiddle.net/bsurela/13gdvom5/)