Arithmetic operators in Javascript - Step-by-Step Execution

Concept Flow - Arithmetic operators

Start

↓

Evaluate operands

↓

Apply operator (+, -, *, /, %)

↓

Calculate result

↓

Return or store result

↓

End

This flow shows how arithmetic operators take values, perform calculations, and produce a result.

Execution Sample

Javascript

let a = 10;
let b = 3;
let sum = a + b;
let diff = a - b;
let prod = a * b;
let div = a / b;

This code calculates sum, difference, product, and division of two numbers.

Execution Table

Step	Expression	Operands	Operation	Result
1	a = 10	-	-	a = 10
2	b = 3	-	-	b = 3
3	sum = a + b	10, 3	Addition	13
4	diff = a - b	10, 3	Subtraction	7
5	prod = a * b	10, 3	Multiplication	30
6	div = a / b	10, 3	Division	3.3333333333333335

💡 All arithmetic operations completed with given operands.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6
a	undefined	10	10	10	10	10	10
b	undefined	undefined	3	3	3	3	3
sum	undefined	undefined	undefined	13	13	13	13
diff	undefined	undefined	undefined	undefined	7	7	7
prod	undefined	undefined	undefined	undefined	undefined	30	30
div	undefined	undefined	undefined	undefined	undefined	undefined	3.3333333333333335

Key Moments - 3 Insights

Why does division result in a decimal number instead of an integer?

In step 6, division of 10 by 3 results in 3.3333 because JavaScript division returns a floating-point number, not just integers.

Why are variables 'sum', 'diff', 'prod', and 'div' undefined before their assignment steps?

Before their assignment steps (3 to 6), these variables have no value, so they show as undefined in the variable tracker until assigned.

What happens if you try to add a number and a string using '+' operator?

The '+' operator concatenates if one operand is a string, so it joins them as text instead of adding numerically (not shown in this table).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'prod' after step 5?

A 7

B 30

C 13

D 3.3333

💡 Hint

Check the 'Result' column at step 5 in the execution_table.

At which step does the variable 'diff' get its value assigned?

A Step 5

B Step 3

C Step 4

D Step 6

💡 Hint

Look at the 'Expression' column for 'diff' assignment in the execution_table.

If 'b' was 5 instead of 3, what would be the result of 'sum' at step 3?

A 15

B 8

C 13

D 10

💡 Hint

Sum is a + b; changing b to 5 means sum = 10 + 5.

Concept Snapshot

Arithmetic operators perform math on numbers:
+ adds,
- subtracts,
* multiplies,
/ divides,
% gives remainder.
They return a new value without changing original variables.

Full Transcript

This visual execution shows how JavaScript arithmetic operators work step-by-step. Variables a and b are assigned 10 and 3. Then sum, diff, prod, and div are calculated using +, -, *, and / operators respectively. Each step shows operands, operation, and result. Variables update only when assigned. Division produces a decimal number. This helps beginners see how each operator changes values in order.

Practice

1. Which arithmetic operator in JavaScript is used to find the remainder of a division?

easy

A. %

B. /

C. **

D. *

Solution

1. Step 1: Understand the remainder operator

   The operator % returns the remainder after division of two numbers.

2. Step 2: Compare with other operators

   / is division, ** is power, and * is multiplication, so they don't give remainder.

3. Final Answer:

   % -> Option A

4. Quick Check:

   Remainder operator = % [OK]

Hint: Remainder operator looks like a percent sign % [OK]

Common Mistakes:

• Confusing division / with remainder %
• Using * or ** instead of %
• Thinking + or - can give remainder

2. Which of the following is the correct syntax to calculate 5 to the power of 3 in JavaScript?

easy

A. 5 ** 3

B. 5 ^^ 3

C. 5 ^ 3

D. pow(5, 3)

Solution

1. Step 1: Identify the power operator in JavaScript

   JavaScript uses ** to calculate powers, like 5 ** 3 means 5 to the power 3.

2. Step 2: Check other options for correctness

   ^ is bitwise XOR, ^^ is invalid syntax, and pow() is not a built-in function in JavaScript.

3. Final Answer:

   5 ** 3 -> Option A

4. Quick Check:

   Power operator = ** [OK]

Hint: Use ** for power, not ^ or pow() [OK]

Common Mistakes:

• Using ^ instead of ** for power
• Trying to use pow() like in other languages
• Typing invalid operators like ^^

3. What will be the output of the following code?

console.log(10 % 4);

medium

A. 6

B. 0

C. 2

D. 4

Solution

1. Step 1: Calculate 10 divided by 4

   10 divided by 4 is 2 with a remainder of 2.

2. Step 2: Understand the % operator

   The % operator returns the remainder, so 10 % 4 equals 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   10 % 4 = 2 [OK]

Hint: Remainder is what's left after division [OK]

Common Mistakes:

• Confusing remainder with quotient
• Thinking % does division
• Choosing 0 or 4 as remainder incorrectly

4. Find the error in this code snippet:

let result = 5 **;
console.log(result);

medium

A. console.log syntax error

B. Using wrong operator for power

C. Variable name 'result' is invalid

D. Missing right operand for ** operator

Solution

1. Step 1: Check the power operator usage

   The power operator ** needs two operands, like 5 ** 2. Here, the right operand is missing.

2. Step 2: Verify other parts of the code

   The variable name and console.log syntax are correct, so no errors there.

3. Final Answer:

   Missing right operand for ** operator -> Option D

4. Quick Check:

   Power operator needs two numbers [OK]

Hint: Power operator needs number on both sides [OK]

Common Mistakes:

• Leaving out the second number after **
• Thinking variable names cause error here
• Assuming console.log is wrong

5. You want to split 100 candies equally among 6 kids and find how many candies remain undistributed. Which expression gives the number of leftover candies?

hard

A. 100 / 6

B. 100 % 6

C. 100 - 6

D. 100 ** 6

Solution

1. Step 1: Understand the problem

   We want the leftover candies after dividing 100 by 6, which means the remainder.

2. Step 2: Choose the correct operator

   The remainder operator % gives the leftover amount, so 100 % 6 is correct.

3. Final Answer:

   100 % 6 -> Option B

4. Quick Check:

   Leftover = total % number [OK]

Hint: Use % to find leftovers after division [OK]

Common Mistakes:

• Using / which gives quotient, not remainder
• Subtracting numbers directly instead of remainder
• Using power operator mistakenly