javascript-course-chapter-06
Chapter 6: Operators
A complete beginner-friendly lesson about JavaScript operators with explanations, examples, outputs, and fully commented code.
Goal: Understand how JavaScript uses operators to calculate, compare, assign, check conditions, and make decisions.
6.1 Arithmetic
Arithmetic operators are used for math in JavaScript.
They help you add, subtract, multiply, divide, and find remainders.
Beginners use them often in calculators, shopping carts, scores, totals, and games.
Example 1: Basic math operators
// Store two numbers.
let a = 10;
let b = 3;
// Add the numbers.
console.log(a + b);
// Subtract the numbers.
console.log(a - b);
// Multiply the numbers.
console.log(a * b);
// Divide the numbers.
console.log(a / b);
// Output:
// 13
// 7
// 30
// 3.3333333333333335
Explanation:
The plus sign adds, the minus sign subtracts, the star multiplies, and the slash divides.
These operators work with Number values.
Example 2: Remainder operator
// The remainder operator is %.
// It gives what is left after division.
let result = 10 % 3;
console.log(result);
// Output:
// 1
Explanation:
3 goes into 10 three times, which makes 9.
The leftover number is 1, so the output is 1.
6.2 Assignment
Assignment operators put values into variables.
The most common assignment operator is the equal sign.
JavaScript also has shortcut assignment operators like +=, -=, *=, and /=.
Example 1: Basic assignment
// Create a variable and assign a value.
let score = 50;
// Show the value.
console.log(score);
// Output:
// 50
Explanation:
The equal sign does not mean “equal” in math here.
It means put the value 50 inside the variable score.
Example 2: Shortcut assignment
// Start with 10 points.
let points = 10;
// Add 5 more points.
points += 5;
// Show the new value.
console.log(points);
// Output:
// 15
Explanation:
points += 5 means the same as points = points + 5.
It is a shorter way to update a variable.
6.3 Comparison
Comparison operators compare two values.
The result is always a Boolean value: true or false.
They are very important for conditions, login checks, games, forms, and decision making.
Example 1: Greater than and less than
// Compare two numbers.
console.log(10 > 5);
console.log(10 < 5);
// Output:
// true
// false
Explanation:
10 is greater than 5, so the first result is true.
10 is not less than 5, so the second result is false.
Example 2: Strict equality
// Strict equality checks value and type.
console.log(5 === 5);
console.log(5 === "5");
// Output:
// true
// false
Explanation:
=== checks both the value and the data type.
Number 5 and string "5" look similar, but they are different types.
6.4 Logical
Logical operators combine conditions together.
They are used when you need to check more than one rule.
The main logical operators are AND, OR, and NOT.
Example 1: AND operator
// User must be logged in and must be admin.
let isLoggedIn = true;
let isAdmin = true;
// && means AND.
console.log(isLoggedIn && isAdmin);
// Output:
// true
Explanation:
The AND operator returns true only when both sides are true.
Here, both values are true, so the final answer is true.
Example 2: OR operator
// A user can enter if they have a ticket or a pass.
let hasTicket = false;
let hasPass = true;
// || means OR.
console.log(hasTicket || hasPass);
// Output:
// true
Explanation:
The OR operator returns true if at least one side is true.
The user has a pass, so the result is true.
6.5 Bitwise
Bitwise operators work with numbers at the binary level.
Binary means numbers are represented using 0s and 1s.
Beginners do not use bitwise operators every day, but they are useful in low-level programming, flags, permissions, and performance cases.
Example 1: Bitwise AND
// 5 in binary is 0101.
// 3 in binary is 0011.
// Bitwise AND compares each bit.
console.log(5 & 3);
// Output:
// 1
Explanation:
Bitwise AND returns 1 only where both binary positions are 1.
The final result is 1.
Example 2: Bitwise OR
// Bitwise OR returns 1 if either bit is 1.
console.log(5 | 3);
// Output:
// 7
Explanation:
Bitwise OR compares binary digits.
If one side has 1, the result keeps 1 in that position.
6.6 Ternary
The ternary operator is a short way to write a simple if/else decision.
It uses a condition, a value for true, and a value for false.
It is useful when you need to choose one of two values quickly.
Example 1: Adult or child
// Store age.
let age = 18;
// condition ? valueIfTrue : valueIfFalse
let message = age >= 18 ? "Adult" : "Child";
console.log(message);
// Output:
// Adult
Explanation:
The condition checks if age is 18 or more.
Because it is true, JavaScript chooses "Adult".
Example 2: Pass or fail
// Store mark.
let mark = 75;
// Choose message based on mark.
let result = mark >= 50 ? "Pass" : "Fail";
console.log(result);
// Output:
// Pass
Explanation:
If the mark is 50 or higher, the result is Pass.
Otherwise, the result would be Fail.
6.7 Nullish Coalescing
Nullish coalescing uses the ?? operator.
It gives a default value only when the left side is null or undefined.
This is useful when empty strings, 0, or false should still be accepted as real values.
Example 1: Default username
// The username is null.
let username = null;
// If username is null or undefined, use "Guest".
let displayName = username ?? "Guest";
console.log(displayName);
// Output:
// Guest
Explanation:
Because username is null, JavaScript uses the default value "Guest".
If username had a real value, it would use that value instead.
Example 2: Keep zero as a real value
// Zero is a real value.
let score = 0;
// ?? does not replace 0.
let finalScore = score ?? 100;
console.log(finalScore);
// Output:
// 0
Explanation:
The value 0 is not null and not undefined.
So JavaScript keeps 0 instead of using 100.
6.8 Optional Chaining
Optional chaining uses ?. to safely access nested properties.
It helps prevent errors when part of an object does not exist.
This is very useful when working with API data, user profiles, settings, and optional information.
Example 1: Safe object access
// Create a user object.
let user = {
name: "Sara"
};
// Try to access address safely.
console.log(user.address?.city);
// Output:
// undefined
Explanation:
The user object does not have an address.
Optional chaining prevents an error and returns undefined instead.
Example 2: Nested data exists
// Create a user with nested address data.
let student = {
name: "Ali",
address: {
city: "Toronto"
}
};
// Safely access the city.
console.log(student.address?.city);
// Output:
// Toronto
Explanation:
Because address exists, JavaScript continues and reads the city.
Optional chaining is safe and clean.
6.9 Operator Precedence
Operator precedence means the order JavaScript follows when solving expressions.
Some operators run before others, just like multiplication happens before addition in math.
Parentheses are the best way to make the order clear for beginners.
Example 1: Multiplication before addition
// Multiplication happens first.
let result = 10 + 5 * 2;
console.log(result);
// Output:
// 20
Explanation:
JavaScript calculates 5 * 2 first, which equals 10.
Then it adds 10 + 10, so the result is 20.
Example 2: Parentheses change order
// Parentheses happen first.
let result = (10 + 5) * 2;
console.log(result);
// Output:
// 30
Explanation:
JavaScript calculates 10 + 5 first because it is inside parentheses.
Then it multiplies 15 by 2, so the result is 30.
6.10 Short Circuiting
Short circuiting means JavaScript stops checking when it already knows the answer.
With AND, if the first value is false, JavaScript does not need to check the second value.
With OR, if the first value is true, JavaScript does not need to check the second value.
Example 1: OR default value
// Empty string is falsy.
let name = "";
// OR chooses the second value if the first is falsy.
let displayName = name || "Guest";
console.log(displayName);
// Output:
// Guest
Explanation:
The empty string is considered falsy.
So JavaScript skips it and uses "Guest" instead.
Example 2: AND runs only when true
// User login status.
let isLoggedIn = true;
// If isLoggedIn is true, show the message.
isLoggedIn && console.log("Welcome back!");
// Output:
// Welcome back!
Explanation:
Because isLoggedIn is true, JavaScript continues and runs console.log().
If it were false, the message would not print.
Chapter Summary
- Arithmetic operators do math like addition, subtraction, multiplication, and division.
- Assignment operators store and update values inside variables.
- Comparison operators return true or false.
- Logical operators combine multiple conditions.
- Bitwise operators work with binary values.
- The ternary operator is a short form of if/else.
- Nullish coalescing gives defaults only for null or undefined.
- Optional chaining safely reads nested object properties.
- Operator precedence controls which operation runs first.
- Short circuiting stops checking when JavaScript already knows the answer.
