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.