What is an Operator?

An operator is a special symbol or keyword that performs an operation on one or more values (operands).

Example:

javascriptCopy
1let result = 10 + 20;

Here:

• 10 and 20 are operands.
• + is the operator.

Types of Operators

JavaScript provides many categories of operators.

textCopy
1JavaScript Operators
2
3│
4├── Arithmetic
5├── Comparison
6├── Logical
7├── Assignment
8├── Bitwise
9├── Spread
10├── Rest
11├── Nullish Coalescing
12├── Optional Chaining
13├── Ternary
14├── Delete
15├── typeof
16├── instanceof
17└── in

Arithmetic Operators

Arithmetic operators perform mathematical calculations.

Example

javascriptCopy
1let a = 10;
2let b = 3;
3
4console.log(a + b);
5console.log(a - b);
6console.log(a * b);
7console.log(a / b);
8console.log(a % b);
9console.log(a ** b);

Output

textCopy
113
27
330
43.333333333
51
61000

Increment and Decrement

javascriptCopy
1let x = 5;
2
3x++;
4
5console.log(x);

Output

textCopy
16

javascriptCopy
1let y = 5;
2
3y--;
4
5console.log(y);

Output

textCopy
14

Comparison Operators

Comparison operators compare two values and always return a Boolean.

Example

javascriptCopy
1console.log(10 > 5);
2console.log(5 == "5");
3console.log(5 === "5");

Output

textCopy
1true
2true
3false

Always prefer strict equality (===) to avoid automatic type conversion.

Logical Operators

Logical operators combine or invert Boolean values.

Example

javascriptCopy
1let age = 22;
2let hasLicense = true;
3
4console.log(age >= 18 && hasLicense);

Output

textCopy
1true

Example

javascriptCopy
1console.log(true || false);
2console.log(!true);

Output

textCopy
1true
2false

Assignment Operators

Assignment operators assign values to variables.

Example

javascriptCopy
1let score = 50;
2
3score += 10;
4score *= 2;
5
6console.log(score);

Output

textCopy
1120

Bitwise Operators

Bitwise operators work directly on binary representations of numbers.

Example

javascriptCopy
1console.log(5 & 3);
2console.log(5 | 3);
3console.log(5 ^ 3);

Output

textCopy
11
27
36

Bitwise operators are commonly used in graphics programming, low-level optimizations, and permissions.

Spread Operator (...)

The spread operator expands arrays, objects, or iterable values.

Array Example

javascriptCopy
1const numbers = [1, 2, 3];
2
3const newNumbers = [...numbers, 4, 5];
4
5console.log(newNumbers);

Output

textCopy
1[1,2,3,4,5]

Object Example

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5const profile = {
6    ...user,
7    age: 23
8};
9
10console.log(profile);

Output

javascriptCopy
1{
2    name: "Ankit",
3    age: 23
4}

Rest Operator (...)

The rest operator collects multiple values into one variable.

javascriptCopy
1function sum(...numbers) {
2    console.log(numbers);
3}
4
5sum(10,20,30,40);

Output

textCopy
1[10,20,30,40]

Object Destructuring

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23,
4    city: "Delhi"
5};
6
7const { name, ...others } = user;
8
9console.log(others);

Nullish Coalescing Operator (??)

Returns the right value only if the left value is null or undefined.

javascriptCopy
1const username = null;
2
3console.log(username ?? "Guest");

Output

textCopy
1Guest

Unlike ||, it does not replace valid values like 0, false, or "".

javascriptCopy
1console.log(0 ?? 100);

Output

textCopy
10

Optional Chaining (?.)

Safely accesses nested properties without causing an error if a property is missing.

javascriptCopy
1const user = {};
2
3console.log(user.profile?.name);

Output

textCopy
1undefined

Without optional chaining:

javascriptCopy
1console.log(user.profile.name);

Output

textCopy
1TypeError

Ternary Operator (? :)

A shorthand for if...else.

Syntax

javascriptCopy
1condition ? value1 : value2;

Example

