Mastering JavaScript Operators

In JavaScript, operators are symbols that perform specific actions on values. Operators are crucial for performing computations, comparisons, and logical operations in JavaScript.

Types of Operators in JavaScript

1. Arithmetic Operators

Here operators perform basic arithmetic operations.

Operator	Description	Example	Result	Explanation
`+`	Addition	`5 + 2`	`7`	Adds 5 and 2 together.
`-`	Subtraction	`5 - 2`	`3`	Subtracts 2 from 5.
`*`	Multiplication	`5 * 2`	`10`	Multiplies 5 by 2.
`/`	Division	`5 / 2`	`2.5`	Divides 5 by 2. The result is a floating-point number.
`%`	Modulus (Remainder)	`5 % 2`	`1`	Divides 5 by 2 and returns the remainder.
`**`	Exponentiation	`5 ** 2`	`25`	Raises 5 to the power of 2.
`++`	Increment (adds 1)	`let a = 5; a++`	`6` (value of `a`)	Increases `a` by 1. In postfix, the value before increment is used.
`--`	Decrement (subtracts 1)	`let a = 5; a--`	`4` (value of `a`)	Decreases `a` by 1. In postfix, the value before decrement is used.

Notes:

Postfix increment/decrement (a++ or a--): Returns the old value first, then updates the variable.
Prefix increment/decrement (++a or --a): Updates the variable first, then returns the updated value.

2. Assignment Operators

These operators assign values to variables. Here’s the explanation presented in a table format:

Operator	Description	Example	Result (if `a = 5` initially)	Explanation
`=`	Assignment	`a = 5`	`a = 5`	Assigns the value `5` to the variable `a`.
`+=`	Addition assignment	`a += 3`	`a = 8`	Adds `3` to `a` and updates `a` to `8`.
`-=`	Subtraction assignment	`a -= 2`	`a = 3`	Subtracts `2` from `a` and updates `a` to `3`.
`*=`	Multiplication assignment	`a *= 2`	`a = 10`	Multiplies `a` by `2` and updates `a` to `10`.
`/=`	Division assignment	`a /= 2`	`a = 2.5`	Divides `a` by `2` and updates `a` to `2.5`.
`%=`	Modulus assignment	`a %= 2`	`a = 1`	Finds the remainder when `a` is divided by `2` and updates `a` to `1`.
`**=`	Exponentiation assignment	`a **= 2`	`a = 25`	Raises `a` to the power of `2` and updates `a` to `25`.

Notes:

These operators combine an arithmetic operation with an assignment (=).
They simplify the syntax by reducing a = a + value to a += value.

3. Comparison Operators

These operators compare two values and return a boolean (true or false). Here’s a explanation in table format:

Operator	Description	Example	Result	Explanation
`==`	Equality (loose comparison)	`5 == "5"`	`true`	Compares the values of `5` and `"5"` after type conversion; they are equal.
`===`	Strict equality	`5 === "5"`	`false`	Compares both value and type; `5` (number) is not equal to `"5"` (string).
`!=`	Inequality (loose)	`5 != "5"`	`false`	Compares the values after type conversion; they are equal, so it’s `false`.
`!==`	Strict inequality	`5 !== "5"`	`true`	Compares both value and type; they differ, so it’s `true`.
`>`	Greater than	`5 > 2`	`true`	Checks if `5` is greater than `2`; it is.
`<`	Less than	`5 < 2`	`false`	Checks if `5` is less than `2`; it is not.
`>=`	Greater than or equal to	`5 >= 5`	`true`	Checks if `5` is greater than or equal to `5`; it is.
`<=`	Less than or equal to	`5 <= 4`	`false`	Checks if `5` is less than or equal to `4`; it is not.

Notes:

Loose comparison (== and !=): Converts types before comparing values.
Strict comparison (=== and !==): Requires both type and value to match.

4. Logical Operators

These operators are used to perform logical operations, mostly with boolean values.

1. Logical AND (`&&`)

Description: Returns true if both operands are true. If either operand is false, it returns false.
Behavior:
- If both operands are true, the result is true.
  - Example: true && true results in true.
- If one operand is false, the result is false.
  - Example: false && true results in false.
- If both operands are false, the result is false.
  - Example: false && false results in false.
Short-Circuiting:
- If the first operand is false, the second operand is not evaluated because the result is already determined to be false.

2. Logical OR (`||`)

Description: Returns true if any operand is true. Returns false only if both operands are false.
Behavior:
- If both operands are true, the result is true.
  - Example: true || true results in true.
- If one operand is true, the result is true.
  - Example: false || true results in true.
- If both operands are false, the result is false.
  - Example: false || false results in false.
Short-Circuiting:
- If the first operand is true, the second operand is not evaluated because the result is already determined to be true.

3. Logical NOT (`!`)

