Differentiate between = , == and === when coding with javascript.

Welcome again to another article this time on javascript syntax. This article will touch on a simple but very tricky and costly mistake I kept on making which was substituting the three operators while coding in javascript.

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=3;

• 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.

The expression above is well accepted by javascript but there may be times, when other expressions involving the assignment operator may result in errors. Examples, include; 3=3, 'a'=3, 'a'='a' which basically results in a reference error. When using this operator, the first operand should be a variable and the problem with these expressions is that there's a value on the left and not a variable.

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;

"a"==3;

if we have a string 'a' and a number 3, javascript will try to convert the string 'a' to a number before comparing it to the number 3. Now since 'a' cannot be a number it'll be set as NaN which implies Not a Number.

On the other hand, if the string was '3' and the other operand was a number 3;

"3"==3;

Javascript would try to convert the string '3' to the number 3 which is possible and the expression would now be;

3==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;

'' "==3;

javascript will return false because an empty string will be converted to 0 which is not equal to 3. But, if our other operand was 0;

" " ==0;

then the expression would turn true. To briefly cover the difference between null and undefined, it's important to know that both are data types in JavaScript.

- 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;

"3" ===3;

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;

5===5;

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.

For a final point to note, you should always use** !==** to demonstrate ** strict inequality** in javascript, Example;

3!=="3"

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.