javascriptCopy
1const age = 20;
2
3const result = age >= 18 ? "Adult" : "Minor";
4
5console.log(result);

Output

textCopy
1Adult

Delete Operator

Removes a property from an object.

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23
4};
5
6delete user.age;
7
8console.log(user);

Output

javascriptCopy
1{
2    name: "Ankit"
3}

Delete also works with array elements, but it leaves an empty slot rather than changing the array length.

typeof Operator

Returns the type of a value.

javascriptCopy
1console.log(typeof 10);
2console.log(typeof "JavaScript");
3console.log(typeof true);
4console.log(typeof {});
5console.log(typeof []);
6console.log(typeof function(){});

Output

textCopy
1number
2string
3boolean
4object
5object
6function

instanceof Operator

Checks whether an object was created by a particular constructor.

javascriptCopy
1const today = new Date();
2
3console.log(today instanceof Date);

Output

textCopy
1true

Example

javascriptCopy
1const arr = [];
2
3console.log(arr instanceof Array);

Output

textCopy
1true

in Operator

Checks whether a property exists in an object.

javascriptCopy
1const user = {
2    name: "Ankit",
3    age: 23
4};
5
6console.log("name" in user);
7console.log("city" in user);

Output

textCopy
1true
2false

It also works with array indexes.

javascriptCopy
1const colors = ["Red", "Blue"];
2
3console.log(0 in colors);
4console.log(5 in colors);

Output

textCopy
1true
2false

Operator Precedence

Operator precedence determines the order in which operations are evaluated.

Example

javascriptCopy
1console.log(2 + 3 * 4);

Output

textCopy
114

Use parentheses to make expressions easier to understand.

javascriptCopy
1console.log((2 + 3) * 4);

Output

textCopy
120

Practical Example

javascriptCopy
1const user = {
2    name: "Ankit",
3    profile: {
4        age: 23
5    }
6};
7
8const age = user.profile?.age ?? "Unknown";
9
10const status = age >= 18 ? "Adult" : "Minor";
11
12console.log(status);

Output

textCopy
1Adult

Best Practices

• Use === and !== instead of == and !=.
• Use const whenever possible and let only when reassignment is needed.
• Use the spread operator to create shallow copies of arrays and objects.
• Use the rest operator for flexible function parameters.
• Use optional chaining (?.) to safely access nested properties.
• Use nullish coalescing (??) instead of || when 0, false, or empty strings are valid values.
• Use typeof for primitive type checks and instanceof for object type checks.
• Keep complex expressions readable by using parentheses.

Mini Project: Student Result Checker

index.html

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Student Result Checker</title>
6</head>
7<body>
8
9<h2>Student Result</h2>
10
11<div id="output"></div>
12
13<script src="script.js"></script>
14
15</body>
16</html>

script.js

javascriptCopy
1const student = {
2    name: "Ankit",
3    marks: 82,
4    profile: {
5        city: "Delhi"
6    }
7};
8
9const result = student.marks >= 40 ? "Pass" : "Fail";
10
11const city = student.profile?.city ?? "Unknown";
12
13const output = document.getElementById("output");
14
15output.innerHTML = `
16    <h3>${student.name}</h3>
17    <p>Marks: ${student.marks}</p>
18    <p>City: ${city}</p>
19    <p>Result: ${result}</p>
20`;

Summary

In this module, you learned:

• How arithmetic operators perform mathematical calculations.
• How comparison operators evaluate values and return Boolean results.
• How logical operators combine or invert conditions.
• How assignment operators simplify variable updates.
• How bitwise operators manipulate binary values.
• The difference between the spread and rest operators.
• How the nullish coalescing operator (??) provides safe default values.
• How optional chaining (?.) prevents runtime errors when accessing nested properties.
• How the ternary operator offers a concise alternative to if...else.
• How to use the delete, typeof, instanceof, and in operators in real-world scenarios.

In the next module, you'll learn Type Conversion in JavaScript, covering implicit and explicit conversion, Number(), String(), Boolean(), parseInt(), parseFloat(), JSON.parse(), JSON.stringify(), and best practices for handling different data types.