JavaScript Control Flow & Strings

Topic 8: If Statements

If statements run code only when a condition is true — the foundation of all decision-making in JavaScript

if (condition) {
    // runs if condition is true
} else if (anotherCondition) {
    // runs if first was false, this is true
} else {
    // runs if ALL above conditions were false
}

== vs === (very important!)
• == checks value only — "5" == 5 is true (ignores type)
• === checks value AND type — "5" === 5 is false
Always prefer === in real code to avoid unexpected bugs!

If Statements — Example:

Enter your age:

Result will appear here...

How the age checker works:

age >= 100 → Too old message
age == 0 → Just born message
age >= 18 → Can enter
age < 0 → Invalid age
else → Must be 18+

Examples in JS File:

Example 1: Age gate with if, else if, and else
Example 2: All comparison operators demonstrated

Topic 9: Checked Property

The .checked property reads whether a checkbox or radio button is currently selected — returns true or false

Checkbox vs Radio Button:
• Checkbox — can be checked or unchecked independently. Use for yes/no toggles
• Radio button — grouped by name attribute, only one in the group can be selected at a time
• Both use element.checked to read their state

// Checkbox
if (myCheckBox.checked) { ... }

// Radio buttons — check each one individually
if (visaBtn.checked) { ... }
else if (masterCardBtn.checked) { ... }

Checked Property — Example:

Subscribe to newsletter

Select Payment Method:

Visa
MasterCard
PayPal

Subscription status will appear here...

Payment method will appear here...

Examples in JS File:

Example 1: Reading .checked on a checkbox
Example 2: Reading radio buttons with else if chain

Topic 10: Ternary Operator

A compact shortcut for simple if/else statements — assigns a value based on a condition in one line

Syntax: condition ? valueIfTrue : valueIfFalse

Think of it as: "Is this true? If yes, use this. If no, use that."
The ? means "if true" and the : means "otherwise"

// Regular if/else:
let greeting;
if (time < 12) { greeting = "Good morning!"; }
else             { greeting = "Good afternoon!"; }

// Same thing with ternary (one line):
let greeting = time < 12 ? "Good morning!" : "Good afternoon!";

Style	Code	Best For
if/else	`if(x){...} else{...}`	Complex logic, multiple lines
Ternary	`x ? a : b`	Simple one-value decisions

⚠️ Don't overuse ternary:
Ternary is great for simple cases. But chaining multiple ternaries together makes code very hard to read. If the logic is complex, use a regular if/else instead.

Examples in JS File:

Example 1: Greeting based on time — time < 12 ? "Good morning!" : "Good afternoon!"
Example 2: Student status check with isStudent
Example 3: Discount calculation — purchaseAmount >= 100 ? 10 : 0

Topic 11: Switch Statements

Switch compares one value against many possible cases — cleaner than a long chain of else if statements

switch (value) {
    case 1:
        // runs if value === 1
        break;  // stops here, exits switch
    case 2:
        // runs if value === 2
        break;
    default:
        // runs if NO cases matched (like else)
}

Important — always use break!
Without break, JavaScript "falls through" and runs every case below the match. This is almost always a bug. Add break at the end of every case.

Keyword	Purpose
`switch(value)`	The value being compared against all cases
`case x:`	Runs if `value === x`
`break`	Exits the switch — prevents fall-through to next case
`default:`	Runs if no case matched — like `else`

switch(true) trick:
Instead of switch(value), use switch(true) to write conditions in each case — useful for range checks like letter grades.

switch(true) {
    case score >= 90: letterGrade = "A"; break;
    case score >= 80: letterGrade = "B"; break;
    default:         letterGrade = "F";
}

Examples in JS File:

Example 1: Day of the week — switch(day) with 7 cases + default
Example 2: Letter grade — switch(true) with range conditions

Topic 12: String Methods

Built-in functions that let you read, transform, and search through strings

What are string methods?
Methods are functions attached to a value. String methods let you manipulate text without writing complex logic yourself. Call them with string.methodName()

Reading / Searching

