1.1 Module 1 · Operators, Methods & Keywords

Operators & Debugging

Understand how JavaScript operators work — from basic arithmetic to tricky type-coercion bugs — and learn to debug them confidently.

1

Definition

JavaScript Operators are symbols used to perform operations on values and variables — assigning values, performing arithmetic calculations, and evaluating expressions.

Every program you write relies on operators, from storing a score in a variable to checking whether a user is logged in.

2

Simple Way

Operators are tools that tell JavaScript: "Do something with these values."

+ → Add numbers together
= → Store a value in a variable
+= → Add to a variable and update it in one step
3

Code Examples

Example 1 — Assignment Operators 
let score = 10;   // Assign value
score += 5;       // Add 5 to score

console.log(score);
Output
Click ▶ Run to execute
Explanation
  • = assigns a value to a variable
  • += adds to the variable and updates it in one step
Example 2 — Arithmetic Operators 
let a = 10;
let b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
Output
Click ▶ Run to execute
Explanation
  • % returns the remainder after division — 10 ÷ 3 = 3 remainder 1
  • Useful for even/odd checks: n % 2 === 0 means even
Example 3 — Debugging a Type Issue 
let x = 10;
let y = "5";

console.log(x + y);
Output
Click ▶ Run — can you predict this?
Problem

JavaScript sees "5" as a string, so + concatenates instead of adding.

Solution — convert to Number first
console.log(x + Number(y));
Output
Click ▶ Run fix
4

Real-Life Example

Think of operators like managing money in a wallet:

=
You receive ₹100 — stored in your wallet
+=
You add ₹50 more — balance updates
-=
You spend ₹30 — deducted automatically
%
You split money and check what's left over
5

HTML + JavaScript Example

Operators work inside real HTML pages too. Click ▶ Preview to run it live in the browser below.

Live in Browser 
<!DOCTYPE html>
<html>
<head><title>Operators Demo</title></head>
<body style="font-family:sans-serif;padding:20px;background:#f8f9fa">

  <h2>JavaScript Operators</h2>
  <p id="result"></p>

  <script>
    let marks = 40;
    marks += 10;
    document.getElementById("result").textContent =
      "Total Marks: " + marks;
  </script>

</body>
</html>
Live Preview
6

Tasks (Practice)

Easy Task 1 — Add to a score
Starter code 
let marks = 50;
  • Add 20 to marks using +=
  • Print the final value with console.log()
Medium Task 2 — Wallet tracker
Starter code 
let total = 100;
let spent = 37;
  • Calculate remaining money after spending
  • Use % to check the remainder when divided by 5
7

MCQs

Q1
What does += do?
  • A Subtract
  • B Multiply
  • C Add and assign
  • D Divide
💡 C is correct. += adds the right-hand value and saves it back — one step instead of two.
Q2
What is the output? 
console.log(10 % 3);
Output
Run it to verify
  • A 3
  • B 1
  • C 0
  • D 10
💡 B is correct. 10 ÷ 3 = 3 with a remainder of 1. The % operator returns that remainder.
Q3
What is the output? 
console.log(5 + "5");
Output
Run it to verify
  • A 10
  • B "55"
  • C Error
  • D undefined
💡 B is correct. When one operand of + is a string, JavaScript converts the other to a string too and concatenates — giving "55", not 10.
8

Pro Tips & Extra Knowledge

  • 01

    Prefer Number() when you expect a numeric value from a string — it's explicit and avoids silent concatenation bugs.

  • 02

    Always check a value's type before operating on it:

    Type checking 
    let value = 42;
console.log(typeof value);
    Output
    Click ▶ Run to execute
  • 03

    Watch out for the =+ vs += typo — a very common mistake:

    Wrong vs Correct 
    let a = 5;
a =+ 3; // WRONG  → unary +3, so a becomes 3
a += 3; // RIGHT  → a = a + 3 = 6
  • 04

    Use console.log() frequently while debugging — it's your best tool for catching unexpected values at any point in your code.

Mini Challenge

Predict the output before running — apply each operator one step at a time.

What does this print? 
let coins = 10;
coins += 5;
coins %= 4;

console.log(coins);
Output
Think first, then run!
Step-by-Step Explanation
// Step 1:  coins = 10
// Step 2:  coins += 5   →  coins = 15
// Step 3:  coins %= 4   →  15 % 4 = 3  (15 = 3 × 4 + 3)
// Output:  3