JavaScript Operators: Arithmetic and Assignment Operators Explained

JavaScript operators let you calculate values, update variables, compare data, and perform other actions in your code.

A shopping website can use operators to calculate a cart total. A form can use them to update a progress value. A counter can use them to increase or decrease a number.

In this lesson, you will focus on the operators beginners use most: arithmetic operators, assignment operators, increment and decrement, and operator precedence.

Course Home: JavaScript Tutorial for Beginners
Previous Lesson: JavaScript Data Types: Primitive and Object Types Explained
Next Lesson: JavaScript Comparison Operators Explained

Quick Answer

JavaScript operators perform actions on values.

For example:

const price = 500;
const quantity = 3;

const total = price * quantity;

console.log(total);

Output:

1500

Here:

• = assigns values.
• * multiplies values.
• price and quantity are the values used by the operator.

Common JavaScript operators include:

+   -   *   /   %   **

=   +=  -=  *=  /=  %=  **=

++  --

You will learn comparison operators such as ===, >, and < in the next lesson.

What Is an Operator in JavaScript?

An operator is a symbol that tells JavaScript to perform an action.

Look at:

const total = 10 + 5;

The + symbol is an operator.

The values:

10
5

are called operands.

JavaScript performs the addition and stores the result in total.

console.log(total);

Output:

15

What Is a JavaScript Expression?

An expression is code that produces a value.

For example:

10 + 5

produces:

15

Another example:

price * quantity

produces a value based on the values stored in those variables.

Expressions appear everywhere in JavaScript.

You will use them inside:

• Variable assignments
• Calculations
• Conditions
• Functions
• Loops
• Form handling
• DOM updates

If variables are still unclear, review the JavaScript Variables tutorial before continuing.

Main Types of Operators Beginners Should Know

JavaScript has many operator categories.

For this lesson, focus on:

• Arithmetic operators
• Assignment operators
• Increment and decrement operators
• String addition with +
• Grouping with parentheses
• Operator precedence

Comparison and logical operators have separate lessons because they are especially important for conditions.

JavaScript Arithmetic Operators

Arithmetic operators perform mathematical calculations.

These operators are useful for prices, quantities, percentages, measurements, counters, and many other calculations.

Addition Operator +

The addition operator adds numbers.

const price = 500;
const shipping = 100;

const total = price + shipping;

console.log(total);

Output:

600

Real Website Example

A checkout page may calculate:

const productTotal = 1200;
const shippingCost = 100;

const finalTotal = productTotal + shippingCost;

console.log(finalTotal);

Output:

1300

The + Operator Can Also Join Strings

The + operator behaves differently when strings are involved.

const firstName = "Riya";
const lastName = "Sharma";

const fullName = firstName + " " + lastName;

console.log(fullName);

Output:

Riya Sharma

This is called string concatenation.

For longer text, template literals are often easier to read:

const firstName = "Riya";
const lastName = "Sharma";

const fullName = `${firstName} ${lastName}`;

If you need a refresher on strings and numbers, see the JavaScript Data Types tutorial.

Be Careful When Adding Strings and Numbers

Consider:

console.log(10 + 5);

Output:

15

Now:

console.log("10" + 5);

Output:

105

Why?

"10" is a string.

When a string is involved with +, JavaScript can join the values as text instead of performing normal addition.

This is why knowing your JavaScript data types is important.

Subtraction Operator -

The subtraction operator subtracts one number from another.

const price = 1000;
const discount = 200;

const finalPrice = price - discount;

console.log(finalPrice);

Output:

800

A store can use subtraction to apply a fixed discount.

Multiplication Operator *

The multiplication operator multiplies values.

const price = 500;
const quantity = 3;

const total = price * quantity;

console.log(total);

Output:

1500

This is one of the most common calculations on shopping and pricing pages.

Division Operator /

The division operator divides one number by another.

const total = 1200;
const people = 4;

const amountPerPerson = total / people;

console.log(amountPerPerson);

Output:

300

Division Can Produce Decimal Values

console.log(10 / 4);

Output:

2.5

JavaScript uses the number type for ordinary whole and decimal numbers.

What Happens When You Divide by Zero?

