So far, we've learned how to create variables and store different types of data inside them.

But here's an important question.

Suppose you have two numbers.

let a = 10;
let b = 3;

How do you add them?

Or compare them?

Or check if both conditions are true?

Or assign a new value to a variable?

That's exactly where Operators come in.

As the infographic says,

Operators perform actions on values and variables.

Think of operators as tools in a toolbox. Just like a mechanic picks different tools for different jobs, JavaScript uses different operators to perform different kinds of tasks.

Some operators perform calculations, some compare values, some combine conditions, while others help write shorter and cleaner code.

Let's explore them one by one.

What is an Operator?

An Operator is simply a special symbol that tells JavaScript to perform an operation.

For example,

10 + 5

The + symbol tells JavaScript,

"Add these two numbers."

Similarly,

10 > 5

The > symbol means,

"Check whether the left value is greater than the right value."

Every operator has its own job.

Arithmetic Operators

The infographic first introduces Arithmetic Operators.

These are used for mathematical calculations.

It uses the following example.

let a = 10;
let b = 3;

Let's see how each arithmetic operator works.

Addition (+)

a + b

Output

13

Because

10 + 3 = 13

Addition is used whenever you want to combine numbers.

Subtraction (-)

a - b

Output

7

Because

10 - 3 = 7

Multiplication (*)

a * b

Output

30

Because

10 × 3 = 30

Division (/)

a / b

Output

3.3333333333333335

The infographic rounds it to 3.33 for simplicity.

Division returns the quotient.

Modulus (%)

a % b

Output

1

Many beginners think % means percentage.

It doesn't.

It returns the remainder after division.

Since

10 ÷ 3 = 3 remainder 1

the output becomes

1

The modulus operator is commonly used to check whether a number is even or odd.

Example:

10 % 2

returns

0

because 10 is evenly divisible by 2.

Exponent (**)

The infographic also includes

a ** b

Output

1000

Because

10³ = 1000

The ** operator means

Raise the left value to the power of the right value.

Example

2 ** 4

returns

16

Assignment Operators

The next section of the infographic explains Assignment Operators.

Their job is to store or update values inside variables.

Let's use the same example from the infographic.

let score = 10;

Initially,

score = 10

Assignment (=)

score = 10;

The = operator simply assigns a value.

Think of it as putting something inside a storage box.

Addition Assignment (+=)

The infographic shows

score += 5;

This is a shortcut for

score = score + 5;

Initially,

10

After adding 5,

15

Subtraction Assignment (-=)

score -= 2;

Equivalent to

score = score - 2;

Now,

15 - 2 = 13

Multiplication Assignment (*=)

score *= 3;

Equivalent to

score = score * 3;

Output

39

These shorthand operators make your code cleaner and easier to read.

Similarly, JavaScript also provides

/=
%=
**=

for division, modulus, and exponent assignment.

Comparison Operators

Very often, we don't just want to calculate values.

Sometimes we want to compare them.

That's where Comparison Operators are used.

Their result is always either

true

or

false

The infographic highlights two very important operators.

Loose Equality (==)

Example

10 == "10"

Output

true

Why?

Because == compares only the value.

Before comparing, JavaScript automatically converts "10" into the number 10.

Both become equal.

Strict Equality (===)

The infographic also shows

10 === "10"

Output

false

This surprises many beginners.

The values look identical.

But here's the difference.

=== checks

• Value

• Data Type

The number

10

and the string

"10"

have different data types.

So JavaScript returns

false

In modern JavaScript,

it's generally recommended to use === instead of == because it's safer and avoids unexpected type conversion.

Other Comparison Operators

Besides == and ===, JavaScript also provides

>
<
>=
<=
!=
!==

Examples

10 > 5

returns

true

5 <= 2

returns

false

Logical Operators

The infographic now introduces Logical Operators.

These are used when working with multiple conditions.

Imagine a website login system.

A user can enter only if

• Age is above 18

• They have a valid ID

Both conditions must be true.

The infographic uses this example.

age > 18 && hasID

Let's understand each logical operator.

AND (&&)

The infographic explains that both conditions must be true.

Example

age > 18 && hasID

If

age = 20
hasID = true

Result

true

If either one becomes false,

the entire result becomes false.

Think of opening a locker that requires two keys.

Both keys are needed.

OR (||)

The OR operator is more flexible.

Only one condition needs to be true.

Example

hasPassport || hasDrivingLicense

Even if one is false,

the result becomes true if the other one is true.

Think of entering a building where you can show either your passport or your driving license.

Any one works.

NOT (!)

The NOT operator reverses a Boolean value.

Example

let isLoggedIn = true;

!isLoggedIn

Output

false

It simply flips

true → false

false → true

Bitwise Operators

The infographic also introduces Bitwise Operators.

These operators work directly with binary numbers (0s and 1s).

The infographic uses

5 & 3

Binary form:

5 = 101
3 = 011

Applying the & operator:

101
011
---
001

Output

1

Bitwise operators are mostly used in low-level programming, graphics, networking, encryption, and performance optimizations.

As a beginner, you don't need to master them immediately, but it's good to know they exist.

JavaScript also provides

&
|
^
~
<<
>>
>>>

Ternary Operator

Sometimes writing a complete if...else statement feels unnecessary.

The infographic introduces the Ternary Operator, which is simply a shorter version of if...else.

Example:

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

Let's understand it.

First,

JavaScript checks

age >= 18

If it's true,

the result becomes

"Adult"

Otherwise,

it returns

"Minor"

The syntax is

condition ? valueIfTrue : valueIfFalse;

This operator is widely used in React and modern JavaScript projects.

Optional Chaining (?.)

One of the most useful modern JavaScript operators is Optional Chaining.

The infographic uses this example.

user?.profile?.city

Imagine this object.

let user = {
    profile: {
        city: "Delhi"
    }
};

Now,

user?.profile?.city

returns

"Delhi"

Everything works perfectly.

But suppose profile doesn't exist.

Without optional chaining,

user.profile.city

would throw an error.

With optional chaining,

user?.profile?.city

simply returns

undefined

instead of crashing the program.

This makes your code much safer when working with nested objects or API responses where some data might be missing.

Nullish Coalescing (??)

Although the infographic mainly focuses on Optional Chaining, you'll often see it used together with another modern operator called Nullish Coalescing (??).

Its purpose is simple:

Provide a default value only when the left side is null or undefined.

Example:

let username = null;

console.log(username ?? "Guest");

Output

Guest

Since username is null, JavaScript uses the default value "Guest".

Now look at this:

let username = "Alex";

console.log(username ?? "Guest");

Output:

Alex

Because the variable already contains a valid value, the default isn't used.

A common real-world example is displaying a user's profile name. If the name hasn't been loaded yet, you can safely show "Guest" instead of displaying null or undefined.

You'll often see Optional Chaining and Nullish Coalescing used together:

console.log(user?.profile?.city ?? "City Not Available");

If city exists, it will be printed. Otherwise, JavaScript displays the default message "City Not Available".

How Operators Work

The infographic ends with a simple flow showing what happens whenever an operator is used.

Values
   ↓
Operator
   ↓
Calculation / Decision
   ↓
Result

Let's take a simple example.

10 + 5

• The values are 10 and 5.

• The operator is +.

• JavaScript performs the calculation.

• The final result is 15.

The same process applies to comparison, logical, assignment, and every other operator.

Quick Revision