Method	What It Does	Example	Result
`.length`	Number of characters	`"Umer".length`	`4`
`.charAt(i)`	Character at index	`"Umer".charAt(0)`	`"U"`
`.indexOf(x)`	First position of x	`"Umer".indexOf("m")`	`1`
`.lastIndexOf(x)`	Last position of x	`"Umer Azmi".lastIndexOf("m")`	`7`
`.includes(x)`	Contains x? true/false	`"Umer".includes("me")`	`true`
`.startsWith(x)`	Starts with x? true/false	`"Umer".startsWith("U")`	`true`
`.endsWith(x)`	Ends with x? true/false	`"Umer".endsWith("r")`	`true`

Transforming

Method	What It Does	Example	Result
`.toUpperCase()`	All caps	`"umer".toUpperCase()`	`"UMER"`
`.toLowerCase()`	All lowercase	`"UMER".toLowerCase()`	`"umer"`
`.trim()`	Remove start/end spaces	`" hi ".trim()`	`"hi"`
`.replaceAll(a, b)`	Replace all occurrences	`"1-2-3".replaceAll("-", "")`	`"123"`
`.repeat(n)`	Repeat string n times	`"ha".repeat(3)`	`"hahaha"`
`.padStart(n, x)`	Pad start until length n	`"5".padStart(3, "0")`	`"005"`
`.padEnd(n, x)`	Pad end until length n	`"5".padEnd(3, "0")`	`"500"`

Examples in JS File:

Example 1: All reading/searching methods on "Umer Azmi"
Example 2: All transforming methods on "123-456-7890"

Topic 13: String Slicing

Extract a portion of a string by specifying a start and end index

Syntax: string.slice(start, end)

• start — index to begin (inclusive)
• end — index to stop (exclusive — this character is NOT included)
• If you omit end, it slices to the end of the string

const name = "Umer Azmi";
//            0123 4567  ← index positions

name.slice(0, 4);  // "Umer" (index 0 to 3)
name.slice(5);     // "Azmi" (index 5 to end)
name.slice(5, 9);  // "Azmi" (index 5 to 8)

Combining .indexOf() with .slice():
A powerful pattern — find a character's position dynamically, then slice around it:

email.slice(0, email.indexOf("@")) → gets the username from any email
email.slice(email.indexOf("@") + 1) → gets the domain from any email

Expression	On `"UmerAzmi@gmail.com"`	Result
`.indexOf("@")`	Position of @	`8`
`.slice(0, 8)`	Everything before @	`"UmerAzmi"`
`.slice(9)`	Everything after @	`"gmail.com"`

Examples in JS File:

Example 1: Extracting first and last name from "Umer Azmi" using fixed indices
Example 2: Extracting username and domain from "UmerAzmi@gmail.com" using .indexOf()

Topic 14: Method Chaining

Calling multiple methods one after another in a single line — each method's output feeds into the next

How it works:
Each method returns a new value. You can immediately call another method on that returned value instead of storing it in a variable first.

string.trim().toUpperCase().slice(0, 5)
Step 1: trim() removes spaces → Step 2: toUpperCase() capitalizes → Step 3: slice(0,5) cuts first 5 chars

// Without chaining — 4 lines
let input = userInput.trim();
let first = input.charAt(0).toUpperCase();
let rest  = input.slice(1).toLowerCase();
let result = first + rest;

// With chaining — 1 line, same result
let result = userInput.trim().charAt(0).toUpperCase()
           + userInput.trim().slice(1).toLowerCase();

⚠️ When NOT to chain:
Method chaining is shorter but harder to debug — if something goes wrong, it's hard to tell which method caused it. Keep chains short and simple. If the logic is complex, break it into separate lines.

Method Chaining — Example:

Enter a username to format:

Formatted result will appear here...

Capitalizes the first letter and lowercases the rest — e.g. "jOHN dOE" → "John doe"

Examples in JS File:

Example 1: Same formatting logic written without chaining (step by step)
Example 2: Same result with method chaining in one line