JavaScript Operators

Learn JavaScript operators with detailed explanations, syntax, examples, outputs, and real-world practical usage.

JavaScript Operators

Operators are special symbols used to perform operations on values and variables. They are used for calculations, comparisons, assignments, logical operations, and much more.

Almost every JavaScript program uses operators to process data and build dynamic applications.

Why Operators are Important?

  • Perform mathematical calculations
  • Compare values
  • Assign data to variables
  • Create logical conditions
  • Build dynamic applications

Types of JavaScript Operators

JavaScript provides multiple categories of operators.

  • Arithmetic Operators
  • Assignment Operators
  • Comparison Operators
  • Logical Operators
  • Increment and Decrement Operators
  • String Operators
  • Ternary Operator
  • Type Operators

Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations. 

let a = 10;

let b = 5;

console.log(a + b);

console.log(a - b);

console.log(a * b);

console.log(a / b);

console.log(a % b);

Output

15

5

50

2

0

Explanation

  • + → Addition
  • - → Subtraction
  • * → Multiplication
  • / → Division
  • % → Modulus (Remainder)

Exponent Operator

The exponent operator calculates powers. 

let result = 2 ** 3;

console.log(result);

Output

8

Explanation

  • 2 ** 3 means 2 raised to the power 3.
  • The result becomes 8.

Assignment Operators

Assignment operators assign values to variables. 

let x = 10;

x += 5;

console.log(x);

x -= 2;

console.log(x);

x *= 3;

console.log(x);

Output

15

13

39

Detailed Explanation

  • x += 5 means x = x + 5.
  • Initial value is 10, after addition it becomes 15.
  • x -= 2 means x = x - 2.
  • 15 - 2 becomes 13.
  • x *= 3 means x = x * 3.
  • 13 × 3 becomes 39.

Comparison Operators

Comparison operators compare values and return true or false. 

let a = 10;

let b = 20;

console.log(a > b);

console.log(a < b);

console.log(a == b);

console.log(a != b);

Output

false

true

false

true

Explanation

  • > → Greater than
  • < → Less than
  • == → Equal to
  • != → Not equal to

Strict Equality Operators

Strict equality checks both value and datatype. 

console.log(10 === "10");

console.log(10 !== "10");

Output

false

true

Explanation

  • === checks value and datatype.
  • 10 is a number while "10" is a string.
  • Therefore the result becomes false.

Logical Operators

Logical operators combine multiple conditions. 

let age = 20;

console.log(age > 18 && age < 30);

console.log(age > 25 || age < 30);

console.log(!(age > 18));

Output

true

true

false

Explanation

  • && → AND operator
  • || → OR operator
  • ! → NOT operator
  • AND returns true only if both conditions are true.
  • OR returns true if at least one condition is true.
  • NOT reverses the result.

Increment and Decrement Operators

These operators increase or decrease values by 1. 

let count = 5;

count++;

console.log(count);

count--;

console.log(count);

Output

6

5

Explanation

  • ++ increases value by 1.
  • -- decreases value by 1.

String Operators

The + operator joins strings together. 

let firstName = "Ali";

let lastName = "Khan";

let fullName = firstName + " " + lastName;

console.log(fullName);

Output

Ali Khan

Explanation

  • The + operator combines strings.
  • This process is called string concatenation.

Ternary Operator

The ternary operator is a short form of if-else. 

let age = 18;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Output

Adult

Explanation

  • If the condition is true, "Adult" is returned.
  • Otherwise "Minor" is returned.

Type Operator

The typeof operator checks the datatype of a value. 

let name = "Rahul";

console.log(typeof name);

console.log(typeof 100);

console.log(typeof true);

Output

string

number

boolean

Complete Real Life Example

The following example shows a simple online shopping bill calculator using JavaScript operators. 

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript Operators Example</title>

</head>

<body>

<h2>Online Shopping Bill</h2>

<p id="output"></p>

<script>

let productPrice = 1000;

let discount = 200;

let finalPrice = productPrice - discount;

let stock = 5;

stock--;

let isAvailable = stock > 0;

document.getElementById("output").innerHTML =

"Original Price: ₹" + productPrice + "<br>" +

"Discount: ₹" + discount + "<br>" +

"Final Price: ₹" + finalPrice + "<br>" +

"Remaining Stock: " + stock + "<br>" +

"Product Available: " + isAvailable;

</script>

</body>

</html>

Output

Online Shopping Bill

Original Price: ₹1000

Discount: ₹200

Final Price: ₹800

Remaining Stock: 4

Product Available: true

Detailed Explanation of Example

  • productPrice stores the original product price.
  • discount stores the discount amount.
  • finalPrice uses subtraction operator to calculate final bill.
  • stock-- decreases stock quantity by 1.
  • stock > 0 checks product availability.
  • isAvailable stores true or false value.
  • innerHTML displays results on the webpage.
  • The + operator joins text and variable values.

Operator Precedence

Operator precedence decides which operation executes first. 

let result = 10 + 5 * 2;

console.log(result);

Output

20

Explanation

  • Multiplication executes before addition.
  • 5 × 2 becomes 10.
  • Then 10 + 10 becomes 20.

Best Practices

  • Use strict equality (===) whenever possible.
  • Write readable expressions.
  • Use parentheses for clarity.
  • Avoid overly complex conditions.
  • Use meaningful variable names.

Important Notes

  • Operators perform actions on values and variables.
  • Comparison operators return boolean values.
  • Logical operators combine conditions.
  • Arithmetic operators handle calculations.
  • Operator precedence affects execution order.

Summary

  • Operators are symbols used for operations.
  • Arithmetic operators perform calculations.
  • Assignment operators update variable values.
  • Comparison operators compare values.
  • Logical operators combine conditions.
  • String operators combine text values.
  • Ternary operator is a shortcut for if-else.
  • typeof checks the datatype of values.
← Previous Next →