JavaScript · Lesson 07 / 32 · English
JavaScript Operators
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
Arithmetic combines numbers; comparison produces booleans; logical operators combine conditions. Parentheses make the intended order clear.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
JavaScript Operators
Operators are used to perform operations on variables and values. JavaScript has several types of operators.
Arithmetic Operators
| Operator | Name | Example | Result |
|---|---|---|---|
| + | Addition | 5 + 3 | 8 |
| – | Subtraction | 5 – 3 | 2 |
| * | Multiplication | 5 * 3 | 15 |
| / | Division | 10 / 4 | 2.5 |
| % | Modulus (Remainder) | 10 % 3 | 1 |
| ** | Exponentiation | 2 ** 8 | 256 |
| ++ | Increment | x++ | x + 1 |
| — | Decrement | x– | x – 1 |
let a = 10, b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1
console.log(a ** b); // 1000 (10^3)Comparison Operators
JavaScript has two equality operators: == (loose) and === (strict). Always prefer ===.
// Loose equality (==) — performs type coercion
console.log(5 == "5"); // true ← string coerced to number
console.log(0 == false); // true ← false coerced to 0
// Strict equality (===) — no type coercion
console.log(5 === "5"); // false ← different types
console.log(5 === 5); // true
// Other comparison operators
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 >= 10); // true
console.log(10 !== 5); // trueRule: Always use === and !== in modern JavaScript. The loose equality == has confusing edge cases.
Logical Operators
// && (AND) — both must be true
console.log(true && true); // true
console.log(true && false); // false
// || (OR) — at least one must be true
console.log(false || true); // true
console.log(false || false); // false
// ! (NOT) — inverts the value
console.log(!true); // false
console.log(!false); // true
// ?? (Nullish Coalescing — ES2020)
const name = null ?? "Guest"; // "Guest" (only null/undefined triggers this)
const port = 0 ?? 3000; // 0 (0 is NOT null/undefined)Assignment Operators
let x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 6
x **= 2; // x = x ** 2 → 36
x ??= "default"; // only assigns if x is null/undefinedA complete example
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const price = 120;
const quantity = 3;
const total = price * quantity;
console.log(total);
console.log(total >= 300 && quantity > 1);Predict first. Reveal the expected result.
360 true
Make one change. See what happens.
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Change quantity to 2. Predict both lines.
Reveal the answer and reasoning
The total is 240 and the condition is false because 240 is below 300.
One mistake to avoid: The + operator also concatenates strings. "2" + 3 is "23", while 2 + 3 is 5.
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.