JavaScript: What are Operators ?
Tags: javascript, webdev, programming, tutorial
Published: 2023-08-16 17:57:48

Operators are symbols that allows you to manipulate values. They are the foundation for expressions, which are made of multiple combinations of values and operators that are evaluated to get to a result.

**Overview**: 
1. [Comments](#comments)
   - [Single-line comments](#single)
   - [Multi-line comments](#multi)
2. [Arithmetic Operators](#arithmetic)
   - [Prefix increment/decrement](#prefix)
   - [Postfix increment/decrement](#postfix)
3. [Assignment Operators](#assign)
5. [Comparison Operators](#comparison)
6. [Logical Operators](#logic)
7. [Unary Operators](#unary)
8. [Bitwise Operators](#bitwise)

## <a id="comments">Comments</a>
Comments are a brief but clear description that you can add to your code to make it clearer and easier to understand.
There are two types of comments:
### <a id="single">Single-line comments</a>
Single-line comments are used to write comments that are only one line long.
```javascript
// Single-line comment
let x = 2; //This is a variable with a value of 2
```
### <a id="multi">Multi-line comments</a>
Multi-line comments are multiple lines long, they're also referred to as block comments. They are used to give more detailed explanations for a code sections. 
```javascript
/* this comment 
  is a multi-line
comment*/
```
You can also use comments to disable or stop the execution of a code block.
```javascript
let x = 2;
// console.log(x);
```
Now `console.log(x)` will not display 2 in your console.

## <a id="arithmetic">Arithmetic Operators</a>
Programs use arithmetic operations to perform mathematical calculations. 
### <a id="operators">Operators: </a>
|operator| description|
|:------:|------------|
|+	 |addition operator|
|-	 |subtraction operator|
|*	 |multiplication operator|
|/	 |division operator|
|%	 |remainder operator|
|**	 |Exponentiation operator|
|++	 |increment operator|
|--	|decrement operator|

- Addition:
```javascript
let a = 5 + 4; // the sum is 9
```
- Subtraction:
```javascript
let a = 6 - 5; // the difference is 1
```
- Multiplication:
```javascript
let a = 3 * 4 ; // the product is 12
```
- Division:
```javascript
let a = 35 / 7 ; // the quotient is 5
```
- Modulo: 
gives back the remaining amount after the left operand has been divided by the right operand.
```javascript
let a = 14 % 3 // the remainder is 2
```
- Exponentiation
Exponentiation is raising a number to a specific power.
```javascript
let a = 2 ** 4; // the result is 16
```
- Increment and decrement
The increment operator increases the value of a variable by 1 while the decrement operator decreases the value of a variable by 1. 

### <a id="prefix">Prefix increment/decrement</a>
Prefix increment/decrement executes the statement after increasing or decreasing the value.
```javascript
let x = 1;
let y = ++x; // Increment x by 1 and then assigned new value to y
console.log(x); // result 2 
console.log(y); // result: 2
```
### <a id="postfix">Postfix increment/decrement</a>
Postfix increment/decrement executes the statement before increasing or decreasing the value.
```javascript
let x = 5;
let y = x++; // Assign the current value of x to y and then increment x by 1
console.log(x); // result: 6 
console.log(y); // result: 5 
```


## <a id="assign">Assignment Operator</a>
The assignment operator assigns a value to a variable, which we've seen in the previous article when we've learned about initializing variables. 

The Assignment operator can be combined with arithmetic operators to create a shorthand. This shorthand makes it possible to perform an arithmetic operation and then assign the result to the original variable. 

- Addition assignment:
```javascript
let x = 1;
x += 2; // Equivalent to x = x + 2; x = 3
```
- Subtraction Assignment:
```javascript
let x = 2;
x -= 1; // Equivalent to x = x - 1; x = 1
```
- Multiplication Assignment:
```javascript 
let x = 2;
x *= 5; // Equivalent to x = x * 5; x = 10
```
- Division Assignment: 
```javascript
let x = 20;
x /= 4; // Equivalent to x = x / 4; x = 5
```
- Modulo Assignment:
```javascript
let x = 14
x %= 3 // Equivalent to  x = x % 3; x = 2
```
## <a id="coercion">Type Coercion</a>
Type coercion is when the operator is used on a value that isn't the right type, value will be implicitly converted to the right type. 
Here's an example: 
```javascript
let a = 5 + '5'; 
console.log(a); // result: 55
let b = '10' - 5;
console.log(b); // result: 5
```
In the first example, the number 5 is coerced into a string and that gives us `55` while in the second example, the `10` is coerced into a number and it gives us `5`.

## <a id="comparison"> Comparison Operators </a>
When two values or expressions are compared, **comparison operators** are used to determine whether one of the values is true or false and return a **Boolean value** (true or false). These operators are used in conditional statements and loops to make decisions which we'll get to later. 

| Comparison Operators| Description |
|:-------------------:|-------------|
|  == | Abstract or loose equality|
| === | Strict equality|
| != | Abstract inequality|
|!== | Strict inequality |
| > | Greater than |
| >= | Greater than or equal to |
| < | Less than|
| <= | Less than or equal to |

- Loose comparison performs type coercion before comparing values, meaning JavaScript will try to convert values of various types to a single type before comparing them. 
```javascript
let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a == b)
/*
data type of a: string 
data type of b: number
true
*/
```
- Strict comparison does not perform type coercion before comparing values, meaning it checks both the values and their data types, giving you a precise comparison.
```javascript
let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a === b)
/*
data type of a: string 
data type of b: number
false
*/
```
- It is the same for abstract and strict inequality. 
- Abstract inequality
```javascript
let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
false
*/
```
- Strict inequality 
```javascript
let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
true
*/
```
- Greater than, Greater than or equal, Less than and Less than or equal: 
```javascript
let x = 10;
let y = 5;

console.log(x > y);  // true, 10 is greater than 5
console.log(x >= y); // true, 10 is greater than or equal to 5
console.log(x < y);  // false, 10 is not less than 5
console.log(x <= y); // false, 10 is not less than or equal to 5
```

## <a id="logic">Logical Operators</a>

-`&&` The logical operator `and`: If the conditions being compared are **all** true, then the expression will return `true`. If one of the conditions being compared is `false` then the result will be `false`. If all the conditions compared are false then the result will be `false`.

```JavaScript
let x = 5; 
let y = 7;
console.log( x>3 && y <10 ); //true
console.log( x>3 && y <x ); //false
console.log( x>y && y <x ); //false
```

- `||` The logical operator `or`:  If one or all the conditions return true then the result will be `true`. If all conditions are `false` then the result is going to be `false`.

``` JavaScript
let x = 5; 
let y = 7;
console.log( x>3 || y <10 ); //true
console.log( x>3 || y <x ); //true
console.log( x>y || y <x ); //false
```

- `!` The logical operator not: If the logical operator `not` is used with a boolean value it will return the opposite of that value. The value `true` becomes `false` and `false` becomes `true`. 

```JavaScript
let isTrue = true;

console.log(!isTrue); //false
console.log(!(!isTrue)); //true;
```
## <a id="unary">Unary Operator</a>
The term "unary operator" refers to an operator that only accepts one operand, or value, to operate on. It is used for various purposes. Let's look at some examples: 

- The minus operator, is used to negate or change the sign of a number.
```javascript
let x = -2;
console.log(-x); //2
```
- The plus operator, is used to convert a value into a number.
```javascript
let x = '42';
console.log('data type of x: '+ typeof +x); //number
```

## <a id="bitwise"> Bitwise Operators </a>
Bitwise operators are used to carry out operations on specific bits of binary representations of numbers. 

| Operator | Description                                                      |
|----------|------------------------------------------------------------------|
| `&`      | Bitwise AND: Performs AND operation on each bit of operands.     |
| `|`      | Bitwise OR: Performs OR operation on each bit of operands.       |
| `^`      | Bitwise XOR: Performs XOR operation on each bit of operands.     |
| `~`      | Bitwise NOT: Inverts the bits of the operand.                   |
| `<<`     | Left Shift: Shifts bits to the left by specified positions.     |
| `>>`     | Right Shift: Shifts bits to the right by specified positions.   |
| `>>>`    | Zero-fill Right Shift: Similar to right shift with zero fill.   |

```javascript
// Bitwise AND (&)
let resultAND = 5 & 3; // Result: 1
console.log(resultAND); // Output: 1

// Bitwise OR (|)
let resultOR = 5 | 3; // Result: 7
console.log(resultOR); // Output: 7

// Bitwise XOR (^)
let resultXOR = 5 ^ 3; // Result: 6
console.log(resultXOR); // Output: 6

// Bitwise NOT (~)
let num = 5;
let resultNOT = ~num; // Result: -6
console.log(resultNOT); // Output: -6

// Left Shift (<<)
let resultLeftShift = 5 << 2; // Result: 20
console.log(resultLeftShift); // Output: 20

// Right Shift (>>)
let resultRightShift = 20 >> 2; // Result: 5
console.log(resultRightShift); // Output: 5

// Zero-fill Right Shift (>>>)
let numNegative = -20;
let resultZeroFillRightShift = numNegative >>> 2; // Result: 1073741818
console.log(resultZeroFillRightShift); // Output: 1073741818

```