Lesson 4: Mastering Code Structure — Semicolons, Comments & "use strict" with challenges!

✅ Concept: Code Structure in JavaScript

JavaScript programs are built using statements, semicolons, comments, and directives like "use strict". These foundational rules affect how the browser interprets and runs your code.

---

✅ 1.1 Statements

A statement performs an action, like showing a message:

alert('Hello, world!');

Multiple statements can be placed in one line using semicolons:

alert('Hello'); alert('World');

But for clarity, they’re usually on separate lines.

---

✅ 1.2 Semicolons

JS tries to guess semicolons using Automatic Semicolon Insertion (ASI).

This works:

alert('Hello')
alert('World')

But not always. Example where semicolon is needed:

alert("Hello")
[1, 2].forEach(alert); // Fails without semicolon!

JS sees it as:

alert("Hello")[1, 2].forEach(alert);

✅ Best Practice: Always use semicolons.

---

✅ 1.3 Comments

Used to explain or temporarily disable code.

Single-line:

// This is a comment
alert('Hello');

Multiline:

/* This is a 
multiline comment */
alert('World');

❌ Nested multiline comments are not allowed.

---

✅ 1.4 "use strict"

This enables modern JavaScript behavior by turning off legacy features.

"use strict";
x = 5; // Error! Variable must be declared

It must appear at the top of your script or function:

"use strict";
// valid here

alert("Hello");
"use strict"; // ❌ Ignored!

---

✅ Visual: JS Code Structure Flow

---

🔹 2. Fill Any Gaps

✅ Hidden Quirks & Details

• ASI fails with square brackets, parentheses, or template literals starting a new line.

• "use strict":

  • Disallows undeclared variables.

  • Throws errors on assignments to read-only properties.

  • Prevents accidental global variable leakage.

• Console behavior: Many browsers don’t apply "use strict" in DevTools console.

• "use strict" in modules and classes is enabled by default.

---

🔹 3. Challenge Me Deeply

✅ Basic

1. Write 3 alerts on separate lines, then combine them into one line using semicolons.

2. Show how removing a semicolon before [ breaks code.

3. Write an inline comment and a multiline comment in a small function.

4. Use "use strict" and try assigning a value to an undeclared variable. What happens?

✅ Intermediate

5. Create a function that logs numbers 1 to 5. Add "use strict" only inside it — test behavior.

6. Disable a piece of code using multiline comments, then enable only part of it.

7. Write code that fails without semicolons because of parentheses or template literals.

8. Demonstrate a bug when "use strict" is placed below other code.

✅ Advanced

9. Create a snippet that uses comments to toggle different log outputs (like a debug switch).

10. Make a file that runs fine without "use strict", then show how enabling it breaks due to silent errors.

🧠 Brain-twister:
How does JavaScript interpret this?

let x = 5
(function() {
  console.log(x)
})();

---

🔹 4. Interview-Ready

✅ Concept-Based

• What is ASI? When can it fail?

• Why is "use strict" important in modern JS?

• Compare single-line vs. multiline comments — when would you use each?

✅ Scenario-Based

• A developer removes all semicolons from a file. The app breaks. Why?

• You placed "use strict" inside a function, but some errors aren’t caught. Why?

• A codebase is littered with uncommented legacy code. What’s your approach?

✅ Debugging-Type

• You get a ReferenceError in "use strict" mode. What could be the reason?

• A commented block still seems to run code. What could cause this?

• Your editor shows an error inside a nested multiline comment — why?

✅ Best Practices

• Always use semicolons to prevent edge-case bugs.

• Place "use strict" at the top of the script or function.

• Comment why something is done, not what the code literally does.

---

🔹 5. Real-World Usage

• Semicolon bugs can crash front-end apps if code is minified improperly.

• "use strict" helps catch silent errors in production.

• Tools like Babel, ESLint, and Prettier enforce these code structure rules.

• Frameworks like React, Angular, and Vue assume strict mode or ES6 modules.

---

🔹 6. Remember Like a Pro

Mnemonics

• S.A.C. → Statements, ASI, Comments.

• “Strict at the Start” — "use strict" must be first!

Visual Tips

• 🔸 Semicolon before [, (, template strings

• 💡 Comment ≠ Code

• 🚫 Nested block comments = Error!

---

🔹 7. Apply It in a Fun Way

✅ Mini-Project: “Code Inspector”

Build a tool that checks if user input JS code:

• Has semicolons at end of each statement.

• Includes "use strict" at top.

• Has comments for every function.

Steps:

1. Create a text area for user code.

2. Use regex to detect missing semicolons or comments.

3. Show a report: “Good practices followed: ✅ or ❌”

4. Optional: Add code formatting using Prettier.

Bonus:

• Let user click “Auto Fix” to add missing semicolons or "use strict"!

---

🧠 Extra Value

• Used in: ESLint, Babel, JS minifiers, browser engines.

• Common Mistakes:

  • Forgetting "use strict" and leaking globals.

  • Assuming newlines = semicolons.

  • Nesting block comments.

• Performance Tip: "use strict" can optimize JS engine parsing by disabling sloppy mode.