Operators in JavaScript

JavaScript is a dynamic programming language, has various operators to perform operations on data and manipulate values. In this article, we'll learn the diverse types of operators in JavaScript, exploring their functionalities and providing practical examples to enhance your understanding.

Types of operators

Understanding JavaScript operators is the most basic thing for writing efficient and expressive code. By mastering these operators, we'll gain the tools needed to manipulate data, make decisions, and create more dynamic and interactive applications.

🌟 Arithmetic Operators

📍Assignment Operators

🌟Comparison Operators

📍Logical Operators

🌟Bitwise Operators

📍Ternary Operators

Arithmetic Operators

Arithmetic operators in JavaScript allow us to perform mathematical calculations such as addition, subtraction, multiplication, division, and modulus. These operators are important for performing basic mathematical calculations within our code.

Addition

The addition operator is denoted by '+'. It is used to add two or more numbers and returns their sum as the output.

index.js

1

2let number1 = 25; 3let number2 = 36; 4let number3 = 56; 5 6let sum = number1 + number2 + number3; 7console.log(sum); // 117

### **Subtraction**

The subtraction operator is denoted by '-'. It is used to subtract one number from another and returns their difference as the output.

index.js

```cpp
1

2let number1 = 25; 3let number2 = 36; 4 5let diff = number1 - number2; 6console.log(diff); // -11

### **Multiplication**

The multiplication operator is denoted by '\*'. It is used to multiply one number from another and returns their product as the output.

index.js

```cpp
1

2let number1 = 25; 3let number2 = 36; 4 5let prod = number1 * number2; 6console.log(prod); // 900

### **Exponentiation**

Exponentiation in JavaScript was introduced in ECMAScript 2016 (ES7).

The exponentiation operator is denoted by '\*\*'. This operator raises the first operand to the power of second operand.

index.js

```cpp
1

2let x = 5; 3let y = 5; 4 5let ans = x 3; 6console.log(ans); // 125 7 8ans = x y; 9console.log(ans); // 3125

### **Division**

The division operator is denoted by '/'. It is used to divide one number by another and returns their quotient as the output.

index.js

```cpp
1

2let x = 10; 3let y = 4; 4 5let ans = x/y; 6console.log(ans); // 2.5

### **Modulus**

The modulus operator is denoted by '%'. It returns the division remainder i.e. the remainder of two numbers that have been divided.

index.js

```cpp
1

2let x = 10; 3let y = 4; 4 5let ans = x % y; 6console.log(ans); // 2

### **Increment & decrement**

Increment & decrement operators operators are used to increment or decrement a numeric value by 1.

Increment operator is denoted by '++', and the decrement operator is denoted by '--'.

index.js

```cpp
1

2let x = 10; 3let y = 4; 4 5x++; 6console.log(x); // 11 7 8y--; 9console.log(y); // 3

According to their usage, the increment and decrement operators can be classified as 'pre-increment/decrement' and 'post-increment/decrement'.

**Pre-increment/decrement** : Increment/decrement the value before using.

**Post-increment/decrement** : Use the current value and then increment/decrement.

index.js

```cpp
1

2//Pre increment/decrement 3let x = 10; 4let y = 4; 5 6console.log(++x); // 11 7console.log(--y); // 3 8console.log(x); // 11 9console.log(y); // 3 10 11//Post increment/decrement 12let a = 10; 13let b = 4; 14console.log(a++); // 10 15console.log(b--); // 4 16 17console.log(a); // 11 18console.log(b); // 3

## **Assignment Operators**

The assignment operator assigns value to the variables. The most common assignment operator we use is '='.

index.js

```cpp
1

2let firstName = "Mayank"; 3let y = 4; 4 5console.log(firstName); // Mayank 6console.log(y); // 4

## **Comparison Operators**

Comparison operators, such as greater then (>), less than (<), greater than or equal (>=), less than or equal (<=), equal to (==), not equal to (!=) are used to compare values and determine the relationship between them. These return a boolean value in the output.

### **Strict Equality v/s Loose Equality**

Strict equality is denoted by '==='. When we use strict equality operator, both the data-type and the value are checked to determine equality, and it returns a boolean answer.

Loose equality is denoted by '=='. When we use loose equality operator, only the value is checked to determine equality, and it returns a boolean answer.

index.js

```cpp
1

2let x = "10"; 3console.log(typeof(x)); // string 4 5let y = 10; 6console.log(typeof(y)); // number 7 8console.log(x == y); // true 9 10console.log(x === y); // false

## **Logical Operators**

Logical operators are used to connect two or more expressions/conditions to make decisions based on the criteria employed.

There are typically three types of logical operators :

(a) AND (&&)

(b) OR (||)

(c) NOT (!)

### **AND (&&)**

The logical AND operator is denoted by '&&'. It is used to evaluate whether both of the given expressions or operands are true. It returns true only if both expressions or operands are true. If any one of the expressions or operands is false or evaluates to 0, the logical AND operator returns false.

index.js

```cpp
1

2let alert1 = true; 3let alert2 = false; 4let alert3 = true; 5 6console.log(alert1 && alert2); // false 7console.log(alert2 && alert3); // false 8console.log(alert1 && alert3); // true 9 10let num1 = 0; 11let num2 = 1; 12let num3 = 1; 13 14console.log(num1 && num2); // 0 15console.log(num2 && num3); // 1 16console.log(num1 && num3); // 0

### **OR (||)**

The logical OR operator is denoted by '||'. It is used to evaluate whether any one of the given expressions or operands is true. It returns false only if both expressions or operands are false. If any one of the expressions or operands is true or evaluates to 1, the logical OR operator returns true.

