"Interactive Web Calculator & Form Validator" — build a small web app using HTML, CSS, and JavaScript that uses arithmetic, comparison, logical, ternary, and nullish operators to calculate values and validate a user form.
🎯 portfolio piece · peer review · certification
“Operators & Expressions for Web” – Learn how JavaScript thinks and calculates
Welcome, young web coder! Have you ever wondered how a website knows that 2 + 2 = 4? Or how a login page knows your password is correct? The answer is operators and expressions.
Operators are the symbols that tell the computer what to do — like +, -, =, and >. Expressions are the little puzzles you build with those symbols, like 2 + 3 or age > 18. Every website you use — from Facebook to your school portal — uses them thousands of times.
In this module, we will learn what operators and expressions are, how they work, and how to use them in the browser. We will use JavaScript, the language of the web. By the end, you will understand the foundation of every line of code you will ever write.
Let’s begin!
After finishing this module, you will be able to:
Ada is 13 years old and lives in Lagos. Her mother runs a small provisions shop. One Saturday, Ada was helping at the shop. A customer came in and bought:
Ada’s mother quickly wrote down the total on paper. Ada watched and thought, "This is exactly what operators do in JavaScript!"
She opened her laptop and typed in the browser console:
(2 * 3000) + 1500 + (3 * 800);
The console showed: 9900. Ada smiled. She had used the multiplication operator (*), the addition operator (+), and the grouping operator ( ) — all in one line.
She also typed:
let total = (2 * 3000) + 1500 + (3 * 800); total > 5000 ? "Big sale!" : "Small sale";
The console replied: "Big sale!". Ada had used the greater than operator (>), the assignment operator (=), and even the ternary operator ( ? : ). Her mother was amazed.
From that day, Ada used JavaScript to help with the shop’s calculations. She learned that operators are everywhere — in business, at home, and on the web.
Moral of the story: Operators are the tools computers use to calculate and compare. Expressions are the little puzzles they solve. Once you understand them, you can make websites do almost anything.
Definition: An operator is a symbol that tells the computer to do something with values.
Why it is important: Every calculation, comparison, or decision uses operators.
Simple explanation: An operator is like a tool in a toolbox. Each tool does a specific job.
Real-life example: A bank adds interest with the + operator.
School example: A teacher adds scores with the + operator.
Home example: A family subtracts spending with the - operator.
Nigerian example: A trader multiplies price by quantity with the * operator.
Illustration:
Operator = Tool + add - subtract * multiply / divide > greater than = assign
Mini summary: An operator is a symbol that tells the computer what to do.
Definition: An expression is a piece of code that produces a value.
Why it is important: Every expression the computer reads becomes a value, like a number, text, or true/false.
Simple explanation: An expression is a mini puzzle that has one answer.
Real-life example: 2 + 3 is an expression. Its value is 5.
School example: score >= 50 is an expression. Its value is true or false.
Home example: price * 2 is an expression.
Nigerian example: quantity * unitPrice is an expression.
Illustration:
Expression → Value 2 + 3 → 5 "a" + "b" → "ab" 5 > 3 → true
Mini summary: An expression is a piece of code that gives a value.
Definition: Operands are the values that an operator works on.
Why it is important: Operators need operands to do anything.
Simple explanation: Operands are the things. Operators are what you do to them.
Real-life example: In 5 + 3, 5 and 3 are operands.
School example: In mathScore + englishScore, both scores are operands.
Home example: In rent + food, both are operands.
Nigerian example: In price * quantity, both are operands.
Illustration:
Operand Operator Operand
5 + 3
| |
operand operand
Mini summary: Operands are the values that operators work on.
Definition: A value is any piece of data, like a number, text, or true/false.
Why it is important: Operators behave differently with different types.
Simple explanation: Values are the ingredients. Operators are the cooking methods.
Real-life example: A bank stores balances as numbers and names as text.
School example: A teacher stores scores as numbers and names as text.
Home example: A family stores a shopping list as text.
Nigerian example: A trader stores prices as numbers and product names as text.
Illustration:
Common Types: Number: 42, 3.14 String: "Hello", "Ada" Boolean: true, false Null: null Undefined: undefined
Mini summary: Values come in types: number, string, boolean, null, undefined.
Definition: A statement is a full instruction. An expression is a piece that produces a value.
Why it is important: Knowing the difference helps you understand code structure.
Simple explanation: A statement is a full sentence. An expression is a phrase inside it.
Real-life example: "Pay ₦500" is a statement. "₦500" is an expression.
School example: "Write your name" is a statement. "Your name" is a value.
Home example: "Buy milk" is a statement. "milk" is a value.
Nigerian example: "Send the goods to Enugu" is a statement.
Illustration:
Statement: let total = 2 + 3;
Expression: 2 + 3
Statement: if (score > 50) { ... }
Expression: score > 50
Mini summary: Statements are full instructions. Expressions are parts that give values.
Definition: On the web, expressions control what users see and do.
Why it is important: Every button, form, and message uses expressions behind the scenes.
Simple explanation: Expressions are the "thinking" part of a website.
Real-life example: A bank login page checks if the password matches.
School example: A school portal checks if grades are above pass mark.
Home example: A shopping site calculates the cart total.
Nigerian example: A fintech app calculates transfer fees automatically.
Illustration:
Website Flow: User types → Expression checks → Result shown 🎉
Mini summary: Expressions make websites think, calculate, and react.
Definition: The browser console is a tool that lets you type and run JavaScript directly.
Why it is important: It is a safe place to test expressions quickly.
Simple explanation: The console is like a notepad where the computer answers you back.
Real-life example: A developer tests new code in the console before using it on a site.
School example: A student tests 2 + 2 in the console.
Home example: A family calculates a bill in the console.
Nigerian example: A trader calculates the total price of goods in the console.
Illustration:
Open Console:
Chrome: Ctrl + Shift + J (Windows)
Cmd + Option + J (Mac)
Firefox: Ctrl + Shift + K
Edge: Ctrl + Shift + J
Step-by-step:
2 + 3.Mini summary: The browser console is your safe playground for testing expressions.
Definition: Running an expression means typing it and pressing Enter to see its value.
Why it is important: It is the first step to writing code.
Simple explanation: Like typing a question and getting an answer immediately.
Real-life example: A developer tests a calculation before adding it to a page.
School example: A student tests 10 * 5 in the console.
Home example: A family tests the total of the groceries.
Nigerian example: A trader tests the total price of 5 bags of rice.
Illustration:
Console: > 2 + 3 < 5 > "Hello " + "Ada" < "Hello Ada" > 10 > 5 < true
Step-by-step:
2 + 3.5.10 * 10 and "a" + "b".Mini summary: Typing expressions in the console gives immediate results.
Definition: A variable is a named container that holds a value.
Why it is important: Variables let you store and reuse values.
Simple explanation: It is like a labeled box. You put a value in and use it later.
Real-life example: A bank names a value "balance".
School example: A teacher names a value "mathScore".
Home example: A family names a value "shoppingTotal".
Nigerian example: A trader names a value "totalSales".
Illustration:
let balance = 5000; let name = "Ada"; let isOpen = true;
Step-by-step:
let or const.=.Mini summary: Variables hold values in named containers.
Definition: Variables can be used inside expressions just like regular values.
Why it is important: It lets you calculate using names instead of numbers.
Simple explanation: If the value inside the box is 5, the box name becomes 5 in the puzzle.
Real-life example: A bank adds interest using the variable balance.
School example: A teacher adds mathScore + englishScore.
Home example: A family calculates rent + food + transport.
Nigerian example: A trader calculates quantity * price.
Illustration:
let a = 5; let b = 3; a + b; // 8 let price = 3000; let qty = 2; price * qty; // 6000
Mini summary: Variables can be used inside expressions to calculate values.
Definition: Operator precedence is the order in which operators are calculated.
Why it is important: It decides the final value of an expression.
Simple explanation: Like a queue — some operators go first, others wait.
Real-life example: A bank calculates multiplication before addition.
School example: In math, multiplication is done before addition.
Home example: You weigh ingredients before mixing them.
Nigerian example: A trader prices items before calculating the total.
Illustration:
2 + 3 * 4 Step 1: 3 * 4 = 12 Step 2: 2 + 12 = 14 (2 + 3) * 4 Step 1: 2 + 3 = 5 Step 2: 5 * 4 = 20
Step-by-step:
Mini summary: Operator precedence decides which part of an expression is calculated first.
Definition: Parentheses ( ) group parts of an expression and force them to be calculated first.
Why it is important: They prevent confusion and bugs.
Simple explanation: Parentheses are the "do this first" sign.
Real-life example: A bank uses ( ) to calculate fees before interest.
School example: A student uses ( ) to add scores before averaging.
Home example: A family adds groceries before adding tax.
Nigerian example: A trader adds quantity costs before applying a discount.
Illustration:
2 + 3 * 4 → 14 (2 + 3) * 4 → 20 Parentheses change the answer!
Mini summary: Parentheses tell JavaScript which part to calculate first.
Definition: Mistakes happen. Knowing them helps you avoid them.
Why it is important: A small mistake can give the wrong answer.
Simple explanation: Like typing a phone number wrong — you get the wrong person.
Real-life example: A bank uses the wrong operator and pays wrong interest.
School example: A teacher forgets parentheses and gets wrong averages.
Home example: A family miscounts a shopping total.
Nigerian example: A trader forgets multiplication and undercharges a customer.
Table of common mistakes:
| Mistake | What Happens | How to Fix |
|---|---|---|
| Forgetting parentheses | Wrong answer | Add ( ) to group |
| Mixing numbers and strings | Wrong result | Use the right type |
| Missing semicolon | Error | Add ; at the end |
| Using = instead of === | Assignment instead of check | Use === to compare |
| Wrong variable name | ReferenceError | Check spelling |
| Dividing by zero | Infinity | Check the denominator |
Mini summary: Common mistakes: missing parentheses, wrong types, missing semicolons.
Definition: Best practices are good habits that make your code clean and safe.
Why it is important: Good habits prevent bugs and help others read your code.
Simple explanation: Like keeping your desk tidy — easier to find things.
Real-life example: A bank writes clean code so any developer can understand it.
School example: A student writes neat notes for exams.
Home example: A family keeps a tidy shopping list.
Nigerian example: A business writes clear, simple code.
List of best practices:
Mini summary: Best practices: clear names, parentheses, and simple expressions.
You now have a strong foundation in operators and expressions.
What you learned:
Next steps: In Module Two, you will learn about arithmetic and assignment operators in depth.
Illustration:
Your Learning Journey:
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
Mini summary: You now understand the basics of operators and expressions. Time to go deeper!
| Word | Simple Definition |
|---|---|
| Operator | A symbol that tells the computer what to do. |
| Expression | A piece of code that produces a value. |
| Operand | A value that an operator works on. |
| Value | Any piece of data (number, text, etc.). |
| Type | The kind of value (number, string, boolean). |
| Statement | A full instruction in code. |
| Variable | A named container for a value. |
| Precedence | The order operators are calculated. |
| Parentheses | Symbols ( ) that group parts of an expression. |
| Console | A tool for testing JavaScript. |
| Number | A numeric value, like 5 or 3.14. |
| String | A text value, like "Hello". |
| Boolean | A true or false value. |
| Null | A special value meaning "nothing". |
| Undefined | A value that has not been set. |
2 + 2.let followed by a name.= and a value.;.typeof followed by a value.price * quantity for sales.balance + interest to update accounts.math + english + science.stock - sold to track goods.amount - fee to send money.20 - 5 for what is left.playerScore + 10 for a new score.price * 2 for two sweets.toys - borrowed for how many remain.booksRead + 1 for a new book.2 * 500 for two loaves of bread.income - expenses for savings.hours + minutes / 60 for total hours.cups * 2 to double a recipe.speed * time for distance.
Operand Operator Operand
5 + 3
|
V
Expression
|
V
Value: 8
Statement: let total = 2 + 3;
\_____/
Expression
Step 1: ( ) Step 2: * / Step 3: + - Step 4: left to right
let price = 3000; let qty = 2; price * qty → 6000
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
| Feature | Statement | Expression |
|---|---|---|
| Purpose | Full instruction | Produces a value |
| Example | let x = 5; | 2 + 3 |
| Can stand alone? | Yes | Sometimes |
| Type | Example |
|---|---|
| Number | 42, 3.14 |
| String | "Ada", "Hello" |
| Boolean | true, false |
| Null | null |
| Undefined | undefined |
| Order | Operators |
|---|---|
| 1 | ( ) |
| 2 | * / |
| 3 | + - |
| 4 | Left to right |
| Mistake | Fix |
|---|---|
| Missing ( ) | Add parentheses |
| Mixing types | Use the right type |
| Using = not === | Use === for compare |
| Missing ; | Add semicolon |
Lesson 1: An operator is a symbol that does an action.
Lesson 2: An expression produces a value.
Lesson 3: Operands are the values in an expression.
Lesson 4: Values come in types: number, string, boolean, etc.
Lesson 5: Statements are full instructions; expressions are parts.
Lesson 6: Expressions make websites think and react.
Lesson 7: The browser console is your testing tool.
Lesson 8: Running an expression gives an instant value.
Lesson 9: Variables hold values in named containers.
Lesson 10: Variables can be used inside expressions.
Lesson 11: Operator precedence decides calculation order.
Lesson 12: Parentheses group parts of an expression.
Lesson 13: Common mistakes: missing parentheses, wrong types.
Lesson 14: Best practices: clear names, parentheses, simple expressions.
Lesson 15: You now understand the basics of operators and expressions.
Congratulations! You have finished Module One of the Operators & Expressions for Web course. You learned what an operator is and what an expression is. You learned about operands, values, and data types. You learned the difference between statements and expressions. You learned how to open the browser console and run expressions. You learned how to create variables and use them in expressions. You learned about operator precedence and parentheses. You learned common mistakes and best practices. Most importantly, you now understand the foundation of every line of JavaScript you will ever write. In the next module, you will learn about arithmetic and assignment operators in depth.
Match the term to its meaning.
| Term | Meaning |
|---|---|
| 1. Operator | A. A value an operator works on |
| 2. Expression | B. A symbol that does an action |
| 3. Operand | C. A named container for a value |
| 4. Variable | D. A piece of code that produces a value |
| 5. Statement | E. A full instruction in code |
Answers: 1-B, 2-D, 3-A, 4-C, 5-E
Title: “Build a Mini Calculator in the Console”
Instructions: In groups of 3–4, open the browser console and together type 5 different expressions. Include one with parentheses. Explain each result to the class. Try to use Nigerian examples like price × quantity.
Goal: Practice typing and reading expressions.
Task: Open the browser console. Type and run at least 5 expressions:
Write down each expression and its answer.
Project: “My First JavaScript Expressions Notebook”
Create a document with at least 10 expressions:
Example:
Purpose: Total price of 2 bags of rice Code: 2 * 3000 Value: 6000 Explanation: Multiply quantity by price.
Assignment: Interview a family member who sells goods. Ask them:
Then write 5 JavaScript expressions that match their calculations.
Submit: Your 5 expressions with explanations.
In Module Two, we will dive deep into arithmetic and assignment operators. We will cover:
To prepare, complete the practical assignment and review the key vocabulary. Practice a few expressions in the browser console. Bring your curiosity!
See you in Module Two!
End of Module One – Operators & Expressions for Web
“Operators & Expressions for Web” – Learn how JavaScript thinks and calculates
Welcome back, young web coder! In Module One, you learned what operators and expressions are. You learned that operators are symbols that do actions, and expressions are pieces of code that produce values. You also learned how to use the browser console and how variables hold values.
Now it is time to roll up our sleeves and do math. In Module Two, we will learn about arithmetic operators (like +, -, *, /) and assignment operators (like =, +=, -=). These are the tools every website uses to count things, calculate prices, track scores, and more.
Think of arithmetic operators as your math tools. Assignment operators are like labels on boxes that store results. Together, they make websites smart. Let’s begin!
After finishing this module, you will be able to:
Ngozi is 14 years old and lives in Enugu. Her aunt runs a small restaurant. Every day, customers order plates of food, bottles of water, and soft drinks. Ngozi’s aunt wrote the prices on paper and added them by hand. Sometimes she made mistakes.
One day, Ngozi said, "Auntie, let me build you a simple bill calculator." She opened her browser console and typed:
let plate = 2500; let water = 200; let drink = 500; let total = (2 * plate) + (3 * water) + (1 * drink);
The console showed: 5600. Her aunt was amazed. Ngozi explained:
* multiplied the quantity by the price.+ added the subtotals.( ) grouped each item before adding.= stored the answer in total.Next, Ngozi added a discount:
let discount = 500; total -= discount; // total is now 5100
Her aunt was very happy. "This will save me so much time!" she said.
Ngozi smiled. "And I can even add more features later — like tax, tips, or percentages."
Moral of the story: Arithmetic and assignment operators are powerful tools for real businesses. They can calculate prices, discounts, and totals quickly and accurately.
Definition: Arithmetic operators are symbols that perform math operations on numbers.
Why it is important: They are the foundation of every calculation on the web.
Simple explanation: They are like the buttons on a calculator.
Real-life example: A bank adds interest with +.
School example: A teacher averages scores using + and /.
Home example: A family subtracts expenses using -.
Nigerian example: A trader multiplies price by quantity using *.
Illustration:
Arithmetic Operators: + addition - subtraction * multiplication / division % modulus (remainder) ** exponent (power)
Mini summary: Arithmetic operators do math on numbers.
Definition: The + operator adds two or more numbers together.
Why it is important: It is the most common operator in any program.
Simple explanation: + puts values together.
Real-life example: A bank adds deposits.
School example: A student adds scores.
Home example: A family adds grocery prices.
Nigerian example: A trader adds totals from two shops.
Illustration:
5 + 3 → 8 10 + 20 → 30 2.5 + 1.5 → 4
Mini summary: + adds numbers together.
Definition: The - operator subtracts one number from another.
Why it is important: It is used for balances, discounts, and differences.
Simple explanation: - takes away one value from another.
Real-life example: A bank subtracts withdrawals.
School example: A student finds how many points they lost.
Home example: A family subtracts savings from income.
Nigerian example: A trader subtracts expenses from sales.
Illustration:
10 - 4 → 6 50 - 25 → 25 5 - 8 → -3
Mini summary: - subtracts one number from another.
Definition: The * operator multiplies numbers together.
Why it is important: It is used to calculate totals with quantity and price.
Simple explanation: * repeats a number many times, quickly.
Real-life example: A bank calculates interest using multiplication.
School example: A student multiplies score by weight.
Home example: A family multiplies price by quantity.
Nigerian example: A trader multiplies quantity by unit price.
Illustration:
3 * 4 → 12 7 * 2 → 14 2.5 * 4 → 10
Mini summary: * multiplies numbers together.
Definition: The / operator divides one number by another.
Why it is important: It is used for averages, shares, and rates.
Simple explanation: / splits a number into equal parts.
Real-life example: A bank divides profit among shareholders.
School example: A student averages scores by dividing by number of subjects.
Home example: A family splits a bill among members.
Nigerian example: A trader divides the cost of a bag of rice to find the price per cup.
Illustration:
12 / 3 → 4 100 / 4 → 25 7 / 2 → 3.5
Mini summary: / divides one number by another.
Definition: The % operator gives the remainder after division.
Why it is important: It is used to check even/odd numbers and repeating cycles.
Simple explanation: % shows what is left over after dividing.
Real-life example: A bank checks if a number of transactions is even.
School example: A teacher divides students into groups of 4 and checks who is left over.
Home example: A family shares items equally and sees what is left.
Nigerian example: A trader packs eggs in cartons of 12 and checks the remainder.
Illustration:
10 % 3 → 1 (because 10 ÷ 3 = 3 remainder 1) 8 % 2 → 0 (even number) 7 % 2 → 1 (odd number)
Mini summary: % gives the remainder after division.
Definition: The ** operator raises a number to a power.
Why it is important: It is used for squaring, area, and growth calculations.
Simple explanation: ** multiplies a number by itself many times.
Real-life example: A bank calculates compound interest.
School example: A student calculates the area of a square.
Home example: A family calculates the area of a room.
Nigerian example: A trader calculates the area of farmland.
Illustration:
2 ** 3 → 8 (2 × 2 × 2) 5 ** 2 → 25 (5 × 5) 10 ** 0 → 1
Mini summary: ** raises a number to a power.
Definition: ++ adds 1 to a number. -- subtracts 1 from a number.
Why it is important: They are used in counters and loops.
Simple explanation: ++ is like saying "one more". -- is like saying "one less".
Real-life example: A bank counts transactions one by one.
School example: A teacher counts students entering the class.
Home example: A family counts how many eggs are used.
Nigerian example: A trader counts how many customers entered today.
Illustration:
let count = 0; count++; // count is now 1 count++; // count is now 2 count--; // count is now 1
Mini summary: ++ adds 1 and -- subtracts 1 from a number.
Definition: Assignment operators store values into variables.
Why it is important: Without them, you cannot save or reuse results.
Simple explanation: Assignment operators are like labeled boxes where you put values.
Real-life example: A bank assigns a value to "balance".
School example: A teacher assigns a value to "score".
Home example: A family assigns a value to "monthlyBudget".
Nigerian example: A trader assigns a value to "totalSales".
Illustration:
let balance = 5000; // assign balance = 6000; // reassign
Mini summary: Assignment operators store values into variables.
Definition: The = operator stores the value on the right into the variable on the left.
Why it is important: It is the most common assignment operator.
Simple explanation: = means "put this value into this box".
Real-life example: A bank sets balance to 5000.
School example: A student sets score to 90.
Home example: A family sets rent to 150000.
Nigerian example: A trader sets price to 3000.
Illustration:
let x = 5; let name = "Ada"; let isOpen = true;
Mini summary: = stores a value into a variable.
Definition: Compound assignment operators combine math and assignment in one step.
Why it is important: They save time and make code cleaner.
Simple explanation: Instead of writing x = x + 5, you write x += 5.
Real-life example: A bank adds interest to a balance with +=.
School example: A student adds bonus points with +=.
Home example: A family adds an expense with +=.
Nigerian example: A trader adds today’s sales with +=.
Illustration:
let x = 10; x += 5; // same as x = x + 5 → 15 x -= 3; // same as x = x - 3 → 12 x *= 2; // same as x = x * 2 → 24 x /= 4; // same as x = x / 4 → 6
Mini summary: Compound assignment combines math with assignment.
Definition: The %= operator assigns the remainder to a variable.
Why it is important: It is useful for cycles and remainders.
Simple explanation: It is like saying "put the remainder back into the box".
Real-life example: A bank uses %= to rotate transaction IDs.
School example: A teacher uses %= to pack students into groups.
Home example: A family uses %= to split bills evenly.
Nigerian example: A trader uses %= to know how many items will remain after packing.
Illustration:
let x = 17; x %= 5; // same as x = 17 % 5 → 2
Mini summary: %= assigns the remainder to a variable.
Definition: Precedence decides which operator runs first in an expression.
Why it is important: Wrong precedence gives wrong answers.
Simple explanation: JavaScript follows math rules: multiply before adding.
Real-life example: A bank multiplies interest before adding to balance.
School example: A student multiplies scores before averaging.
Home example: A family multiplies items before summing the bill.
Nigerian example: A trader multiplies quantity by price before adding other items.
Illustration:
2 + 3 * 4 → 14 (* first) (2 + 3) * 4 → 20 (parentheses first) 2 + 3 - 1 → 4 (left to right)
Step-by-step:
Mini summary: Precedence decides the order of calculation. Parentheses go first.
Definition: Mistakes happen. Knowing them helps you avoid them.
Why it is important: Small mistakes cause big errors.
Simple explanation: Like misreading a price at the market.
Real-life example: A bank charges wrong interest due to a wrong operator.
School example: A teacher misaverages due to missing parentheses.
Home example: A family miscounts a bill.
Nigerian example: A trader undercharges a customer.
Table of common mistakes:
| Mistake | What Happens | How to Fix |
|---|---|---|
| Forgetting parentheses | Wrong answer | Add ( ) |
| Using = instead of == | Assignment instead of check | Use === to compare |
| Dividing by zero | Infinity | Check denominator |
| Mixing numbers and strings | Wrong result | Convert types |
| Missing semicolon | Error | Add ; |
| Wrong variable name | ReferenceError | Check spelling |
Mini summary: Common mistakes: missing parentheses, wrong types, missing semicolons.
Definition: Best practices are good habits that make math code clean and safe.
Why it is important: Good habits prevent bugs and help others read your code.
Simple explanation: Like keeping your calculator clean.
Real-life example: A bank writes clean math code in its apps.
School example: A student writes neat calculations.
Home example: A family keeps a tidy budget sheet.
Nigerian example: A business writes simple, readable code.
List of best practices:
Mini summary: Best practices: parentheses, clean names, and testing.
You now know how to do math in JavaScript.
What you learned:
Next steps: In Module Three, you will learn about comparison, logical, and string operators.
Illustration:
Your Learning Journey:
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
Mini summary: You now have a full arithmetic toolkit. Time to compare and combine values!
| Word | Simple Definition |
|---|---|
| Arithmetic | Math with numbers. |
| Addition | Combining numbers with +. |
| Subtraction | Taking away with -. |
| Multiplication | Repeated addition with *. |
| Division | Splitting into equal parts with /. |
| Modulus | The remainder after division (%). |
| Exponent | Number raised to a power (**). |
| Increment | Add 1 to a number (++). |
| Decrement | Subtract 1 from a number (--). |
| Assignment | Storing a value in a variable (=). |
| Compound Assignment | Math plus assignment (+=, -=, etc.). |
| Precedence | Order of calculation. |
| Parentheses | ( ) group calculations. |
| Remainder | What is left after division. |
| Infinity | A result when dividing by zero. |
2 + 3 and press Enter.5.10 * 5 and press Enter.50.let x = 10;.x += 5;.x.15.10 % 3.1.8 % 2 to get 0.2 + 3 * 4 and see 14.(2 + 3) * 4 and see 20.let count = 0;.count++;.count and see 1.2.price * quantity for invoices.balance += interest to update accounts.(a + b + c) / 3 for averages.stock -= sold for remaining goods.amount %= 100 for split payments.20 - 5 for what is left.score += 10 for a new high score.price * 2 for two sweets.toys -= 1 for each toy given away.pagesRead += 10 every day.2 * 500 for two loaves of bread.income -= expenses for savings.hours + minutes / 60 for total hours.cups *= 2 to double a recipe.speed * time for distance.a = b = 5?-0 exists in JavaScript?+ add - subtract * multiply / divide % remainder ** power
x = x + 5 → x += 5 x = x - 3 → x -= 3 x = x * 2 → x *= 2 x = x / 4 → x /= 4
1. ( ) 2. ** 3. * / % 4. + -
10 % 3 10 ÷ 3 = 3 remainder 1 So 10 % 3 = 1
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
| Operator | Meaning | Example |
|---|---|---|
| + | Add | 5 + 3 = 8 |
| - | Subtract | 5 - 3 = 2 |
| * | Multiply | 5 * 3 = 15 |
| / | Divide | 10 / 2 = 5 |
| % | Remainder | 10 % 3 = 1 |
| ** | Power | 2 ** 3 = 8 |
| Operator | Meaning | Example |
|---|---|---|
| = | Assign | x = 5 |
| += | Add and assign | x += 5 |
| -= | Subtract and assign | x -= 5 |
| *= | Multiply and assign | x *= 5 |
| /= | Divide and assign | x /= 5 |
| %= | Remainder and assign | x %= 5 |
| Form | Meaning |
|---|---|
| x++ | Use x, then add 1 |
| ++x | Add 1, then use x |
| Expression | Value |
|---|---|
| 5 + 3 | 8 |
| 5 / 2 | 2.5 |
| 5 % 2 | 1 |
| 5 / 0 | Infinity |
| 0 / 0 | NaN |
Lesson 1: Arithmetic operators do math on numbers.
Lesson 2: + adds numbers.
Lesson 3: - subtracts numbers.
Lesson 4: * multiplies numbers.
Lesson 5: / divides numbers.
Lesson 6: % gives the remainder.
Lesson 7: ** raises to a power.
Lesson 8: ++ adds 1, -- subtracts 1.
Lesson 9: Assignment operators store values.
Lesson 10: = stores a value into a variable.
Lesson 11: Compound assignments combine math with assignment.
Lesson 12: %= assigns the remainder.
Lesson 13: Precedence controls calculation order.
Lesson 14: Common mistakes: missing parentheses, wrong types.
Lesson 15: Best practices: parentheses, clean names, testing.
Lesson 16: You now have a full arithmetic toolkit.
Congratulations! You have finished Module Two of the Operators & Expressions for Web course. You learned arithmetic operators (+, -, *, /, %, **) and assignment operators (=, +=, -=, *=, /=, %=). You learned about increment and decrement. You learned about precedence and parentheses. You learned common mistakes and best practices. Most importantly, you can now do math in JavaScript, which is the foundation of every website and app. In the next module, you will learn about comparison, logical, and string operators.
Match the operator to its meaning.
| Operator | Meaning |
|---|---|
| 1. + | A. Multiply |
| 2. - | B. Add |
| 3. * | C. Remainder |
| 4. % | D. Subtract |
| 5. ** | E. Power |
Answers: 1-B, 2-D, 3-A, 4-C, 5-E
Title: “Build a Simple Bill Calculator Together”
Instructions: In groups of 3–4, choose 3 items with prices and quantities. Write JavaScript expressions that calculate the total. Use at least one * and one +. Add a discount with -=. Print the results in the console. Present your code to the class.
Goal: Practice arithmetic and assignment operators.
Task: Open the browser console. Type at least 6 expressions:
Write down each expression and its result.
Project: “My First Bill Calculator”
Create a simple bill calculator in the console:
Example:
let price1 = 2500, qty1 = 2; let price2 = 200, qty2 = 3; let price3 = 500, qty3 = 1; let total = (price1 * qty1) + (price2 * qty2) + (price3 * qty3); total -= 500; // discount console.log(total); // 5100
Assignment: Ask a family member who sells goods how they price items. Then write JavaScript code that:
Submit: Your code and a short explanation.
In Module Three, we will learn about comparison, logical, and string operators. We will cover:
To prepare, complete the practical assignment and review the key vocabulary. Practice a few expressions in the browser console. Bring your curiosity!
See you in Module Three!
End of Module Two – Operators & Expressions for Web
“Operators & Expressions for Web” – Learn how JavaScript thinks and calculates
Welcome back, young web coder! In Module One, you learned the basics of operators and expressions. In Module Two, you learned arithmetic and assignment operators.
Now it is time to make JavaScript think. In this module, we will learn about comparison operators (like == and >), logical operators (like && and ||), and string operators (like + for joining text).
These operators are what make a website smart. They help a login page check if a password is correct. They help a shop page show "In Stock" only when items are available. They help a game decide if the player has won.
By the end of this module, you will be able to write JavaScript that compares, decides, and reacts — just like real web apps do.
Let’s begin!
After finishing this module, you will be able to:
Chidi is 14 years old and lives in Port Harcourt. He built a simple login page for his school’s coding club. The page asked for a username and password.
At first, Chidi had a problem. His code accepted every password. Anyone could log in! He said, "I need my page to compare what the user typed to the real password."
His teacher said, "Use the strict equality operator ===."
Chidi wrote:
let entered = "coding4life";
let real = "coding4life";
if (entered === real) {
console.log("Welcome!");
} else {
console.log("Wrong password");
}
The console printed: Welcome!. Chidi was very happy.
Next, he wanted the page to welcome "Admin" or "Member" based on the username. He used the logical OR operator:
let username = "ada";
if (username === "ada" || username === "admin") {
console.log("Hello, leader!");
}
Finally, he wanted to show a greeting. He used string concatenation:
let greeting = "Hello, " + username + "!"; console.log(greeting);
His login page became smarter. It could compare, decide, and respond. Chidi learned that comparison and logical operators are the brains of any website.
Moral of the story: Comparison operators check. Logical operators combine checks. String operators join words. Together, they make websites smart.
Definition: Comparison operators compare two values and return true or false.
Why it is important: They let websites make decisions.
Simple explanation: They answer questions like "Is this bigger?" or "Are these the same?"
Real-life example: A bank checks if a balance is above zero.
School example: A teacher checks if a score is above pass mark.
Home example: A family checks if the shopping total is within budget.
Nigerian example: A trader checks if stock is below reorder level.
Illustration:
Comparison operators return: true or false
Mini summary: Comparison operators check values and give true or false.
Definition: The == operator checks if two values are equal after converting them to the same type.
Why it is important: It is an easy way to compare values quickly.
Simple explanation: == asks "Are these the same?" but it is very forgiving.
Real-life example: A bank checks if a typed PIN equals a stored PIN.
School example: A teacher checks if a score equals 100.
Home example: A family checks if two shopping lists match.
Nigerian example: A trader checks if two prices are the same.
Illustration:
5 == 5 → true "5" == 5 → true (type conversion!) true == 1 → true
Mini summary: == checks equality but converts types first.
Definition: The === operator checks if two values are equal AND have the same type.
Why it is important: It is safer and prevents surprises.
Simple explanation: === asks "Are these the same value and the same type?"
Real-life example: A bank checks if a typed PIN (a number) strictly equals the stored PIN.
School example: A teacher checks if a score (a number) strictly equals a target score.
Home example: A family checks if the quantity (a number) strictly equals 5.
Nigerian example: A trader checks if the price (a number) strictly equals ₦3000.
Illustration:
5 === 5 → true "5" === 5 → false 5 === "5" → false
Mini summary: === checks equality and type. Always prefer ===.
Definition: != checks if two values are not equal. !== checks if they are not equal OR not the same type.
Why it is important: Used to reject wrong values.
Simple explanation: They are the "opposite" of equality checks.
Real-life example: A bank rejects a wrong PIN.
School example: A teacher rejects a wrong answer.
Home example: A family rejects a wrong shopping item.
Nigerian example: A trader rejects a wrong price.
Illustration:
5 != 3 → true 5 != 5 → false "5" !== 5 → true
Mini summary: != and !== check if values are different. !== is stricter.
Definition: > checks if the left value is greater. < checks if it is less.
Why it is important: Used to compare numbers.
Simple explanation: They are the "bigger" and "smaller" checks.
Real-life example: A bank checks if a withdrawal is greater than the balance.
School example: A teacher checks if a score is greater than 50.
Home example: A family checks if the bill is less than the budget.
Nigerian example: A trader checks if stock is less than 10.
Illustration:
10 > 5 → true 10 < 5 → false 7 > 7 → false
Mini summary: > and < check bigger and smaller.
Definition: >= checks if the left value is greater OR equal. <= checks if it is less OR equal.
Why it is important: Very common in form validation and grading.
Simple explanation: Same as > and <, but includes "equal to".
Real-life example: A bank allows withdrawals up to the balance (<=).
School example: A teacher passes anyone with score >= 50.
Home example: A family keeps spending <= income.
Nigerian example: A trader sells if quantity <= stock.
Illustration:
10 >= 10 → true 10 >= 9 → true 5 <= 5 → true 5 <= 3 → false
Mini summary: >= and <= include the equal case.
Definition: Logical operators combine multiple true/false checks into one.
Why it is important: Real life has more than one condition.
Simple explanation: They are the "and", "or", and "not" of code.
Real-life example: A bank requires you to have an account AND a valid ID.
School example: You can attend the trip if you paid AND brought a permission slip.
Home example: You can go out if you finished chores AND did homework.
Nigerian example: You can buy stock if you have money AND the price is good.
Illustration:
&& AND (both true) || OR (at least one true) ! NOT (flips true to false)
Mini summary: Logical operators combine conditions.
Definition: && returns true only if both sides are true.
Why it is important: It enforces strict conditions.
Simple explanation: && is like saying "you must do both".
Real-life example: A bank checks if you have enough money AND a valid account.
School example: A teacher passes you only if you attended AND submitted all work.
Home example: You can watch TV if you cleaned AND did homework.
Nigerian example: A trader accepts an order if stock is available AND payment is confirmed.
Illustration:
true && true → true true && false → false false && true → false false && false → false
Mini summary: && needs both sides to be true.
Definition: || returns true if at least one side is true.
Why it is important: It gives flexibility.
Simple explanation: || is like saying "either this or that is fine".
Real-life example: A bank accepts a phone number OR an email for contact.
School example: You can submit by email OR by hand.
Home example: You can shop at Market A OR Market B.
Nigerian example: A trader accepts payment by transfer OR cash.
Illustration:
true || true → true true || false → true false || true → true false || false → false
Mini summary: || is true if at least one side is true.
Definition: ! flips a true to false or a false to true.
Why it is important: Used to invert checks.
Simple explanation: ! is like saying "the opposite".
Real-life example: A bank shows "Not available" if a service is !available.
School example: A teacher marks a student absent if !present.
Home example: A family stays home if !sunny.
Nigerian example: A trader does not sell if !inStock.
Illustration:
!true → false !false → true
Mini summary: ! flips true and false.
Definition: Truthy values act like true in logical checks. Falsy values act like false.
Why it is important: They affect how && , ||, and if statements behave.
Simple explanation: Some values "feel" like true or false to JavaScript.
Real-life example: A bank treats an empty balance (0) as a "no" for a loan.
School example: An empty string ("") is treated as no answer.
Home example: An empty shopping list is treated as "nothing to buy".
Nigerian example: A trader treats null prices as "no price".
Illustration:
Falsy values:
false, 0, "", null, undefined, NaN
Truthy values:
"text", 1, -1, [], {}
Mini summary: Some values act like false, others act like true. Learn the list.
Definition: The + operator also joins strings together.
Why it is important: Websites show messages like "Welcome, Ada".
Simple explanation: + glues words together.
Real-life example: A bank says "Dear " + customer + "."
School example: A teacher greets students: "Hello, " + name.
Home example: A family writes "Happy birthday, " + name.
Nigerian example: A trader sends "Your order of " + qty + " items is ready."
Illustration:
"Hello, " + "Ada" → "Hello, Ada" "Total: " + 5000 → "Total: 5000"
Mini summary: The + operator joins strings.
Definition: Template literals use backticks (`) to make joining strings easier.
Why it is important: They are cleaner than using + many times.
Simple explanation: They let you put values inside a sentence directly.
Real-life example: A bank writes: `Dear ${name}, your balance is ${balance}`.
School example: A teacher writes: `${name} scored ${score}`.
Home example: A family writes: `We have ${count} eggs left.`
Nigerian example: A trader writes: `Your order costs ₦${price}.`
Illustration:
let name = "Ada";
let score = 90;
`Hello, ${name}! Your score is ${score}.`
Mini summary: Template literals use backticks and ${ } for clean strings.
Definition: Mistakes happen. Knowing them helps you avoid them.
Why it is important: Wrong comparisons give wrong decisions.
Simple explanation: Like using the wrong key on a lock.
Real-life example: A bank using == instead of === can accept "5" as 5.
School example: A teacher using = instead of === gives the wrong grade.
Home example: A family using || instead of && accepts the wrong list.
Nigerian example: A trader using < instead of <= misses a sale.
Table of common mistakes:
| Mistake | What Happens | How to Fix |
|---|---|---|
| Using == instead of === | Wrong type accepted | Use === |
| Using = instead of === | Assigns value | Use === in conditions |
| Confusing && and || | Wrong logic | Read conditions aloud |
| Not checking truthy/falsy | Wrong branch | Test with console |
| Forgetting backticks | String error | Use ` ` for template literals |
| Missing $ before { } | Wrong output | Write ${value} |
Mini summary: Common mistakes: == vs ===, && vs ||, and forgotten backticks.
Definition: Best practices are good habits that make logic clear and safe.
Why it is important: Good habits prevent bugs and confusion.
Simple explanation: Like a clean desk — easier to think.
Real-life example: A bank writes clean conditions.
School example: A student writes clear if-statements.
Home example: A family writes clear shopping rules.
Nigerian example: A business writes clear code.
List of best practices:
Mini summary: Best practices: use ===, clear names, and test often.
You now know how to compare and combine values.
What you learned:
Next steps: In Module Four, you will learn advanced operators and complete your certification project.
Illustration:
Your Learning Journey:
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
Mini summary: You now have a full logic toolkit. Time to learn advanced operators!
| Word | Simple Definition |
|---|---|
| Comparison Operator | Checks two values and returns true/false. |
| Equality (==) | Checks equal after type conversion. |
| Strict Equality (===) | Checks equal value and type. |
| Not Equal (!=) | Checks if values are different. |
| Strict Not Equal (!==) | Checks if values or types differ. |
| Greater Than (>) | Checks if left is bigger. |
| Less Than (<) | Checks if left is smaller. |
| Greater Than or Equal (>=) | Bigger or same. |
| Less Than or Equal (<=) | Smaller or same. |
| Logical AND (&&) | Both must be true. |
| Logical OR (||) | At least one must be true. |
| Logical NOT (!) | Flips true and false. |
| Truthy | Values that act like true. |
| Falsy | Values that act like false. |
| Template Literal | String using backticks and ${ }. |
10 > 5 in the console.true.10 < 5 and see false.5 === 5 and see true."5" === 5 and see false."5" == 5 which gives true.age >= 18 and hasID.age >= 18 && hasID.hasEmail or hasPhone.hasEmail || hasPhone.balance >= amount for transfers.score >= 50 to pass.stock <= 10 to reorder.price && quantity to check before selling.amount > 0 && isVerified to send money.score >= 100 means you win.money >= price means you can buy.toys !== 0 means you still have toys.isHungry && hasFood means feed the pet.pages <= 10 means almost done.money >= total means you can pay.expenses <= income means safe.hour < 12 means morning.water === 2 means add water.distance > 100 means take the bus.=== equal value + type !== not equal value + type > greater than < less than >= greater or equal <= less or equal
A && B → true only if both true A || B → true if at least one true
Falsy: false, 0, "", null, undefined, NaN Truthy: everything else
`Hello, ${name}!`
name = "Ada"
→ "Hello, Ada!"
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
| Expression | == result | === result |
|---|---|---|
| 5 == 5 | true | true |
| "5" == 5 | true | false |
| 0 == false | true | false |
| null == undefined | true | false |
| A | B | A && B | A || B |
|---|---|---|---|
| true | true | true | true |
| true | false | false | true |
| false | true | false | true |
| false | false | false | false |
| Operator | Meaning | Example |
|---|---|---|
| === | Equal value & type | 5 === 5 |
| !== | Not equal value & type | 5 !== "5" |
| > | Greater than | 10 > 5 |
| < | Less than | 5 < 10 |
| >= | Greater or equal | 10 >= 10 |
| <= | Less or equal | 5 <= 5 |
| Method | Example |
|---|---|
| + operator | "Hi " + name |
| Template literal | `Hi ${name}` |
Lesson 1: Comparison operators check values and return true/false.
Lesson 2: == checks equality with type conversion.
Lesson 3: === checks equality and type — safer.
Lesson 4: != and !== check if values differ.
Lesson 5: > and < compare bigger and smaller.
Lesson 6: >= and <= include equal.
Lesson 7: Logical operators combine conditions.
Lesson 8: && needs both sides true.
Lesson 9: || is true if at least one side is true.
Lesson 10: ! flips true and false.
Lesson 11: Truthy/falsy affect logical results.
Lesson 12: + joins strings.
Lesson 13: Template literals use backticks and ${ }.
Lesson 14: Common mistakes: == vs ===, && vs ||.
Lesson 15: Best practices: use ===, clear names, test often.
Lesson 16: You now have a full logic toolkit.
Congratulations! You have finished Module Three of the Operators & Expressions for Web course. You learned comparison operators (==, ===, !=, !==, >, <, >=, <=), logical operators (&&, ||, !), truthy and falsy values, and string operators (+ and template literals). You learned common mistakes and best practices. Most importantly, you can now write JavaScript that decides, reacts, and displays dynamic content. In the next module, you will learn advanced operators and complete your certification project.
Match the operator to its meaning.
| Operator | Meaning |
|---|---|
| 1. === | A. Logical OR |
| 2. !== | B. Strict equality |
| 3. && | C. Strict not equal |
| 4. || | D. Greater than |
| 5. > | E. Logical AND |
Answers: 1-B, 2-C, 3-E, 4-A, 5-D
Title: “Build a Login Check Together”
Instructions: In groups of 3–4, write JavaScript that checks a username and password against fixed values. Use === for both. Show a welcome message using template literals. Present to the class.
Goal: Practice comparisons, logic, and strings.
Task: In the browser console, type at least 6 examples:
Write down each and its result.
Project: “My First Login Check”
Create a small login check in JavaScript:
Example:
let user = "ada";
let pass = "1234";
let enteredUser = "ada";
let enteredPass = "1234";
if (enteredUser === user && enteredPass === pass) {
console.log(`Welcome, ${user}!`);
} else {
console.log("Wrong login");
}
Assignment: Ask a family member about a rule they use (e.g., shopping budget, chores). Then write JavaScript that:
Submit: Your code and a short explanation.
In Module Four, we will learn advanced operators and complete the certification project. We will cover:
To prepare, complete the practical assignment and review the key vocabulary. Practice a few comparisons in the console. Bring your curiosity!
See you in Module Four!
End of Module Three – Operators & Expressions for Web
“Operators & Expressions for Web” – Learn how JavaScript thinks and calculates
Welcome to the final module, young web coder! You have come a very long way. In Module One, you learned what operators and expressions are. In Module Two, you learned arithmetic and assignment operators. In Module Three, you learned comparison, logical, and string operators.
Now it is time to add the final layer: advanced operators and your certification project. You will learn about short, powerful operators that make your code cleaner and smarter: the ternary operator, nullish coalescing, optional chaining, and the spread and rest operators. You will also learn about typeof, in, and instanceof.
Think of this module as learning "power moves" in a video game. Once you know them, you can write less code and do more. At the end, you will build a real web project using everything you learned.
Let’s begin!
After finishing this module, you will be able to:
Tunde is 15 years old and lives in Ibadan. He was building a small website to help his teacher record exam scores. The website needed to show "Pass" or "Fail" based on a student’s score.
At first, he wrote it with a big if-else block:
if (score >= 50) {
result = "Pass";
} else {
result = "Fail";
}
His teacher said, "Can you make it shorter?" Tunde learned about the ternary operator. He rewrote it as:
result = score >= 50 ? "Pass" : "Fail";
His teacher smiled. "Much better!"
Next, Tunde wanted to show a message like "Hello [name]" or "Hello Guest" if no name was entered. He first used if-else. Then he learned about nullish coalescing:
message = "Hello " + (name ?? "Guest");
He also learned about optional chaining when his data came from an API. Sometimes a student might not have an email yet, so he wrote:
email = student?.contact?.email;
His code never broke again — even when some data was missing.
Finally, Tunde learned the spread operator to combine two lists of students into one:
allStudents = [...classA, ...classB];
At the end of the day, his small web app was clean, short, and worked beautifully. His teacher said, "You have become a real JavaScript expert!"
Tunde smiled. Advanced operators had made his code easier and smarter.
Moral of the story: Advanced operators let you do more with less code. They make your programs shorter, safer, and easier to read.
Definition: The ternary operator is a short way to write an if-else decision in one line.
Why it is important: It makes your code cleaner and shorter.
Simple explanation: It is like asking "Yes or No?" and giving two answers.
Real-life example: A bank shows "Adult" or "Minor" based on age.
School example: A teacher shows "Pass" or "Fail" based on score.
Home example: A family shows "Rainy" or "Sunny" based on weather.
Nigerian example: A trader shows "Buy" or "Wait" based on price.
Illustration:
condition ? valueIfTrue : valueIfFalse Example: score >= 50 ? "Pass" : "Fail"
Step-by-step:
Mini summary: The ternary operator is a short if-else in one line.
Definition: In real code, ternary operators often appear in templates, forms, and messages.
Why it is important: It keeps code readable when the choice is simple.
Simple explanation: It is like a shortcut in a video game.
Real-life example: A bank shows "Approved" or "Pending" on a loan.
School example: A teacher shows "Present" or "Absent".
Home example: A family shows "Open" or "Closed" for the shop.
Nigerian example: A trader shows "In Stock" or "Sold Out".
Illustration:
let status = isOpen ? "Open" : "Closed"; let greeting = hour < 12 ? "Good morning" : "Good afternoon";
Step-by-step:
Mini summary: Use ternary operators for short, simple decisions.
Definition: The nullish coalescing operator ( ?? ) gives a fallback value when the main value is null or undefined.
Why it is important: It prevents errors when data is missing.
Simple explanation: It is like saying, "If this is empty, use that instead."
Real-life example: A bank shows "Unknown" if a customer’s name is missing.
School example: A teacher shows "No score" if a student is missing.
Home example: A family shows "Guest" if no name is entered.
Nigerian example: A trader shows "No price" if a product has no price set.
Illustration:
let name = enteredName ?? "Guest"; let price = productPrice ?? 0;
Step-by-step:
Mini summary: The ?? operator gives a safe fallback for missing values.
Definition: The OR operator ( || ) also gives a fallback, but it triggers on any "falsy" value, not just null or undefined.
Why it is important: Using the wrong one can cause bugs, especially with 0 or "".
Simple explanation: || triggers on many "empty" things. ?? triggers only on truly missing things.
Real-life example: A bank shows "0" for a customer with zero balance, not "Not available".
School example: A teacher shows "0" for a score of zero, not "No score".
Home example: A family shows "0" for items sold, not "No items".
Nigerian example: A trader shows "₦0" for a free product, not "No price".
Illustration:
0 || "default" → "default" (wrong for numbers) 0 ?? "default" → 0 (correct)
Step-by-step:
Mini summary: Use ?? when 0 or empty strings are valid values.
Definition: Optional chaining ( ?. ) lets you safely access properties inside objects that might be missing.
Why it is important: It prevents your code from crashing.
Simple explanation: It is like asking, "Does this exist? If yes, continue. If no, stop."
Real-life example: A bank checks a customer’s phone before sending an SMS.
School example: A teacher checks a student’s email before sending notes.
Home example: A family checks a relative’s address before sending a card.
Nigerian example: A trader checks a product’s price before calculating total.
Illustration:
student?.contact?.email If student is undefined → returns undefined (no crash)
Step-by-step:
Mini summary: Optional chaining (?.) keeps your code safe when data is missing.
Definition: The spread operator ( ... ) "spreads" the items of an array or object into another.
Why it is important: It makes copying and combining easy.
Simple explanation: It is like pouring all the items from one bag into another bag.
Real-life example: A bank combines two customer lists.
School example: A teacher combines two class lists.
Home example: A family combines two shopping lists.
Nigerian example: A trader combines stock from two shops.
Illustration:
const all = [...classA, ...classB];
const person = { ...ada, city: "Enugu" };
Step-by-step:
Mini summary: The spread operator spreads values into new arrays or objects.
Definition: The rest operator ( ... ) collects many values into one array.
Why it is important: It lets functions take unlimited arguments.
Simple explanation: It is like gathering scattered toys into one box.
Real-life example: A bank accepts any number of deposits.
School example: A teacher collects scores for any number of tests.
Home example: A family collects any number of shopping items.
Nigerian example: A trader adds up any number of items to a cart.
Illustration:
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10
Step-by-step:
Mini summary: The rest operator collects values into an array.
Definition: typeof tells you what kind of value something is.
Why it is important: It helps you check data before using it.
Simple explanation: typeof is like asking "What is this?"
Real-life example: A bank checks if a value is a number before calculating interest.
School example: A teacher checks if a score is a number before grading.
Home example: A family checks if a price is a number before budgeting.
Nigerian example: A trader checks if a quantity is a number before selling.
Illustration:
typeof "Hello" → "string"
typeof 42 → "number"
typeof true → "boolean"
typeof {} → "object"
typeof [] → "object" (special case)
Mini summary: typeof tells you the data type of a value.
Definition: The in operator checks if a property exists in an object.
Why it is important: It helps you avoid missing data errors.
Simple explanation: It is like asking, "Is this key inside the box?"
Real-life example: A bank checks if a customer record has an email field.
School example: A teacher checks if a student record has a phone field.
Home example: A family checks if a recipe has a sugar field.
Nigerian example: A trader checks if a product has a price field.
Illustration:
"email" in customer → true or false "price" in product → true or false
Mini summary: The in operator checks if a property exists in an object.
Definition: instanceof checks if an object was created by a certain class or constructor.
Why it is important: It confirms what type of object you have.
Simple explanation: It is like asking, "Was this made by this factory?"
Real-life example: A bank checks if an object is a Date.
School example: A teacher checks if an object is a Student object.
Home example: A family checks if an object is a Recipe.
Nigerian example: A trader checks if an object is a Product.
Illustration:
new Date() instanceof Date → true
[] instanceof Array → true
{} instanceof Object → true
Mini summary: instanceof tells you what class an object came from.
Definition: Bitwise operators work on the binary form (1s and 0s) of numbers.
Why it is important: They are fast, but mostly used in advanced code.
Simple explanation: It is like working with the smallest pieces of a number.
Real-life example: A bank uses bitwise flags for account settings.
School example: A teacher uses flags to mark which students are present.
Home example: A family uses flags for chores done or not done.
Nigerian example: A trader uses flags for "paid or unpaid" orders.
Illustration:
5 & 3 → 1 5 | 3 → 7 5 ^ 3 → 6 ~5 → -6 5 << 1 → 10 5 >> 1 → 2
Mini summary: Bitwise operators work on the binary form of numbers. Beginner coders rarely need them.
Definition: You can combine operators to write short, powerful code.
Why it is important: It shows real-world coding skill.
Simple explanation: It is like using several power moves in a game.
Real-life example: A bank formats a greeting using ternary and ??.
School example: A teacher shows status using ternary and ?.
Home example: A family shows a note using ?? and ?.
Nigerian example: A trader shows a price using ?? and ?.
Illustration:
const display = user?.name ?? "Guest"; const status = score >= 50 ? "Pass" : "Fail"; const label = price > 0 ? "₦" + price : "Free";
Mini summary: Combining operators makes powerful, clean code.
Definition: Mistakes happen. Knowing them helps you avoid them.
Why it is important: Advanced operators can cause tricky bugs.
Simple explanation: Like pressing the wrong button on a game controller.
Real-life example: A bank uses || instead of ?? and shows "0" as "Not available".
School example: A teacher uses = instead of === and gets wrong results.
Home example: A family uses ?. incorrectly and hides real errors.
Nigerian example: A trader uses ?? when || was needed and misses a valid price.
Table of common mistakes:
| Mistake | What Happens | How to Fix |
|---|---|---|
| Using || instead of ?? | Zero and "" treated as missing | Use ?? for valid zeros |
| Using = instead of === | Assignment instead of comparison | Use === for comparison |
| Overusing ?. | Hides real bugs | Only use when data may be missing |
| Nested ternaries | Hard to read | Use if-else for complex logic |
| Forgetting () in spread | Syntax error | Use ... correctly |
| Confusing rest and spread | Wrong data | Remember context |
Mini summary: Common mistakes: using || instead of ??, overusing ?., and nesting ternaries.
Definition: Best practices are good habits that make your code clean and safe.
Why it is important: Good habits prevent bugs and make code easier for others to read.
Simple explanation: Like keeping your room clean — easier to find things.
Real-life example: A bank writes clean, safe code.
School example: A student writes neat, easy-to-read code.
Home example: A family keeps a shared budget sheet tidy.
Nigerian example: A business writes clean code that other developers can maintain.
List of best practices:
Mini summary: Best practices: use strict equality, ?? for zeros, and keep code readable.
Your certification project brings everything together.
Project idea: Build a small interactive web page using every kind of operator you learned.
Steps:
Illustration:
Project Flow:
Idea
|
V
Plan
|
V
HTML + CSS + JS
|
V
Test
|
V
Present 🎉
Mini summary: The certification project uses every operator you learned.
You have learned a lot. Let’s review.
Module One: What operators and expressions are.
Module Two: Arithmetic and assignment operators.
Module Three: Comparison, logical, and string operators.
Module Four: Advanced operators and certification project.
Illustration:
Your Skills: +----------------+ | Expressions | +----------------+ +----------------+ | Arithmetic | +----------------+ +----------------+ | Comparison | +----------------+ +----------------+ | Advanced | +----------------+ +----------------+ | Certification | +----------------+
Mini summary: You have mastered all levels of JavaScript operators.
Your certification is proof that you are a Web Operators Expert.
Next steps:
Illustration:
Certification
|
V
Portfolio
|
V
Share with others
|
V
Help others learn
|
V
Apply skills
|
V
Web Operators Expert 🎉
Mini summary: Your certification opens doors to more advanced JavaScript.
| Word | Simple Definition |
|---|---|
| Ternary | Short if-else in one line. |
| Nullish Coalescing (??) | Fallback for null or undefined. |
| Optional Chaining (?.) | Safe access to possibly missing data. |
| Spread (...) | Spreads values into a new array or object. |
| Rest (...) | Collects many values into one array. |
| typeof | Tells the data type of a value. |
| in | Checks if a property exists in an object. |
| instanceof | Checks the class of an object. |
| Bitwise | Works on binary digits (1s and 0s). |
| Falsy | Values treated as false in logic. |
| Truthy | Values treated as true in logic. |
| Bug | A mistake in code. |
| Strict Equality (===) | Checks value AND type. |
| Immutable | Cannot be changed. |
| Fallback | Backup value. |
score >= 50
/ \
Yes No
| |
"Pass" "Fail"
value ?? fallback value is null/undefined → use fallback otherwise → use value
user?.profile?.name
|
V
Returns undefined if any part is missing
Spread: [ ...a, ...b ] (out) Rest: (...values) (in)
Module 1: Foundations
|
V
Module 2: Arithmetic & Assignment
|
V
Module 3: Comparison & Logic
|
V
Module 4: Advanced & Certification
|
V
Web Operators Expert 🎉
| Value | ?? Result | || Result |
|---|---|---|
| 0 | 0 | Fallback |
| "" | "" | Fallback |
| null | Fallback | Fallback |
| undefined | Fallback | Fallback |
| Feature | Spread | Rest |
|---|---|---|
| Direction | Outward | Inward |
| Use | Copy/combine | Collect |
| Example | [...a, ...b] | function(...args) |
| Value | typeof |
|---|---|
| "hi" | string |
| 5 | number |
| true | boolean |
| [] | object |
| null | object |
| Operator | Use Case |
|---|---|
| ? | Quick if-else |
| ?? | Safe fallback |
| ?. | Safe access |
| ... | Spread / rest |
| in | Check property |
| instanceof | Check class |
Lesson 1: Ternary operator is a short if-else in one line.
Lesson 2: Ternary is best for simple true/false decisions.
Lesson 3: ?? gives a fallback for null or undefined.
Lesson 4: Use ?? instead of || for valid zeros and empty strings.
Lesson 5: ?. safely accesses possibly missing data.
Lesson 6: Spread copies and combines arrays and objects.
Lesson 7: Rest collects values into one array.
Lesson 8: typeof tells you the type of a value.
Lesson 9: in checks if a property exists in an object.
Lesson 10: instanceof checks the class of an object.
Lesson 11: Bitwise operators work on binary numbers.
Lesson 12: Combining operators makes short, powerful code.
Lesson 13: Common mistakes: || vs ??, too many ternaries.
Lesson 14: Best practices: strict equality, ?? for zeros, keep it readable.
Lesson 15: Certification project uses every operator.
Lesson 16: Review of all four modules.
Lesson 17: Certification opens doors to more JavaScript.
Congratulations! You have finished Module Four and the entire Operators & Expressions for Web course. You learned the ternary operator, nullish coalescing, optional chaining, spread, rest, typeof, in, instanceof, and even bitwise operators. You learned common mistakes and best practices. You prepared and completed your certification project. Most importantly, you are now a Web Operators Expert. Keep coding, keep learning, and keep building!
Match the operator to its meaning.
| Operator | Meaning |
|---|---|
| 1. ? : | A. Safe access to missing data |
| 2. ?? | B. Short if-else |
| 3. ?. | C. Fallback for null/undefined |
| 4. ... (in front) | D. Collect values |
| 5. ... (in function) | E. Spread values |
Answers: 1-B, 2-C, 3-A, 4-E, 5-D
Title: “Build a Mini App Together”
Instructions: In groups of 3–4, choose a small web idea (calculator, quiz, form). Plan which operators you will use. Write at least one example of ternary, ??, ?., spread, and rest. One person writes HTML, one writes JS, one tests, one presents. Share with the class.
Goal: Practice using advanced operators in a real project.
Task: Write short JavaScript code that uses:
Hint: Keep each example to 2–3 lines.
Project: “My First Advanced Operators Page”
Build a small web page with JavaScript that:
Example:
let score = 65;
console.log(score >= 50 ? "Pass" : "Fail"); // Pass
let user = { name: "Ada" };
console.log(user?.contact?.email ?? "No email");
let a = [1, 2], b = [3, 4];
console.log([...a, ...b]); // [1,2,3,4]
Assignment: Build the certification project — a small interactive web page that uses at least six different operators from the entire course. Include:
Write clean code with comments and present it to your class.
Submit: Your HTML, CSS, and JavaScript files with your presentation.
Congratulations! You have completed the entire Operators & Expressions for Web course. Here are some next steps you can take:
Remember, this is just the beginning. You are now a Web Operators Expert. Keep coding, keep learning, and keep building!
End of Module Four – Operators & Expressions for Web
🎉 Congratulations! You have completed the entire Operators & Expressions for Web course! 🎉