Loading...

JavaScript Operators

You know how values behave in a condition — truthy and falsy. The next skill is reading the symbols that act on values: add them, store them, compare them, or combine yes/no checks. Those symbols are operators. This session is a map of families, not a deep dive into every symbol. Later lessons cover arithmetic, assignment, comparison, and logical operators one by one.

What is an operator in JavaScript?

An operator is a symbol (or short keyword) that tells JavaScript to do something with one or more values. The values it works on are called operands. In 3 + 4, + is the operator and 3 and 4 are the operands. Beginners meet operators in almost every line — so learning the family names first stops the symbols from feeling random.

Operator families (beginner map)

📊 Beginner operator families

Family Job in one line Examples you will see soon
Arithmetic compute with numbers + - * / %
Assignment store a value in a variable = +=
Comparison ask a yes/no question about values === !== > <
Logical combine or flip yes/no results && · OR · !

Keep this table nearby. When you see a new symbol, ask: which family? That question is more useful than memorizing a giant list on day one.

Arithmetic peek (compute)

Arithmetic operators work mostly with numbers. They return a new value. % is the remainder after division — handy for “every Nth” patterns later.

Arithmetic operators peek

javascript 
console.log(10 + 3);
console.log(10 - 3);
console.log(10 * 3);
console.log(10 / 3);
console.log(10 % 3);

A full arithmetic lesson comes next. Here you only need to recognize the family and read a short expression.

Assignment stores a value

= does not mean “equals” in math class. It assigns: put the right-hand value into the variable on the left.

Assignment with =

javascript 
let score = 0;
score = 10;
console.log(score);
let label = "hi";
label = label + "!";
console.log(label);

Shortcuts like += belong to the same family. You will practice them in the assignment session.

Comparison asks a question

Comparison operators return a boolean: true or false. Prefer === (strict equal) for beginners — it checks value and type together. A deeper comparison lesson comes later.

Comparison with ===

javascript 
console.log(5 === 5);
console.log(5 === "5");
console.log(7 > 3);
console.log(2 !== 9);

5 === "5" is false because number and string are different types. That is a feature of strict equality — not a bug.

Logical combines yes/no

Logical operators work with boolean-like results. && needs both sides truthy. || needs at least one. ! flips truthy/falsy. You already know truthy and falsy; logical operators use that same idea.

Logical operators peek

javascript 
console.log(true && true);
console.log(true && false);
console.log(false || true);
console.log(!false);
let age = 20;
console.log(age >= 18 && age < 65);

Watch +: add or join?

With two numbers, + adds. If either side is a string, + often joins (concatenates) instead. You saw this in type conversion — it belongs on the operator map too.

Plus adds or joins

javascript 
console.log(2 + 3);
console.log("2" + 3);
console.log(2 + "3");
console.log("Hi" + " " + "Sam");

Show an expression on the page

One short expression can drive what the visitor reads. Change the numbers or the comparison and refresh.

Page demo with operators

html 
<!DOCTYPE html>
<html>
<head>
<title>Operators — page demo</title>
</head>
<body>
<p id="out">…</p>
<script>
let a = 8;
let b = 5;
let sum = a + b;
let ok = sum >= 10;
let box = document.getElementById("out");
box.textContent = "sum=" + sum + " · ok=" + ok;
</script>
</body>
</html>

Here arithmetic (+), comparison (>=), and string joining (+ with text) work together. That mix is normal in real pages.

Try it yourself

  1. Log 15 + 4, 15 - 4, 15 * 4, 15 / 4, and 15 % 4.
  2. Set let n = 1, then n = n + 2, and log n.
  3. Log 10 === 10 and 10 === "10".
  4. Log true && false and true || false.
  5. Log "7" + 1 next to 7 + 1 and compare.
  6. In the HTML demo, change a or b so ok becomes false, then refresh.

Common mistakes

  • Reading = as “equals” — it assigns; use === to compare
  • Expecting + to always add — a string on either side often joins
  • Memorizing every symbol before learning the four family names
  • Mixing comparison (===) with logical (&&) — different jobs
  • Skipping the map and jumping into advanced operators too early

Summary

  • An operator acts on values (operands)
  • Beginner families: arithmetic, assignment, comparison, logical
  • = stores; === compares; && / || / ! combine yes/no
  • + may add numbers or join strings
  • Next: arithmetic — a deeper look at + - * / %

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 16 of 17
Javascript Tutorial