JavaScript does not throw a normal arithmetic error for:

console.log(10 / 0);

Output:

Infinity

And:

console.log(-10 / 0);

Output:

-Infinity

This can matter when values come from forms or calculations.

Check user input before using it as a divisor when zero would not make sense.

Remainder Operator %

The % operator returns the remainder after division.

For example:

console.log(10 % 3);

Output:

1

Three fits into ten three times, leaving a remainder of one.

Checking Even and Odd Numbers

The remainder operator is useful for checking whether a number is even.

const number = 8;

console.log(number % 2);

Output:

0

If a whole number divided by 2 has no remainder, it is even.

For example:

const number = 7;

console.log(number % 2);

Output:

1

This type of check becomes useful when you learn conditions.

% Does Not Mean Percentage

Beginners sometimes assume:

%

means percentage.

In JavaScript arithmetic, % is the remainder operator.

To calculate 20% of 500, use:

const price = 500;
const discountRate = 20;

const discount = price * discountRate / 100;

console.log(discount);

Output:

100

Exponentiation Operator **

The exponentiation operator raises one number to the power of another.

console.log(2 ** 3);

Output:

8

This means:

2 × 2 × 2

Another example:

console.log(5 ** 2);

Output:

25

You may not use exponentiation every day in basic websites, but it is part of JavaScript arithmetic.

Unary Plus and Unary Minus

The + and - symbols can also work with one value.

Unary minus changes the sign of a number:

const priceChange = 100;

console.log(-priceChange);

Output:

-100

Unary plus can try to convert a value to a number:

const quantity = "5";

console.log(+quantity);

Output:

5

For beginner code, clearer conversion methods such as Number() are often easier to understand.

You will learn those in the JavaScript Type Conversion lesson.

JavaScript Assignment Operator =

The assignment operator stores a value in a variable.

let score = 10;

Here:

=

assigns 10 to score.

You can later assign another value:

score = 20;

Now:

console.log(score);

Output:

20

Do not confuse assignment = with comparison operators such as ===.

You will study that difference in the JavaScript Comparison Operators lesson.

JavaScript Assignment Operators

JavaScript provides shortcuts for updating an existing value.

These operators make repeated updates shorter.

Addition Assignment +=

Start with:

let score = 10;

You could write:

score = score + 5;

Or use:

score += 5;

Then:

console.log(score);

Output:

15

Both approaches produce the same result here.

Subtraction Assignment -=

let stock = 10;

stock -= 2;

console.log(stock);

Output:

8

A store could use this after two products are sold.

Multiplication Assignment *=

let value = 5;

value *= 3;

console.log(value);

Output:

15

Division Assignment /=

let total = 100;

total /= 4;

console.log(total);

Output:

25

Remainder Assignment %=

let value = 10;

value %= 3;

console.log(value);

Output:

1

Exponentiation Assignment **=

let value = 4;

value **= 2;

console.log(value);

Output:

16

JavaScript Increment Operator ++

The increment operator increases a variable by one.

let quantity = 1;

quantity++;

console.log(quantity);

Output:

2

This is similar to:

quantity = quantity + 1;

or:

quantity += 1;

Real Website Example

A button counter may begin with:

let clicks = 0;

Each click can increase it:

clicks++;

After three increases:

clicks++;
clicks++;
clicks++;

the value becomes:

3

JavaScript Decrement Operator --

The decrement operator reduces a variable by one.

let quantity = 5;

quantity--;

console.log(quantity);

Output:

4

This is similar to:

quantity = quantity - 1;

or:

quantity -= 1;

Prefix vs Postfix Increment

You may see both:

++count;

and:

count++;

Both increase count by one.

The difference matters when the expression’s returned value is used immediately.

Postfix

let count = 5;

const oldValue = count++;

console.log(oldValue);
console.log(count);

Output:

5
6

count++ returns the old value first, then increments count.

Prefix

let count = 5;

const newValue = ++count;

console.log(newValue);
console.log(count);

Output:

6
6

++count increments first, then returns the new value.

For simple counters, you usually do not need to depend on this difference.

Writing:

count++;

on its own is easy to understand.