index.js

```cpp
1

2let alert1 = false; 3let alert2 = false; 4let alert3 = true; 5 6console.log(alert1 || alert2); // false 7console.log(alert2 || alert3); // true 8console.log(alert1 || alert3); // true 9 10let num1 = 0; 11let num2 = 1; 12let num3 = 0; 13 14console.log(num1 || num2); // 1 15console.log(num2 || num3); // 1 16console.log(num1 || num3); // 0

### **NOT (!)**

The logical NOT operator is denoted by '!'. It is used to make truthy values falsy and vice-versa. It returns false if input is a true.

index.js

```cpp
1

2let alert1 = false; 3let alert2; 4let alert3 = NaN; 5let mySum = 45; 6let gone = false; 7let isFirst = true; 8 9console.log(!alert1); // true 10console.log(!alert2); // true 11console.log(!alert3); // true 12console.log(!mySum); // false 13console.log(!gone); // true 14console.log(!isFirst); // false

## **Bitwise Operators**

Bitwise operators are used to do manipulation of individual bits within the binary representation of numbers. There are several bitwise operators are used in JavaScript :

(a) Bitwise AND (&)

(b) Bitwise OR (|)

(c) Bitwise NOT (~)

(d) Bitwise XOR (^)

(e) Left Shift (<<)

(f) Right Shift (>>)

### **Bitwise AND (&)**

Bitwise AND is denoted by '&'. It is used between two numbers, and the bitwise AND operation is performed on each corresponding bit of the two numbers.

In binary system numbers are represented in 0's and 1's, so bitwise AND(&) will return 1 only when both the corresponding bits are 1 simultaneously else it will return 0.

index.js

```cpp
1

2let num1 = 5; 3// Binary representation of 5 : 0 1 0 1 4 5let num2 = 7; 6// Binary representation of 7 : 0 1 1 1 7 8console.log(num1 & num2); // 5

### **Bitwise OR (|)**

Bitwise OR is denoted by '|'. It is used between two numbers, and the bitwise OR operation is performed on each corresponding bit of the two numbers.

Bitwise OR(|) will return 1 if any one of the corresponding bits is 1, else it will return 0.

index.js

```cpp
1

2let num1 = 5; 3// Binary representation of 5 : 0 1 0 1 4 5let num2 = 8; 6// Binary representation of 7 : 1 0 0 0 7 8console.log(num1 | num2); // 13

### **Bitwise NOT (~)**

Bitwise NOT is denoted by '~', it is used on a single number. Bitwise NOT operator inverts all the bits (0 is inverted to 1 and 1 is inverted to 0) of the given number and returns the new number as output.

index.js

```cpp
1

2let num1 = 5; 3// Binary representation of 5 : 0 0 0 0 1 0 1 4 5let num2 = 8; 6// Binary representation of 7 : 0 0 0 1 0 0 0 7 8let num3 = -8; 9// Binary representation of -8 : 1 1 1 1 0 0 0 10 11console.log(~num1); // -6 12console.log(~num2); // -9 13console.log(~num3); // 7

### **Bitwise XOR (^)**

Bitwise XOR is denoted by '^'. It is used between two numbers, and the bitwise XOR operation is performed on each corresponding bit of the two numbers.

In binary system numbers are represented in 0's and 1's, so bitwise XOR(^) will return 1 only when both the corresponding bits are different else it will return 0.

For example : "1 ^ 0 = 1", "0 ^ 0 = 0", "1 ^ 1 = 0", "0 ^ 1 = 1"

index.js

```cpp
1

2let num1 = 5; 3// Binary representation of 5 : 0 0 0 0 1 0 1 4 5let num2 = 8; 6// Binary representation of 7 : 0 0 0 1 0 0 0 7 8console.log(num1 ^ num2); // 13

### **Left Shift (<<)**

Left shift operator is denoted by '<<'. It shifts the bits of the left operand to the left, by a number of positions specified by the right operand. 0 comes in the place of the least significant bit after each shifting is done.

For example, the binary representation of 5 is '00000101',

Now, when we use '5 << 2', it means we want to shit the binary representation of 5 left by 2 positions and then it becomes '00010100',

The number whose binary representation is '00010100', is 20.

Thus '5 << 2' = 20.

index.js

```cpp
1

2let num1 = 5; 3// Binary representation of 5 : 0 0 0 0 1 0 1 4 5let num2 = 8; 6// Binary representation of 7 : 0 0 0 1 0 0 0 7 8console.log(num1 << 3); // 40 9console.log(num2 << 2); // 32

The left shift operator effectively multiplies the left operand by 2 to the power of the right operand.

## **Right Shift (>>)**

Right shift operator is denoted by '>>'. It shifts the bits of the left operand to the right, by a number of positions specified by the right operand preserving the sign of the original number.

index.js

```javascript
1

2let num1 = 5; 3// Binary representation of 5 : 0 0 0 0 1 0 1 4 5let num2 = 8; 6// Binary representation of 7 : 0 0 0 1 0 0 0 7 8console.log(num1 >> 3); // 0 9console.log(num2 >> 2); // 2

## **Ternary Operators**

Ternary operator is a concise way to write conditional statements, it is widely used in JavaScript. It is also known as conditional operator. It has three parts: a condition, statement to execute if the condition is true and the statement to execute if the condition is false.

**Syntax**:

index.js

```javascript
1

2//SYNTAX 3 4(condition) ? (statement1) : (statement2);

**Example**:

index.js

```javascript
1

2let myage = 21; 3 4(myAge >= 18) ? (console.log("Can Drive")) : (console.log("Cannot Drive")); 5 6// Output : Cannot Drive ```