INIT: Advanced JavaScript Course

courses/advanced-javascript/advanced-foundations/introduction.mdx

@@ -0,0 +1,84 @@
+---
+sidebar_position: 1
+title: Introduction to Advanced Foundations
+sidebar_label: Introduction
+description: "Master the core engine mechanics of JavaScript. From the Event Loop to Hoisting, we're going under the hood."
+tags: [javascript, advanced, programming, learning, codeharborhub, foundations]
+---
+
+Ever felt like JavaScript does things that don't quite make sense? That's usually because the "magic" is happening in the engine foundations. This module is designed to pull back the curtain and turn "magic" into **mastery**.
+
+:::tip
+By the end of this module, you won't just write code that works; you'll understand *why* it works and how the browser handles it.
+:::
+
+## Module Roadmap
+
+Before we start coding, let's look at the flow of this module. We move from syntax sugar to the deep architectural roots of the language.
+
+```mermaid
+flowchart TD
+    A[Start: Cleaner Syntax] --> B[Ternary Operators]
+    B --> C[Destructuring]
+    C --> D[Numeric Separators]
+    D --> E[The Engine: Event Loop]
+    E --> F[Hoisting & Temporal Dead Zone]
+    F --> G[Pre-increment vs Post-increment]
+    G --> H[Timing: setTimeout with Params]
+    H --> I[setInterval for Recursion]
+    I --> J[Error Handling in Timed Execs]
+    J --> K[Final Challenge: Stock Price Checker]
+
+
+
+```
+
+## What’s in the Toolbox?
+
+We aren't just looking at `if/else` statements anymore. We are leveling up our syntax and mental models.
+
+<Tabs>
+<TabItem value="syntax" label="Cleaner Syntax" default>
+Learn to write less code but do more.
+* **Ternary Operators:** Deep nesting without the mess.
+* **Destructuring:** Extracting data like a pro.
+* **Numeric Separators:** Making BigInt and large numbers actually readable (e.g., `1_000_000`).
+</TabItem>
+<TabItem value="engine" label="The Engine">
+This is where the real "Advanced" stuff happens:
+* **The Event Loop:** How JS handles concurrency.
+* **Hoisting:** Understanding the Temporal Dead Zone.
+* **Pre-increment vs Post-increment:** Small symbols, big differences.
+</TabItem>
+<TabItem value="async" label="Timing">
+Mastering the clock:
+* `setTimeout` with parameters.
+* `setInterval` for recursive tasks.
+* Error handling within timed executions.
+</TabItem>
+</Tabs>
+
+## Try it Out!
+
+Before we dive into the docs, play around with this demo. It combines **Ternary Logic**, **Timing**, and **Template Literals**—all things we will master in this section.
+
+<CodePenEmbed 
+  title="Advanced Foundations Introduction"
+  penId="jErZKmj"
+/>
+
+:::info
+**Try this:** Change the "Status" logic in the JS panel of the Pen to see how the UI reacts!
+:::
+
+## The Final Boss
+
+At the end of this module, you'll face the **Stock Price Checker Super Challenge**. You'll need to combine timing, logic, and error handling to build a real-time simulation.
+
+:::important
+Don't skip the challenges! Advanced JavaScript is a muscle—you have to flex it to grow it.
+:::
+
+:::info Note on math
+You might see some complex logic later. Don't worry, we use KaTeX to keep things clear, like calculating growth: $G = \frac{V_{new} - V_{old}}{V_{old}}$.
+:::

courses/advanced-javascript/advanced-foundations/ternary-operator.mdx

@@ -0,0 +1,120 @@
+---
+sidebar_position: 2
+title: Ternary Operator
+sidebar_label: Ternary Operator
+description: "Master the syntax and practical use cases of the Conditional (Ternary) Operator in JavaScript to write cleaner, more concise logic."
+tags: [javascript, ternary-operator, foundations, clean-code, logic]
+---
+
+The **Conditional (Ternary) Operator** is the only JavaScript operator that takes three operands. It is frequently used as a one-line shortcut for the `if...else` statement, making your code significantly cleaner and more declarative.
+
+:::info
+The word "Ternary" literally means "composed of three parts."
+:::
+
+## The Syntax
+
+Instead of writing 5 lines of code for a simple "either/or" decision, the ternary operator lets you do it in one.
+
+```javascript title="index.js"
+condition ? expressionIfTrue : expressionIfFalse;
+```
+
+### Comparative Breakdown
+
+<Tabs>
+<TabItem value="traditional" label="Traditional If/Else" default>
+
+```javascript title="index.js"
+const age = 20;
+let canVote;
+
+if (age >= 18) {
+  canVote = "Yes, you can vote!";
+} else {
+  canVote = "Not yet.";
+}
+
+console.log(canVote); // "Yes, you can vote!"
+
+```
+
+</TabItem>
+<TabItem value="ternary" label="Ternary Way">
+
+```javascript title="index.js"
+const age = 20;
+
+// Syntax: condition ? true : false
+const canVote = age >= 18 ? "Yes, you can vote!" : "Not yet.";
+
+console.log(canVote); // "Yes, you can vote!"
+
+```
+
+</TabItem>
+</Tabs>
+
+## Why Use It?
+
+The Ternary operator isn't just about saving space. In modern JavaScript (especially in frameworks like **React**), it allows you to:
+
+1. **Assign values directly** to a constant.
+2. **Embed logic** inside Template Literals.
+3. **Return values** from arrow functions without explicit `return` blocks.
+
+### Use Case: Dynamic Template Literals
+
+```javascript {4} showLineNumbers
+const isPremium = true;
+
+// Using ternary inside a string!
+const welcomeMessage = `Welcome back, ${isPremium ? 'VIP Member' : 'Guest'}!`;
+
+console.log(welcomeMessage); // "Welcome back, VIP Member!"
+
+```
+
+## Interactive Playground
+
+Test how the ternary operator handles state changes. In this demo, we check a "User Status" and change the theme dynamically.
+
+<CodePenEmbed
+title="JS Ternary Operator Demo"
+penId="qENxKKP"
+/>
+
+:::tip
+Try changing the condition in the JS panel to check for a specific number or a boolean value to see how the UI updates instantly.
+:::
+
+---
+
+## Common Pitfalls
+
+While powerful, don't abuse the ternary operator.
+
+:::danger Ternary Hell
+Avoid nesting ternaries too deeply. If your logic requires multiple levels of checks, a standard `if...else` or `switch` statement is much more readable.
+
+**Bad Practice:**
+
+```javascript title="index.js"
+const result = condition1 ? (condition2 ? 'A' : 'B') : (condition3 ? 'C' : 'D');
+// ❌ This is hard to read and debug!
+
+```
+
+:::
+
+## Quick Check
+
+```javascript title="index.js"
+const score = 85;
+const grade = score > 90 ? "A" : "B";
+
+```
+
+**What is the value of `grade`?**
+
+The value of `grade` is `"B"` because the condition `score > 90` evaluates to `false`, so the expression after the colon (`"B"`) is returned.