📖 Program Flow: Code Structure

The Story of the Invisible Notes 📝

Imagine you’re writing a recipe for your favorite cookies. Sometimes you want to write little notes to yourself like “Mom’s secret ingredient!” or “Don’t forget to preheat!” These notes help YOU remember things, but they’re not actual cooking steps.

JavaScript has the same idea! You can write notes in your code that the computer completely ignores. These notes are called comments.

🗨️ Comments: Your Secret Notes

What Are Comments?

Comments are messages you write for humans (yourself or other programmers). The computer skips right over them!

Think of it like this:

• 🍪 Recipe step: “Mix flour and sugar” → The baker DOES this
• 📝 Your note: “Grandma taught me this trick” → The baker IGNORES this

Two Ways to Write Comments

1. Single-Line Comments → Use //

// This is a comment
let cookies = 12;  // I made a dozen!

2. Multi-Line Comments → Use /* */

/*
  This is a longer note.
  It can span many lines!
  Perfect for big explanations.
*/
let recipe = "chocolate chip";

Why Use Comments?

⚡ Statements vs Expressions

Here’s a fun way to remember this:

Statements are like complete sentences → They DO something Expressions are like math problems → They PRODUCE a value

Expressions: They Give You Something Back

An expression is any code that results in a value:

5 + 3        // → 8
"Hi" + "!"   // → "Hi!"
age > 18     // → true or false

Think of expressions like questions that always have an answer!

Statements: They Take Action

A statement is a complete instruction that performs an action:

let name = "Alex";      // Creates a box
if (happy) { dance(); } // Makes a decision
for (i=0; i<3; i++) {}  // Repeats something

The Key Difference

graph TD
    A[Your Code] --> B{Does it produce a value?}
    B -->|YES| C[Expression 🧮]
    B -->|NO, it does something| D[Statement 📋]
    C --> E["5 + 3 → gives 8"]
    D --> F["let x = 5 → creates x"]

Quick Test:

• 7 * 2 → Expression (gives 14)
• let score = 100; → Statement (creates score)
• score > 50 → Expression (gives true/false)

🪄 Automatic Semicolon Insertion (ASI)

The Invisible Helper

In JavaScript, semicolons (;) mark the end of statements, like periods end sentences.

let a = 5;
let b = 10;

But JavaScript has a secret helper called ASI (Automatic Semicolon Insertion). If you forget semicolons, JavaScript tries to add them for you!

let a = 5   // No semicolon? JS adds one!
let b = 10  // Same here!

⚠️ When ASI Goes Wrong

Sometimes the helper makes mistakes. Look at this trap:

function getNumber() {
  return
    42
}

JavaScript sees this as:

function getNumber() {
  return;  // ASI added semicolon here!
    42     // This never runs!
}

Result: The function returns undefined instead of 42! 😱

The Safe Way

function getNumber() {
  return 42;  // Keep return and value together!
}

ASI Survival Tips

🔒 Strict Mode: The Rule Enforcer

What Is Strict Mode?

Remember when you were little and your parents said “No cookies before dinner!”? That’s a strict rule.

Strict mode is like having a strict teacher for your JavaScript. It catches mistakes that normal JavaScript would ignore!

How to Turn It On

Add this magic line at the very top of your file:

"use strict";

// Now JavaScript is extra careful!
let x = 10;  // ✅ Works fine
y = 20;      // ❌ ERROR! y wasn't declared

What Strict Mode Catches

graph TD
    A[Strict Mode Catches] --> B[Undeclared Variables]
    A --> C[Duplicate Parameters]
    A --> D[Reserved Words as Names]
    A --> E[Other Mistakes]

    B --> B1["x = 5 → ERROR!"]
    C --> C1["function f#40;a, a#41; → ERROR!"]
    D --> D1["let let = 1 → ERROR!"]

Examples

Without Strict Mode (Sloppy Mode):

oops = "I forgot let!";
// Works, but creates global variable! 🐛

With Strict Mode:

"use strict";
oops = "I forgot let!";
// ReferenceError: oops is not defined ✅

Why Use Strict Mode?

🎯 Quick Summary

🌟 You Did It!

Now you understand the building blocks of JavaScript code structure:

1. ✅ Write comments to help yourself and others
2. ✅ Know that expressions give values, statements take action
3. ✅ Don’t fully trust ASI — add your own semicolons!
4. ✅ Use strict mode to catch bugs early

You’re ready to write cleaner, safer JavaScript! 🚀