# Playing with JS Operators

Most programming languages have symbols which helps them perform different operations like comparison, addition, division etc. Those symbols are known as operators.

In this blog we are are going to discuss some basic operators that you would use almost daily in your javascript journey.

## Arithmetic Operators

As the name suggests, arithmetic operators help programmers perform arithmetic operations. Below is a list of arithmetic operators:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>OPERATOR</p></th><th colspan="1" rowspan="1"><p>MEANING</p></th></tr><tr><td colspan="1" rowspan="1"><p>+</p></td><td colspan="1" rowspan="1"><p>Addition</p></td></tr><tr><td colspan="1" rowspan="1"><p>-</p></td><td colspan="1" rowspan="1"><p>Subtraction</p></td></tr><tr><td colspan="1" rowspan="1"><p>*</p></td><td colspan="1" rowspan="1"><p>Multiplication</p></td></tr><tr><td colspan="1" rowspan="1"><p>/</p></td><td colspan="1" rowspan="1"><p>Division</p></td></tr><tr><td colspan="1" rowspan="1"><p>%</p></td><td colspan="1" rowspan="1"><p>Modulus (remainder)</p></td></tr><tr><td colspan="1" rowspan="1"><p>**</p></td><td colspan="1" rowspan="1"><p>Exponentiation</p></td></tr></tbody></table>

```javascript
console.log(5+2) //7
console.log(5-2) //3
console.log(5*2) //10
console.log(5/2) //2.5
console.log(5%2) //1
console.log(5**2) //25
```

## Assignment Operators

Once again, as the name suggests, assignment operators are the ones which you shall be using to assign values to variables. Lets know more about them directly through code;

```javascript
let x= 10; // = is an assignment operator
x+= 5; //+= is a shorthand to add and assign, it simply means x=x+5;
x*= 2; //x =x*2
x-=2; //x=x-2
x/=2; //x=x/2
x%=2; //x=x%2
x**=2; //x= x**2
```

## Comparison Operators

You know what I might say isn't it? But here we go again.

Comparison Operators as the name suggests are the operators which you would be using too compare two values. It returns either `true` or `false`. Below is a list of comparison operators you must be aware of:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>OPERATOR</p></th><th colspan="1" rowspan="1"><p>MEANING</p></th></tr><tr><td colspan="1" rowspan="1"><p>==</p></td><td colspan="1" rowspan="1"><p>Checks is two types are equal, not very strict. "5"==5 will also give true</p></td></tr><tr><td colspan="1" rowspan="1"><p>===</p></td><td colspan="1" rowspan="1"><p>Checks is two variables are equal even their types. "5"===5 is false.</p></td></tr><tr><td colspan="1" rowspan="1"><p>!=</p></td><td colspan="1" rowspan="1"><p>Not Equal</p></td></tr><tr><td colspan="1" rowspan="1"><p>!==</p></td><td colspan="1" rowspan="1"><p>Strict Not Equal</p></td></tr><tr><td colspan="1" rowspan="1"><p>&gt;</p></td><td colspan="1" rowspan="1"><p>Greater than</p></td></tr><tr><td colspan="1" rowspan="1"><p>&lt;</p></td><td colspan="1" rowspan="1"><p>Less than</p></td></tr><tr><td colspan="1" rowspan="1"><p>&gt;=</p></td><td colspan="1" rowspan="1"><p>Greater or equal</p></td></tr><tr><td colspan="1" rowspan="1"><p>&lt;=</p></td><td colspan="1" rowspan="1"><p>Less or equal</p></td></tr></tbody></table>

let us see them in action !

```javascript
console.log("5"==5)  //true
console.log("5"===5) //false
console.log(8!="8")  //false
console.log(8!=="8") //true
console.log(6>3)     //true
console.log(6<3)     //false
console.log(3>=3)    //true
console.log(4<=5)    //true
```

## Logical Opeators

Logical operators (`&&`, `||`, `!`) are used to combine or manipulate boolean values. They help control decision-making by evaluating multiple conditions together.

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>OPERATOR</p></th><th colspan="1" rowspan="1"><p>MEANING</p></th></tr><tr><td colspan="1" rowspan="1"><p>&amp;&amp;</p></td><td colspan="1" rowspan="1"><p>AND, it returns true only if both LHS and RHS of the operator are true, otherwise false.</p></td></tr><tr><td colspan="1" rowspan="1"><p>||</p></td><td colspan="1" rowspan="1"><p>OR, it return true if any side of it is true, returns false only if both sides appear false.</p></td></tr><tr><td colspan="1" rowspan="1"><p>!</p></td><td colspan="1" rowspan="1"><p>NOT, it reverts the boolean value obtained</p></td></tr></tbody></table>

Let us get confident through code !

```javascript
(5>2) && (6<10) // true && true => true
(5>=5) && (1<0) // true && false => false

(5<2) || (6>10) // false || false => false
(5>=5) || (1<0) // true || false => true

!(5<3)          // !false => true
```

## Unary Operator

Unary operators operate on a single operand and perform actions like incrementing, negating, or checking type. Examples include `typeof`, `++`, and `--`.

```javascript
let x = 5;

++x;        // 6  (increment)
typeof x;   // "number"  (type checking)
--x;        // 5  (decrement)
```

Unary `++` and `--` could be used both as prefix and postfix and yes they perform differently.

```javascript
let x = 5;

let a = ++x;  // Prefix
// x becomes 6 first
// then a gets 6

let y = 5;

let b = y++;  // Postfix
// b gets 5 first
// then y becomes 6
```

*   `++x` → Increment **first**, then use the value
    
*   `x++` → Use the value **first**, then increment
    

So prefix changes the value *before* assignment, postfix changes it *after*.

## Ternary Operator

You must be aware of `if-else` statements, well there appears a shortcut way to assign value, which you would be doing using if-else. First we see an if-else example.

```javascript
let a;
if(5>4){
    a=10;
} else {
    a=20;
}
```

```javascript
let a= 5>4?10:20 //condition ? value_if_true : value_if_false
```

## Conclusion

Operators are fun ! You need not memorize them to understand them, just use them as you continue your coding journey and you shall get a hang of it!