Description: Negates the value of the operand. If the operand is true, it becomes false. If it is false, it becomes true.
Behavior:
- If the operand is true, the result is false.
  - Example: !true results in false.
- If the operand is false, the result is true.
  - Example: !false results in true.

5. Bitwise Operators

1. AND (`&`)

Description: Compares each bit of two numbers. The result is 1 if both bits are 1; otherwise, it is 0.
Example:
```
  5 & 1
```

Binary Calculation:

  5:  0101
  1:  0001
  -----------------
  Result:  0001 (1 in decimal)

Result: 1

2. OR (`|`)

Description: Compares each bit of two numbers. The result is 1 if at least one bit is 1; otherwise, it is 0.
Example:
```
  5 | 1
```

Binary Calculation:

  5:  0101
  1:  0001
  -----------------
  Result:  0101 (5 in decimal)

Result: 5

3. XOR (`^`)

Description: Compares each bit of two numbers. The result is 1 if the bits are different; otherwise, it is 0.
Example:
```
  javascriptCopy code5 ^ 1
```

Binary Calculation:

  5:  0101
  1:  0001
  -----------------
  Result:  0100 (4 in decimal)

Result: 4

4. NOT (`~`)

Description: Inverts all the bits of a number.
Example:
```
  ~5
```

Binary Calculation:

  5:     00000000 00000000 00000000 00000101 (32-bit representation)
  ~5:    11111111 11111111 11111111 11111010
  Result: -6

Result: -6

5. Left Shift (`<<`)

Description: Shifts the bits of the number to the left by the specified number of positions. Zeroes are filled on the right.
Example:
```
  5 << 1
```

Binary Calculation:

  5:  0101
  -----------------
  Shifted:  1010 (10 in decimal)

Result: 10
Shortcut: This operation multiplies the number by 2^n, where n is the number of positions the bits are shifted.

Example:
- 5 << 1: Shift the binary representation of 5 (which is 0101) by 1 position to the left, giving 1010 (which is 10 in decimal).
- Effectively, 5 * 2^1 = 5 * 2 = 10.

6. Right Shift (`>>`)

Description: Shifts the bits of the number to the right by the specified number of positions. The sign bit is preserved.
Example:
```
  5 >> 1
```

Binary Calculation:

  5:  0101
  -----------------
  Shifted:  0010 (2 in decimal)

Result: 2
Shortcut: This operation divides the number by 2^n (and floors the result), where n is the number of positions the bits are shifted.

Example:
- 5 >> 1: Shift the binary representation of 5 (which is 0101) by 1 position to the right, giving 0010 (which is 2 in decimal).
- Effectively, 5 / 2^1 = 5 / 2 = 2 (rounded down).

7. Unsigned Right Shift (`>>>`)

Description: Shifts the bits of the number to the right by the specified number of positions. Zeroes are filled on the left, and the sign bit is ignored.
Example:
```
  -5 >>> 1
```

Binary Calculation:

  -5:  11111111 11111111 11111111 11111011 (32-bit signed integer)
  Shifted:  01111111 11111111 11111111 11111101 (ignores sign bit)
  Result: 2147483645

Result: 2147483645

6. Ternary (Conditional) Operator

The ternary operator is a shorthand for if-else conditions.

Operator	Description	Example	Result
`? :`	Shorthand for `if`-`else`	`let result = (5 > 2) ? "yes" : "no";`	`yes`

7. String Operators

The + operator is overloaded for strings to concatenate them.

Operator	Description	Example	Result
`+`	Concatenation	`"Hello" + " World"`	`"Hello World"`

8. Spread Operator (`...`)

The spread operator allows you to spread elements of an iterable (like an array) into individual elements.

Operator	Description	Example	Result
`...`	Expands iterable elements	`[...['a', 'b', 'c']]`	`['a', 'b', 'c']`

Spread operator will be discussed soon…

Understanding JavaScript Operators: A Comprehensive Guide

Types of Operators in JavaScript

1. Arithmetic Operators

Notes:

2. Assignment Operators

Notes:

3. Comparison Operators

Notes:

4. Logical Operators

1. Logical AND (&&)

2. Logical OR (||)

3. Logical NOT (!)

5. Bitwise Operators

1. AND (&)

2. OR (|)

3. XOR (^)

4. NOT (~)

5. Left Shift (<<)

6. Right Shift (>>)

7. Unsigned Right Shift (>>>)

6. Ternary (Conditional) Operator

7. String Operators

8. Spread Operator (...)

1. Logical AND (`&&`)

2. Logical OR (`||`)

3. Logical NOT (`!`)

1. AND (`&`)

2. OR (`|`)

3. XOR (`^`)

4. NOT (`~`)

5. Left Shift (`<<`)

6. Right Shift (`>>`)

7. Unsigned Right Shift (`>>>`)

8. Spread Operator (`...`)