JavaScript FoundationsBeginner⏱ 9 min03 / 12

Operators & Expressions

Learn how JavaScript does math, compares values, combines logic, and builds strings — the everyday building blocks every program depends on.

Every program needs to calculate things, compare things, and make decisions. The tools JavaScript gives you for all of that are called operators. They work on values — numbers, strings, booleans — and combine them into expressions that produce a result.

Think of operators as verbs: + says "add", === says "are these identical?", && says "are both of these true?". By the end of this lesson you will know the most important ones, and the subtle traps that trip up beginners.

Think of it like

Operators are the verbs of JavaScript

If values are nouns — 42, "hello", true — then operators are the verbs that do something with them. 4 + 3 is a tiny sentence: "take 4 and add 3". The result 7 is what that sentence means. A chain of operators and values is an expression.

#Arithmetic and Assignment Operators

% (modulo) gives the remainder. += and -= update a variable in one concise step.
// Arithmetic
console.log(10 + 3);  // 13  — addition
console.log(10 - 3);  // 7   — subtraction
console.log(10 * 3);  // 30  — multiplication
console.log(10 / 4);  // 2.5 — division
console.log(10 % 3);  // 1   — remainder (modulo)

// Compound assignment — shorthand for updating a variable
let score = 0;
score += 10;   // same as: score = score + 10
score -= 3;    // same as: score = score - 3
console.log(score);
Note

What is modulo useful for?

Think of a clock: after 12, you don't say "hour 13" — you wrap back to 1. 13 % 12 is 1. Modulo is perfect for even/odd checks (n % 2 === 0 means even) and any time you need values to wrap around a range.

#Comparison Operators — and the === vs == Trap

Comparison operators return true or false. === checks value AND type — use it instead of ==
console.log(5 > 3);    // true  — greater than
console.log(5 < 3);    // false — less than
console.log(5 >= 5);   // true  — greater than or equal
console.log(5 !== 3);  // true  — strict NOT equal

// == does type coercion — avoid it!
console.log("5" == 5);   // true  (yikes!)
console.log("5" === 5);  // false (correct)
Common mistake

Always use === and !== — never ==

The == operator performs type coercion: it quietly converts values before comparing, producing results like 0 == false → true and "" == false → true. === never converts types — it is true only when value and type both match. Make === your default and you will avoid a whole class of confusing bugs.

#Logical Operators, Truthy, and Falsy

Logical operators combine booleans. Boolean() reveals a value's truthy/falsy nature.
// && = AND (both must be true), || = OR (one is enough), ! = NOT
const hasTicket = true;
const isOver18 = false;
console.log(hasTicket && isOver18);  // false
console.log(hasTicket || isOver18);  // true
console.log(!hasTicket);             // false

// Every value is truthy or falsy
// Falsy: false, 0, "", null, undefined, NaN — everything else is truthy
console.log(Boolean(0));        // false
console.log(Boolean(""));       // false
console.log(Boolean("hello"));  // true
console.log(Boolean([]));       // true — even an empty array!

#String Concatenation and Template Literals

Template literals are cleaner and support any JS expression inside ${}
const name = "Priya";
const score = 95;

// Old way: + concatenation — gets messy fast
console.log("Hello, " + name + "! Score: " + score);

// Modern way: template literal (backticks + ${})
console.log(`Hello, ${name}! Score: ${score}`);

// Any expression works inside ${}
console.log(`Double: ${score * 2}, Pass? ${score >= 70}`);
Quick check

What does this expression evaluate to? ```js console.log("3" === 3); ```

Tip

Four groups to remember

Arithmetic (+ - * / %) crunches numbers. Comparison (=== !== > <) answers yes/no questions. Logical (&& || !) combines those answers. Template literals weave values into readable strings. Master these four groups and you can express almost any idea in code.

Key takeaways

  • Use === and !== for all equality checks — == does sneaky type conversion that causes bugs.
  • The % (modulo) operator gives the remainder after division — great for even/odd checks and wrap-around logic.
  • Compound assignment operators like += update a variable in one concise step.
  • Only six values are falsy: false, 0, "", null, undefined, and NaN — everything else is truthy.
  • Template literals (backtick strings with ${}) are the modern, readable way to build strings with variables.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

The lesson describes % as the remainder (modulo) operator. What does this code log?

predict-output
console.log(17 % 5);
Fix the bug#2

This code has a bug — what's wrong?

fix-bug
const input = "0";

if (input == false) {
  console.log("No input given.");
} else {
  console.log("Got input: " + input);
}
Fill in the blank#3

Complete the template literal so it logs: Hello, Priya! Score: 190

const name = "Priya";
const score = 95;

console.log(`Hello, ${name}! Score: ${score  2}`);
Reorder the lines#4

Arrange these lines so score starts at 0, gains 10 points, loses 3, and then logs 7 using compound assignment operators.

1
console.log(score);
2
score -= 3;
3
score += 10;
4
let score = 0;
Your turn
Practice exercise

Write a function called gradeReport that takes a student's name (string) and score (number 0–100) and returns a sentence. Use a template literal. Determine the letter grade: 90+ is "A", 80–89 is "B", 70–79 is "C", below 70 is "F".

Example: gradeReport("Sam", 85) should return "Sam scored 85 — that's a B!"

Try it live — edit the code and hit Run to see the output:

solution.js · editable