JavaScript Operators

JavaScript operators are used to perform operations on variables and values. Operators are used to assign values, compare values, perform arithmetic operations, and more. In this tutorial, you will learn about the different types of JavaScript operators and how to use them in your code.

Why should you use it?

  • JavaScript operators allow you to perform operations on variables and values.
  • JavaScript operators can be used to compare values, assign values, and perform arithmetic operations.
  • JavaScript operators are essential for writing efficient and effective code.

Arithmetic Operators

Arithmetic operators are symbols that represent mathematical operations. They are used to perform calculations on numbers. In JavaScript, the arithmetic operators are used to perform mathematical operations on numbers.

Arithmetic operators are the most common and basic mathematical operators used in JavaScript. The following table lists all the arithmetic operators in JavaScript.

OperatorDescriptionExample
+Addition2 + 3 = 5
-Subtraction5 - 2 = 3
*Multiplication2 * 3 = 6
/Division6 / 2 = 3
%Modulus5 % 2 = 1
++Incrementx++
--Decrementx--

The addition operator (+) adds two numbers together and returns the result. The subtraction operator (-) subtracts one number from another and returns the result. The multiplication operator (*) multiplies two numbers together and returns the result. The division operator (/) divides one number by another and returns the result. The modulus operator (%) returns the remainder of a division operation. The increment operator (++) increments a number by one. The decrement operator (--) decrements a number by one.

Let's look at some examples of using the arithmetic operators in JavaScript.

index.js
let x = 2;
let y = 3;

let result = x + y;

console.log(result); // 5

In the example above, we have used the addition operator (+) to add two numbers together. The result is 5.

index.js
let x = 5;
let y = 2;

let result = x - y;

console.log(result); // 3

In the example above, we have used the subtraction operator (-) to subtract one number from another. The result is 3.

index.js
let x = 2;
let y = 3;

let result = x * y;

console.log(result); // 6

In the example above, we have used the multiplication operator (*) to multiply two numbers together. The result is 6.

index.js
let x = 6;
let y = 2;

let result = x / y;

console.log(result); // 3

In the example above, we have used the division operator (/) to divide one number by another. The result is 3.

index.js
let x = 5;
let y = 2;

let result = x % y;

console.log(result); // 1

In the example above, we have used the modulus operator (%) to return the remainder of a division operation. The result is 1.

index.js
let x = 2;

x++;

console.log(x); // 3

In the example above, we have used the increment operator (++) to increment a number by one. The result is 3.

index.js
let x = 2;

x--;

console.log(x); // 1

In the example above, we have used the decrement operator (--) to decrement a number by one. The result is 1.

Comparison Operators

Comparison operators are used to compare two values and return a boolean value (true or false). They are commonly used in conditional statements (if statements) and loops.

In JavaScript, there are six comparison operators. They are:

  • Greater than (>)
  • Less than (<)
  • Greater than or equal to (>=)
  • Less than or equal to (<=)
  • Equal to (==)
  • Not equal to (!=)

The following table shows an example of how each comparison operator works.

OperatorExampleResult
>2 > 1true
<1 < 2true
>=2 >= 2true
<=2 <= 2true
==2 == 2true
!=2 != 1true

The following code block demonstrates how comparison operators can be used in a conditional statement.

index.js
let a = 2;
if (a > 1) {
  console.log('a is greater than 1');
} else {
  console.log('a is not greater than 1');
}

In this example, the variable a is assigned the value 2. The if statement checks whether a is greater than 1. If it is, the statement console.log('a is greater than 1') is executed. Otherwise, the statement console.log('a is not greater than 1') is executed.

Logical Operators

Logical operators are used to perform logical operations on the given values. They are mainly used to create complex conditions for if-else statements and loops. The logical operators are: && (AND), || (OR), ! (NOT).

AND (&&)

The logical AND operator (&&) is used to evaluate two expressions and returns true if both expressions are true.
index.js
let x = 10;
let y = 20;

if (x === 10 && y === 20) {
  console.log('x is 10 and y is 20');
}

OR (||)

The logical OR operator (||) is used to evaluate two expressions and returns true if one of the two expressions is true.
index.js
let x = 10;
let y = 20;

if (x === 10 || y === 10) {
  console.log('x is 10 or y is 10');
}

NOT (!)

The logical NOT operator (!) is used to reverse the logical state of its operand. If a condition is true, then Logical NOT operator will make it false.
index.js
let x = 10;

if (!(x === 10)) {
  console.log('x is not 10');
}

Comparison Table

OperatorNameDescription
&&ANDReturns true if both expressions are true.
||ORReturns true if one of the two expressions is true.
!NOTReverses the logical state of its operand.

Assignment Operators

Assignment operators are used to assign values to JavaScript variables. The basic assignment operator is equal (=), which assigns the value of its right operand to its left operand. That is, x = y assigns the value of y to x. For example:
index.js
let x = 10;
let y = 20;

x = y;

console.log(x);
The other assignment operators are usually shorthand for standard operations, as shown in the following table.
OperatorExampleSame as
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y
For example, the following code assigns the value of x + y to x:
index.js
let x = 10;
let y = 20;

x += y;

console.log(x);

Bitwise Operators

Bitwise operators are used to perform bit-level operations on a number. These operators are not commonly used, but can be useful in certain situations. The bitwise operators are: & (bitwise AND), | (bitwise OR), ~ (bitwise NOT), ^ (bitwise XOR), << (left shift), >> (right shift). Bitwise operators work on the individual bits of a number. For example, let's say we have two numbers, 4 (0100 in binary) and 5 (0101 in binary). If we apply the bitwise AND operator, &, to these two numbers, we get 4 (0100 in binary). This is because the bitwise AND operator only returns 1 if both bits in the comparison are 1.
index.js
let a = 4; // 0100
let b = 5; // 0101

let c = a & b; // 0100

console.log(c); // 4
index.js
let a = 4; // 0100
let b = 5; // 0101

let c = a | b; // 0101

console.log(c); // 5

Conditional (Ternary) Operator

A conditional (ternary) operator is a shorthand way of writing a simple if-else statement. It is a single line of code that takes three operands. The syntax of the ternary operator is as follows: condition ? result1 : result2 The condition is evaluated, and if it is true, the expression returns result1; otherwise, it returns result2. Here is an example of how to use the ternary operator:
index.js
let age = 18;
let canDrink = age >= 21 ? 'Yes' : 'No';

console.log(canDrink);
index.js
let age = 18;
let canDrink = age >= 21 ? true : false;

console.log(canDrink);
As you can see, the ternary operator is a great way to write concise code. It can also be used to assign variables, as shown in the example above. However, it is important to note that the ternary operator should not be used for complex logic. It is best used for simple if-else statements.

Coelscing Operator

The Coelscing operator is an operator that is used to assign a value to a variable. It is a shorthand for the ternary operator and is used to check if a value is true or false and then assign a value to a variable. It is a useful tool for writing concise and readable code.

The Coelscing operator is written as two question marks (??) and is used to check if a value is true or false. If the value is true, the operator will assign the value to the variable. If the value is false, the operator will assign the second value to the variable.
index.js
let a = true;
let b = false;

let c = a ?? b;
console.log(c); // true

let d = b ?? a;
console.log(d); // true