JavaScript relies on operators to execute a wide range of operations on data. This guide aims to provide you with an in-depth understanding of these operators and their diverse categories.

Let's start!

What are Operators?

Operators are symbols that are used to perform operations on operands which can be variables or values. They play a pivotal role in achieving various tasks within your code.

Types of Operators

JavaScript provides the following types of operators.

1.Arithmetic Operators

If you want to perform mathematical calculations on numeric values, then you can use the arithmetic operators.

JavaScript provides the following arithmetic operators:

Addition (+)

The addition operator is used to add two numbers together.

For example:

let num1 = 10;
let num2 = 5;
let sum = num1 + num2; 
console.log(sum); //Output: 15

Subtraction (-)

The subtraction operator is used to subtract two numbers.

For example:

let num1 = 10;
let num2 = 5;
let difference = num1 - num2; 
console.log(difference); //Output: 5

Multiplication (*)

The multiplication operator is used to multiply two numbers.

For example:

let num1 = 10;
let num2 = 5;
let product = num1 * num2; 
console.log(product); //Output: 50

Division (/)

The division operator is used to divide the first number by the second number.

For example:

let num1 = 10;
let num2 = 5;
let quotient = num1 / num2; 
console.log(quotient); //Output: 2

Modulus (%)

The modulus operator returns the remainder of a division operation.

For example:

let num1 = 16;
let num2 = 5;
let remainder = num1 % num2; 
console.log(remainder); //Output: 1

Increment (++)

The increment operator is used to increase the value of a variable by one.

For example:

let num = 13;
num++; 
console.log(num); //Output:14

Decrement (--)

The decrement operator is used to decrease the value of a variable by one.

For example:

let num = 13;
num--; 
console.log(num); //Output:12

2.Assignment Operators

If you want to assign values to variables, then you can use the assignment operators. They can also perform operations while assigning values.

JavaScript provides the following assignment operators:

= operator

The assignment operator assigns a value to a variable.

For example:

let x = 10; // x is assigned the value 10

+= operator

let x = 10;
x += 5; 
console.log(x); // x is now 15 (x = x + 5)

-= operator

let x = 10;
x -= 6; 
console.log(x); // x is now 4 (x = x - 6)

*= operator

let x = 10;
x *= 4; 
console.log(x); // x is now 40 (x = x * 4)

/= operator

let x = 10;
x /= 2; 
console.log(x); // x is now 5 (x = x / 2)

%= operator

let x = 10;
x %= 3; 
console.log(x); // x is now 1 (x = x % 3)

3.Comparison Operators

If you want to compare two variables, then you can use the comparison operators. These operators return a Boolean result (true or false) indicating whether the comparison is true or false.

JavaScript provides the following comparison operators:

Equality (==)

The equality operator is used to compare the values of variables.

For example:

let x = 5; //this is an integer
let y = '5'; //this is a string
console.log(x == y); // Output: true

In the above example, the output is true because the value of both variables is the same i.e. 5.

Inequality (!=)

The inequality operator is used to check if the values of two variables are not equal.

For example:

let x = 5;
let y = '6';
console.log(x != y); // Output: true

In the above example, the output is true because the value of x is not equal to the value of y.

Strict Equality (===)

The strict equality operator is used to compare both values and data types of variables.

For example:

let x = 5; //this is an integer
let y = '5'; //this is a string
console.log(x === y); // Output: false

In the above example, the output is false because the values of both variables are the same but their data types are not the same.

Strict Inequality (!==)

The strict inequality operator is used to check if the values and data types of two variables are not equal.

For example:

let x = 5; //this is an integer
let y = '5'; //this is a string
console.log(x !== y); // Output: true

In the above example, the output is true because the data types of both variables are not the same.

Ternary Operator (Conditional Operator)

The ternary operator, also known as the conditional operator, allows you to write concise conditional statements.

The ternary operator has the following syntax:

condition ? expression(if condition true) : expression(if condition false)

Here, the condition is evaluated first. If the condition is true, then the expression before the : (colon) is executed, and its result becomes the result of the entire expression.

If the condition is false, then the expression after the : (colon) is executed, and its result becomes the result of the entire expression.

Example: 1