You Cannot Increment a const Variable

This does not work:

const quantity = 1;

quantity++;

Incrementing changes the variable, so use let:

let quantity = 1;

quantity++;

This connects directly with what you learned in the JavaScript Variables lesson.

What Is Operator Precedence?

Operator precedence controls which operations are grouped first in an expression.

Consider:

const result = 2 + 3 * 4;

console.log(result);

Output:

14

JavaScript evaluates multiplication before addition:

3 × 4 = 12

2 + 12 = 14

It does not simply calculate every operator from left to right.

Use Parentheses to Control the Calculation

If you want addition first:

const result = (2 + 3) * 4;

console.log(result);

Output:

20

The parentheses change the grouping:

2 + 3 = 5

5 × 4 = 20

For beginner code, parentheses are often the clearest way to show the order you intend.

Common Arithmetic Precedence

A useful beginner order is:

1. Parentheses ()
2. Exponentiation **
3. Multiplication *, division /, remainder %
4. Addition +, subtraction -

For example:

const result = 10 + 2 * 3;

Output:

16

But:

const result = (10 + 2) * 3;

Output:

36

When a calculation looks difficult to read, use parentheses even if JavaScript would calculate it correctly without them.

Real-World Example: Shopping Cart Total

Suppose a customer buys three items.

Each item costs ₹500.

Shipping costs ₹100.

const price = 500;
const quantity = 3;
const shipping = 100;

const total = price * quantity + shipping;

console.log(total);

Output:

1600

JavaScript performs:

500 × 3 = 1500
1500 + 100 = 1600

You can make the intention even clearer:

const productTotal = price * quantity;
const total = productTotal + shipping;

Breaking long calculations into named steps often makes code easier to maintain.

Real-World Example: Percentage Discount

Suppose a product costs ₹2,000 and has a 10% discount.

const price = 2000;
const discountPercent = 10;

const discountAmount = price * discountPercent / 100;
const finalPrice = price - discountAmount;

console.log(finalPrice);

Output:

1800

This calculation uses:

• Multiplication
• Division
• Subtraction

Notice that % is not used to calculate the percentage.

Real-World Example: Cart Quantity

A simple cart might start with:

let quantity = 1;

When the customer clicks Add:

quantity++;

When the customer clicks Remove:

quantity--;

You can then calculate:

const price = 750;
const total = price * quantity;

This is a practical example of variables and operators working together.

Real-World Example: Progress Percentage

Suppose a user completed 6 of 10 tasks.

const completed = 6;
const totalTasks = 10;

const progress = completed / totalTasks * 100;

console.log(progress);

Output:

60

The progress is 60%.

You could display:

console.log(`${progress}% complete`);

Output:

60% complete

Operators You Will Learn in Later Lessons

JavaScript has more operators than the arithmetic and assignment operators covered here.

Important later topics include:

Comparison Operators

Examples:

===
!==
>
<
>=
<=

They compare values and produce true or false.

Learn them next in the JavaScript Comparison Operators tutorial.

Logical Operators

Examples:

&&
||
!

They help combine or reverse conditions.

You will study them in the JavaScript Logical Operators tutorial.

Conditional Operator

The ternary operator uses:

? :

It provides a short conditional expression.

You will learn it after you understand JavaScript conditions.

Other Operators

JavaScript also includes bitwise, relational, nullish coalescing, optional chaining, and other operators.

You do not need to learn all of them at once.

Build a strong foundation with the common operators first.

Common Beginner Mistakes

Confusing = With ===

This:

let score = 10;

assigns a value.

This:

score === 10;

compares values.

They have different jobs.

You will learn comparison operators in the next tutorial.

Expecting "10" + 5 to Equal 15

console.log("10" + 5);

Output:

105

The first value is a string.

Use the correct data type when doing calculations.

Thinking % Calculates a Percentage

This:

10 % 3

returns a remainder.

It does not mean 10 percent of 3.

Ignoring Operator Precedence

const result = 2 + 3 * 4;

does not produce 20.

It produces:

14

Use parentheses when the intended order is not obvious.

Trying to Update a const

Wrong:

const score = 10;

score += 5;

