It's not until I purposefully decided to dedicate some time to really understand their usability, that I came to understand how different they are. The first, = is easy enough to understand since it's one of the operators one learns when beginning the coding journey, but my real struggle was between the second == and the third ===. So let's get started; 1. = (Assignment operator); This is commonly referred to as the assignment operator and it's one of the most utilized operators in any programming language I dare say. It basically equates the operand on its left to the one on its right.
Without getting out of topic here, basically an operand is a quantity or data that is operated on; an example;
a and 3 are the operands
= is the operator. Simply put the = operator assigns the value 3 to the variable a. Now the combination of both the operands and the operators is called an expression.
2. == (Comparison operator);
This operator transforms both operands to be of the same datatype before comparing them hence also referred to as the type-coercion or non-strict equality operator. For example;
On the other hand, if the string was '3' and the other operand was a number 3;
This evaluates to true because when the string "3" is coerced it becomes the number 3 which is equal to the operand on the right.
When there is an empty string '' in this case;
" " ==0;
- Undefined means that the variable has been declared but has not been assigned a value, Example;
let a; console.log(a);
- On the other hand, null is used in the declaration of an empty variable or simply put a variable with an empty value;
let b = null; console.log(b);
A surprising fact I found during my research is that null and undefined are only equal to each other when using the operator== here;
console.log(null == null); // turns true console.log(undefined == undefined); // turns true console.log(null == undefined); //also turns true
3. === (Strict Equality operator); This operator strictly checks that two values are the same or not without converting any of them to the other's data type (without coercion) and if they are of different data types they are regarded as unequal, Example;
This expression returns false because unlike the == operator, === does not convert the string "3" to a number before comparison.
If the variables are not numeric and have the same value, they are considered as equal, Example;
let c =4; let d=4; console.log(c===d); //returns true
The expression c===d returns true that the variables c and d although not numeric, are equal since they have the same value, and If the values are not numeric but have the same value, they are also considered equal, Example;
let k ="m"; let l="m"; console.log(k===l)//returns true
Finally, if the two values are numbers, they are considered equal if they are not NaN (Not a Number) and are the same value, Example;
I know it's a lengthy article but just to recap always remember the following points;
- = is used for assigning values to a variable,
- == is used for comparing two variables, by first converting the data types (with coercion),
- === compares two variables without converting the data types (without coercion).
When it comes to the results of data comparison;
= never returns a true or false since it's not a comparison operator but an assignment operator,,
== will only return true if both compared operands are equal,
=== returns true when both operands are equal and are of similar data type.
Which returns true, that the number 3 is not equal to the string 3 as they are of different data types. Using != would be misleading since this ignores the data type comparison and returns false in the same expression.