Differentiate between = , == and === when coding with javascript.
Tags: javascript, webdev, cyruscodes, todayilearned
Published: 2021-02-01 09:38:03

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 ===. 
![programming.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610430440542/ujNZNJLm6.jpeg)
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.