If the value must change:

let score = 10;

score += 5;

Using Increment Inside Complicated Expressions

Code such as:

const result = count++ + ++count;

is difficult to read.

Even if you understand the rules, simpler code is easier to maintain.

Prefer separate steps.

Forgetting That Division Can Return a Decimal

console.log(5 / 2);

Output:

2.5

Do not assume division always returns a whole number.

Best Practices for JavaScript Operators

Use clear variable names around calculations.

Prefer:

const finalPrice = price - discount;

instead of:

const x = a - b;

Use parentheses when they improve clarity.

Break long calculations into smaller steps:

const productTotal = price * quantity;
const finalTotal = productTotal + shipping;

Check whether a value is a number before important calculations when data comes from forms or APIs.

Use let only when an operator needs to update the variable.

Avoid clever expressions that save one line but make the code harder to understand.

Beginner Exercise

Create:

const price = 800;
const quantity = 3;
const shipping = 100;

Calculate:

1. Product total
2. Final total after shipping

Your result should be:

2500

Then create:

let stock = 10;

Reduce it by three using:

-=

Print the new stock value.

Challenge Exercise

Create:

const price = 1500;
const quantity = 4;
const discountPercent = 10;
const shipping = 200;

Calculate:

1. Product total
2. Discount amount
3. Price after discount
4. Final total after shipping

Try to solve the calculation using clear variable names.

Extra Challenge

Create:

let quantity = 1;

Increase it three times using the increment operator.

Then decrease it once using the decrement operator.

Print the final quantity.

Before running the code, predict the result.

Frequently Asked Questions

What are operators in JavaScript?

JavaScript operators are symbols or keywords that perform actions on values. They can calculate numbers, assign values, compare values, update variables, and perform other operations.

What are arithmetic operators in JavaScript?

The main arithmetic operators are +, -, *, /, %, and **.

What does % mean in JavaScript?

% is the remainder operator. It returns the remainder after division.

For example:

10 % 3

returns:

1

What does ** mean in JavaScript?

** is the exponentiation operator.

2 ** 3

returns:

8

What does += mean in JavaScript?

+= adds a value and assigns the result back to the variable.

let score = 10;

score += 5;

The new value of score is 15.

What is the difference between = and ===?

= assigns a value.

=== compares two values and their types.

Comparison operators are covered in the next lesson.

What does ++ do in JavaScript?

++ increases a variable by one.

let count = 1;

count++;

count becomes 2.

What does -- do in JavaScript?

-- decreases a variable by one.

let count = 5;

count--;

count becomes 4.

What is operator precedence?

Operator precedence determines how operators are grouped when an expression contains several operators.

Multiplication normally has higher precedence than addition:

2 + 3 * 4

returns 14.

Parentheses can change the grouping:

(2 + 3) * 4

returns 20.

Should I memorize all JavaScript operator precedence rules?

No. Beginners should understand the common arithmetic order and use parentheses when an expression could be unclear.

Can JavaScript operators work with strings?

Yes. The + operator can join strings.

"Hello " + "Riya"

returns:

Hello Riya

What should I learn after JavaScript operators?

Learn JavaScript comparison operators next. They let you compare values using operators such as ===, !==, >, <, >=, and <=.

Summary

JavaScript operators perform actions on values.

The main arithmetic operators are:

+  -  *  /  %  **

Common assignment operators include:

=  +=  -=  *=  /=  %=  **=

You also learned:

++
--

for increasing and decreasing variables.

Operator precedence controls how calculations are grouped.

For example:

2 + 3 * 4

returns:

14

while:

(2 + 3) * 4

returns:

20

You also learned how operators work in practical examples such as:

• Shopping cart totals
• Discounts
• Quantity counters
• Stock updates
• Progress percentages

These operators give you the foundation needed to start making decisions in JavaScript.

Continue Learning JavaScript

Previous Lesson: JavaScript Data Types: Primitive and Object Types Explained

Course Home: JavaScript Tutorial for Beginners

Next Lesson: JavaScript Comparison Operators Explained

In the next lesson, you will learn arithmetic, assignment, increment, decrement and other JavaScript operators with practical website examples.