let age = 18;
let canDrive = age >= 18 ? 'You can drive.' : 'You cannot drive.'; 
console.log(canDrive); //Output: You can drive

Example: 2

let isMorning = false;
let greeting = isMorning ? "Good Morning!" : "Good Evening!";
console.log(greeting); // Output: Good Evening!

Nested Ternary Operators

A nested ternary operator is a conditional operator that is nested inside another conditional operator.

For example:

const score = 75;
const grade = score >= 90 ? "A": score >= 70 ? "B": score >= 50? "C" : "D"

console.log(`Your grade is ${grade}`); // Output: Your grade is B

Here, we have a score variable with a value of 75.

In the ternary operator, the first condition checks if the score is greater than or equal to 90, if it's true then it sets the value of the variable grade to "A" and if it's false then it checks on the second condition which is score >= 70.

If the condition score >=70 is true then it sets the value of the variable grade to "B" and if it's false then it checks on the next condition which is score >= 50.

If the condition score>=50 is true then it sets the value of the variable grade to "C" and if it's false then it sets the value of the variable grade to "D".

In this case, we have score = 75, which means score>=70, so the value of the variable grade is set to "B".

Other Comparison Operators (<, >, <=, >=)

JavaScript also provides operators such as greater than (>), less than (<), greater than or equal to (>=), and less than or equal to (<=).

Example: 1

let x = 5;
let y = 16;
console.log(x > y); // Output: false

Example: 2

let x = 5;
let y = 16;
console.log(x < y); // Output: true

Example: 3

let x = 5;
let y = 16;
console.log(x >= y); // Output: false

Example: 4

let x = 5;
let y = 16;
console.log(x <= y); // Output: true

4.Logical Operators

Logical operators are used on one or more variables and return true or false.

JavaScript provides the following logical operators:

Logical AND (&&)

The logical AND operator returns true if both of its operands are true. Otherwise, it returns false. It can be used to check multiple conditions.

Example: 1

let x = 13;
console.log(x<15 && x>12); //Output: true

In the above example, the output is true because condition x<15 is true and condition x>12 is true i.e., both conditions are true.

Example: 2

let x = 13;
console.log(x<15 && x>14); //Output: false

In the above example, the output is false because condition x<15 is true, but condition x>14 is false i.e., both conditions are not true.

You can also check more than two conditions using the && operator. For example:

let a = true;
let b = true;
let c = false;
console.log(a && b && c); //Output: false

Here the output is false because one variable (c) is false.

Logical OR (||)

The logical OR operator returns true if at least one of its operands is true. It returns false if both operands are false.

Example:1

let x = 13;
console.log(x>15 || x<20); //Output: true

Here the output is true because one of the conditions (x<20) is true.

Example: 2

let x = 13;
console.log(x>15 || x<12); // Output: false

Here the output is false because both of the conditions are false.

Example: 3

let a = true;
let b = false;
console.log(a || b); // Output: true

Here the output is true because one of the conditions is true.

Logical NOT (!)

The logical NOT operator reverses a Boolean value. That means if the operand is true, it becomes false, and if the operand is false, it becomes true.

For example:

let a = true;
console.log(!a); // Output: false

let b = false;
console.log(!b) // Output: true

Conclusion

In this comprehensive guide, we've learned about JavaScript operators, which are essential for performing a wide range of operations on data. Here's a quick recap of what we've covered:

1. Arithmetic Operators: These operators are used for mathematical calculations, including addition, subtraction, multiplication, division, modulus, increment, and decrement.

2. Assignment Operators: These are used to assign values to variables and can also perform operations while assigning values.
   Assignment operators include =, +=, -=, *=, /=, %=.

3. Comparison Operators: These operators are used to compare values and return true or false based on the comparison.
   Comparison operators include equality (==), inequality (!=), strict equality (===), strict inequality (!==), ternary operator(? :), greater than (>), less than (<), greater than or equal to (>=), and less than or equal to (<=).

4. Logical Operators: These operators are used to perform logical operations on Boolean values.
   Logical operators include logical AND (&&), logical OR (||), and logical NOT (!).

Throughout the guide, I've provided detailed explanations and examples for each type of operator.

Thanks for reading.

For more content like this click here.

Keep Coding!