JavaScript operators are special symbols used to perform calculations, combine values, and make logical comparisons in your code. They act on values known as operands.
JavaScript has many operators that you can use to perform operations on values and variables (also called operands)
Based on the types of operations these JS operators perform, we can divide them up into seven groups:
- Arithmetic Operators
- Assignment Operators
- Comparison Operators
- Logical Operators
- Relational Operators
JavaScript operators are special symbols used to perform operations on variables and values. They are mainly categorized into Arithmetic Operators (calculations), Assignment Operators (assign values), Comparison Operators (compare values), Logical Operators (combine conditions), Increment/Decrement Operators (increase or decrease values), and the Ternary Operator (short form of if-else). Operators are essential for performing calculations, making decisions, and controlling the flow of a JavaScript program.
Arithmetic Operators
The arithmetic operators are used to perform mathematical operations like addition and subtraction.
These operators are frequently used with number data types, so they are similar to a calculator. The following example shows how you can use the + operator to add two variables together:
let x = 3;
let y = 8;
console.log(x + y); // 11
Here, the two variables x and y are added together using the plus + operator. We also used the console.log() method to print the result of the operation to the screen.
You can use operators directly on values without assigning them to any variable too:
console.log(2 + 1); // 3
console.log(4 + 1); // 5
- Addition +
- Subtraction -
- Multiplication *
- Division /
- Remainder %
- Exponentiation **
- Increment ++
- Decrement --
1. Addition operator
The addition operator + is used to add two or more numbers together. You've seen how this operator works previously, but here's another example:
console.log(7 + 2); // 9
console.log(2.3 + 1.5); // 3.8
You can use the addition operator on both integer and floating numbers.
2. Subtraction operator
The subtraction operator is marked by the minus sign − and you can use it to subtract the right operand from the left operand.
For example, here's how to subtract 3 from 5:
let x = 5;
let y = 3;
console.log(x - y); // 2
3. Multiplication operator
The multiplication operator is marked by the asterisk * symbol, and you use it to multiply the value on the left by the value on the right of the operator.
console.log(5 * 2); // 10
console.log(3 * 3); // 9
4. Division operator
The division operator / is used to divide the left operand by the right operand. Here are some examples of using the operator:
console.log(10 / 2); // 5
console.log(9 / 3); // 3
5. Remainder operator
The remainder operator % is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been performed.
A practical example should make this operator easier to understand, so let's see one:
console.log(10 % 3);
The number 10 can't be divided by 3 perfectly. The result of the division is 3 with a remainder of 1. The remainder operator simply returns that remainder number.
If the left operand can be divided with no remainder, then the operator returns 0.
This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1.
console.log(1 % 2); // 1
console.log(2 % 2); // 0
console.log(3 % 2); // 1
console.log(4 % 2); // 0
6. Exponentiation operator
The exponentiation operator is marked by two asterisks **. It's one of the newer JavaScript operators and you can use it to calculate the power of a number (based on its exponent).
For example, here's how to calculate 10 to the power of 3:
console.log(10 ** 3); // 1000
Here, the number 10 is multiplied by itself 3 times (10 10 10)
The exponentiation operator gives you an easy way to find the power of a specific number.
7. Increment operator
The increment ++ operator is used to increase the value of a number by one. For example:
let x = 5;
x++;
console.log(x); // 6
This operator gives you a faster way to increase a variable value by one. Without the operator, here's how you increment a variable:
let x = 5;
x = x + 1;
console.log(x); // 6
Using the increment operator allows you to shorten the second line. You can place this operator before or next to the variable you want to increment:
let x = 5;
// Place the operator next to the variable (postfix)
x++;
// Place the operator before the variable (prefix)
++x;
The difference between prefix (++x) and postfix (x++) increment operators is in the value they return. Prefix increments the variable first and then returns the updated value, whereas postfix returns the current value first and then increments the variable.
Consider the following example:
let x = 5;
let y = 5;
console.log(x++); // 5
console.log(x); // 6
console.log(++y); // 6
console.log(y); // 6
Here, you can see that placing the increment operator next to the variable will print the variable as if it has not been incremented.
When you place the operator before the variable, then the number will be incremented before calling the console.log() method.
8. Decrement operator
The decrement -- operator is used to decrease the value of a number by one. It's the opposite of the increment operator:
let x = 5;
x--;
console.log(x); // 4
Please note that you can only use increment and decrement operators on a variable. An error occurs when you try to use these operators directly on a number value:
console.log(5--);
Output:
Uncaught SyntaxError: Invalid left-hand side expression in postfix operation
You can't use increment or decrement operator on a number directly.
Arithmetic operator Example:
let x = 5;
// addition operator
console.log("Addition: x + 3 = ", x + 3);
// subtraction operator
console.log("Subtraction: x - 3 =", x - 3);
// multiplication operator
console.log("Multiplication: x * 3 =", x * 3);
// division operator
console.log("Division: x / 3 =", x / 3);
// remainder operator
console.log("Remainder: x % 3 =", x % 3);
// increment operator
console.log("Increment: ++x =", ++x);
// decrement operator
console.log("Decrement: --x =", --x);
// exponentiation operator
console.log("Exponentiation: x ** 3 =", x ** 3);
Output:
Addition: x + 3 = 8
Subtraction: x - 3 = 2
Multiplication: x * 3 = 15
Division: x / 3 = 1.6666666666666667
Remainder: x % 3 = 2
Increment: ++x = 6
Decrement: --x = 5
Exponentiation: x ** 3 = 125
Assignment Operators
Assignment operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.
let n = 10;
n += 5;
n *= 2;
console.log(n);
- = assigns a value to a variable.
- += adds and assigns the result to the variable.
- *= multiplies and assigns the result to the variable.
Comparison Operators
As the name implies, comparison operators are used to compare one value or variable with something else. The operators in this category always return a boolean value: either true or false.
Example:
console.log(9 == 9); // true
console.log(9 != 20); // true
console.log(2 > 10); // false
console.log(2 < 10); // true
console.log(5 >= 10); // false
console.log(10 <= 10); // true
console.log("ABC" == "ABC"); // true
console.log("ABC" == "abc"); // false
console.log("Z" != "A"); // true
console.log("9" == 9); // true
// strict equal
console.log("9" === 9); // false
console.log("1" != 1); // false
// strict not equal
console.log("1" !== 1); // true
Logical Operators
Logical operators are used to check whether one or more expressions result in either true or false.
Logical operators are mainly used to perform the logical operations that determine the equality or difference between the values.
const a = true, b = false;
console.log(a && b); // Logical AND
console.log(a || b); // Logical OR
&& returns true if both operands are true.
|| returns true if at least one operand is true.
! negates the boolean value.
Relational Operators
JavaScript Relational operators are used to compare its operands and determine the relationship between them. They return a Boolean value (true or false) based on the comparison result.
const obj = { length: 10 };
console.log("length" in obj);
console.log([] instanceof Array);
- in checks if a property exists in an object.
- instanceof checks if an object is an instance of a constructor.
Task1:
let i = 5;
let j = 7;
let result = i++ - --j + ++j - i++;
Output:
7 7 0
explanation:
5 - 6 + 7 - 6
12 - 12
0
References:
https://www.freecodecamp.org/news/javascript-operators/
https://www.programiz.com/javascript/operators
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators
Top comments (2)
This is wrong. The prefix position will execute the operator and return the value AFTER the increment, whereas the postfix position will execute the operator and return the value BEFORE the increment. It does not do this after the line of code has been executed - in either case. Observe:
Thank you for pointing that out. You're correct—I should have explained it more accurately. Prefix (
++x) increments the value first and then returns the updated value, while postfix (x++) returns the current value first and then increments it. The increment happens during expression evaluation rather than after the entire line has executed. I appreciate the clarification and will update the blog accordingly.