Skip to content

Commit 2d8aea3

Browse files
ajay-dhangarajay-dhangar
committed
added content for js docs
1 parent f96ecbd commit 2d8aea3

File tree

11 files changed

+259
-86
lines changed

11 files changed

+259
-86
lines changed

‎courses/advanced-javascript/advanced-foundations/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Advanced Foundations",
3+
"position": 1,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Deep dive into the JavaScript engine, execution contexts, and the call stack. Understanding how the language works under the hood is essential for writing optimized code."
7+
}
8+
}

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

Lines changed: 172 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,204 @@
11
---
2-
sidebar_position: 1
3-
title: Introduction to Advanced Foundations
2+
title: Welcome to Advanced JavaScript Foundations
43
sidebar_label: Introduction
5-
description: "Master the core engine mechanics of JavaScript. From the Event Loop to Hoisting, we're going under the hood."
6-
tags: [javascript, advanced, programming, learning, codeharborhub, foundations]
4+
sidebar_position: 1
5+
description: "Mastering the core mechanics of JavaScript to build scalable and high-performance applications."
6+
tags: [javascript, advanced, learning, web-development]
7+
author: [CodeHarborHub, Ajay Dhangar]
78
---
89

9-
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**.
10+
Welcome to the first module of the **Advanced JavaScript Course**. Before we build complex applications, we must master the environment where our code lives and breathes.
1011

11-
:::tip
12-
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.
12+
To become a top-tier developer, you must stop looking at JavaScript as a "black box." In this module, we peel back the layers of the browser to understand exactly how our code is executed.
13+
14+
:::tip Welcome Aboard!
15+
You aren't just here to learn syntax—you're here to understand the **logic** and **architecture** of the world's most popular programming language.
1316
:::
1417

15-
## Module Roadmap
18+
## What is JavaScript, Really?
19+
20+
JavaScript is a high-level, interpreted (or JIT-compiled), multi-paradigm language. But at its core, it follows a specific workflow to turn your text into action.
1621

17-
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.
22+
### The JavaScript Lifecycle
23+
Using **Mermaid**, we can visualize how the Engine processes your code:
1824

1925
```mermaid
20-
flowchart TD
21-
A[Start: Cleaner Syntax] --> B[Ternary Operators]
22-
B --> C[Destructuring]
23-
C --> D[Numeric Separators]
24-
D --> E[The Engine: Event Loop]
25-
E --> F[Hoisting & Temporal Dead Zone]
26-
F --> G[Pre-increment vs Post-increment]
27-
G --> H[Timing: setTimeout with Params]
28-
H --> I[setInterval for Recursion]
29-
I --> J[Error Handling in Timed Execs]
30-
J --> K[Final Challenge: Stock Price Checker]
26+
graph LR
27+
A[Source Code] --> B{Parser}
28+
B --> C[Abstract Syntax Tree]
29+
C --> D[Interpreter / JIT Compiler]
30+
D --> E[Binary Executable]
31+
E --> F((Result))
32+
style D fill:#f9f,stroke:#333,stroke-width:4px,color:#333
3133
34+
```
3235

36+
## Why Study Advanced JS?
3337

34-
```
38+
Many developers get stuck at the "Junior" or "Intermediate" level because they don't understand the foundations. Mastering these concepts allows you to:
39+
40+
<Tabs>
41+
<TabItem value="perf" label="Performance" default>
42+
Understand **Memory Management** and the **Garbage Collector** to prevent memory leaks and slow apps.
43+
</TabItem>
44+
<TabItem value="debug" label="Debugging">
45+
When you understand the **Call Stack**, you stop guessing why an error happened and start knowing exactly where the execution failed.
46+
</TabItem>
47+
<TabItem value="async" label="Asynchronous Mastery">
48+
Master the **Event Loop** and **Promises** to handle complex data fetching without freezing your UI.
49+
</TabItem>
50+
</Tabs>
51+
52+
## The "Big Three" Foundations
3553

36-
## What’s in the Toolbox?
54+
In this section, we will deep dive into three mathematical and logical pillars of the language.
3755

38-
We aren't just looking at `if/else` statements anymore. We are leveling up our syntax and mental models.
56+
### 1. The Execution Context
57+
58+
The **Execution Context** is the environment where your code runs. It consists of:
59+
- **Global Execution Context**: The default context where your code starts executing.
60+
- **Function Execution Context**: Created whenever a function is invoked.
61+
62+
**Now watch this video to visualize how the Execution Context works:**
3963

4064
<Tabs>
41-
<TabItem value="syntax" label="Cleaner Syntax" default>
42-
Learn to write less code but do more.
43-
* **Ternary Operators:** Deep nesting without the mess.
44-
* **Destructuring:** Extracting data like a pro.
45-
* **Numeric Separators:** Making BigInt and large numbers actually readable (e.g., `1_000_000`).
65+
<TabItem value="en" label="English" default>
66+
67+
<LiteYouTubeEmbed
68+
id="zdGfo6I1yrA"
69+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
70+
title="JavaScript Visualized - Execution Contexts"
71+
poster="maxresdefault"
72+
webp
73+
/>
4674
</TabItem>
47-
<TabItem value="engine" label="The Engine">
48-
This is where the real "Advanced" stuff happens:
49-
* **The Event Loop:** How JS handles concurrency.
50-
* **Hoisting:** Understanding the Temporal Dead Zone.
51-
* **Pre-increment vs Post-increment:** Small symbols, big differences.
75+
<TabItem value="hi" label="हिन्दी">
76+
77+
<LiteYouTubeEmbed
78+
id="HMWIyMCl6_s"
79+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
80+
title="How JavaScript Works in Hindi | JavaScript Execution Context"
81+
poster="maxresdefault"
82+
webp
83+
/>
84+
</TabItem>
85+
</Tabs>
86+
87+
<br />
88+
89+
By understanding the Execution Context, you can predict how variables and functions are scoped and accessed.
90+
91+
### 2. Single-Threaded Nature
92+
93+
JavaScript runs on a single thread, meaning it can execute one command at a time. This is crucial for understanding how tasks are queued and executed.
94+
95+
**Now watch this video to see how single-threading works:**
96+
97+
<Tabs>
98+
<TabItem value="en" label="English" default>
99+
100+
<LiteYouTubeEmbed
101+
id="os7KcmJvtN4"
102+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
103+
title="JThe Genius Behind Node.js Single Thread Model"
104+
poster="maxresdefault"
105+
webp
106+
/>
107+
52108
</TabItem>
53-
<TabItem value="async" label="Timing">
54-
Mastering the clock:
55-
* `setTimeout` with parameters.
56-
* `setInterval` for recursive tasks.
57-
* Error handling within timed executions.
109+
<TabItem value="hi" label="हिन्दी">
110+
111+
<LiteYouTubeEmbed
112+
id="HqetHGt4iD8"
113+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
114+
title="JIs JavaScript Single Threaded ??"
115+
poster="maxresdefault"
116+
webp
117+
/>
118+
58119
</TabItem>
59120
</Tabs>
60121

61-
## Try it Out!
122+
<br />
123+
124+
Now that you understand the single-threaded nature, you can see how JavaScript handles tasks without blocking the main thread.
125+
126+
### 3. Non-blocking I/O
62127

63-
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.
128+
JavaScript uses non-blocking I/O to handle operations like network requests and file reading without freezing the UI. This is achieved through the **Event Loop** and **Callback Queue**.
64129

65-
<CodePenEmbed
66-
title="Advanced Foundations Introduction"
67-
penId="jErZKmj"
130+
$$
131+
OR
132+
$$
133+
134+
Even though it's single-threaded, JS doesn't wait for a timer or an API call. It offloads that to the Web APIs and waits for the **Callback Queue**.
135+
136+
**Now watch this video to understand non-blocking I/O:**
137+
138+
<LiteYouTubeEmbed
139+
id="wB9tIg209-8"
140+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
141+
title="Non-blocking I/O and how Node uses it"
142+
poster="maxresdefault"
143+
webp
68144
/>
69145

70-
:::info
71-
**Try this:** Change the "Status" logic in the JS panel of the Pen to see how the UI reacts!
146+
<br />
147+
148+
Understanding non-blocking I/O is essential for building responsive applications that can handle multiple tasks efficiently.
149+
150+
:::tip Key Takeaway
151+
152+
Mastering these three foundations will elevate your JavaScript skills and prepare you for more complex topics like Asynchronous Programming, Closures, and Prototypes.
72153
:::
73154

74-
## The Final Boss
155+
## Try it Out!
75156

76-
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.
157+
Before we move to the next lesson, see if you can predict the output of this common "Advanced Foundations" in our interactive editor.
77158

78-
:::important
79-
Don't skip the challenges! Advanced JavaScript is a muscle—you have to flex it to grow it.
159+
<CodePenEmbed
160+
title="JS Execution Context Demo"
161+
penId="jErZKmj"
162+
/>
163+
164+
In this example, you can see how the **Event Loop** manages the timer without blocking the main thread, while also using **ternary operators** for clean conditional logic.
165+
166+
```mermaid
167+
flowchart TD
168+
Code[JavaScript Code]
169+
Stack[Call Stack]
170+
Heap[Memory Heap]
171+
WebAPI[Web APIs]
172+
Queue[Callback Queue]
173+
Loop[Event Loop]
174+
175+
Code --> Stack
176+
Stack --> WebAPI
177+
WebAPI --> Queue
178+
Queue --> Loop
179+
Loop --> Stack
180+
```
181+
182+
:::info Pro Tip
183+
Pay attention to how `setInterval` works with the **Event Loop** and **Callback Queue** to avoid blocking the main thread.
80184
:::
81185

82-
:::info Note on math
83-
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}}$.
84-
:::
186+
## What We Will Cover in This Module
187+
188+
| Topic | What You'll Learn |
189+
| --- | --- |
190+
| **The Engine** | V8, Parsing, and Just-In-Time (JIT) compilation. |
191+
| **Memory Heap** | Where variables are stored and how memory is allocated. |
192+
| **The Call Stack** | How JS tracks function execution. |
193+
| **Hoisting** | The "magic" behind variable and function declarations. |
194+
| **Event Loop** | How JS handles asynchronous code without blocking. |
195+
196+
## Connect & Grow
197+
198+
We believe learning is better together. If you get stuck or find a "Eureka!" moment, don't keep it to yourself!
199+
200+
Join our [Community](https://github.com/codeharborhub) to discuss concepts, share projects, and get help from fellow learners and mentors.
201+
202+
:::success Next Step
203+
Ready to see how the engine actually "thinks"? Click **Next** to dive into the **JavaScript Engine and Runtime!**
204+
:::

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

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,25 @@ The **Conditional (Ternary) Operator** is the only JavaScript operator that take
1212
The word "Ternary" literally means "composed of three parts."
1313
:::
1414

15-
## The Syntax
15+
## Basic Syntax
1616

17-
Instead of writing 5 lines of code for a simple "either/or" decision, the ternary operator lets you do it in one.
17+
The syntax consists of a condition followed by a question mark (`?`), then an expression to execute if the condition is truthy, followed by a colon (`:`), and finally the expression to execute if the condition is falsy.
1818

19-
```javascript title="index.js"
19+
```javascript title="Basic Syntax"
2020
condition ? expressionIfTrue : expressionIfFalse;
2121
```
2222

23+
For example:
24+
25+
```javascript title="index.js"
26+
const age = 20;
27+
const canVote = age >= 18 ? 'Yes, you can vote!' : 'Not yet.';
28+
console.log(canVote); // "Yes, you can vote!"
29+
```
30+
31+
Understanding this syntax is crucial as it allows you to write more concise and readable code, especially when dealing with simple conditional logic.
32+
33+
2334
### Comparative Breakdown
2435

2536
<Tabs>
@@ -65,7 +76,7 @@ The Ternary operator isn't just about saving space. In modern JavaScript (especi
6576

6677
### Use Case: Dynamic Template Literals
6778

68-
```javascript {4} showLineNumbers
79+
```javascript title="index.js" {4} showLineNumbers
6980
const isPremium = true;
7081

7182
// Using ternary inside a string!
@@ -88,33 +99,3 @@ penId="qENxKKP"
8899
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.
89100
:::
90101

91-
---
92-
93-
## Common Pitfalls
94-
95-
While powerful, don't abuse the ternary operator.
96-
97-
:::danger Ternary Hell
98-
Avoid nesting ternaries too deeply. If your logic requires multiple levels of checks, a standard `if...else` or `switch` statement is much more readable.
99-
100-
**Bad Practice:**
101-
102-
```javascript title="index.js"
103-
const result = condition1 ? (condition2 ? 'A' : 'B') : (condition3 ? 'C' : 'D');
104-
// ❌ This is hard to read and debug!
105-
106-
```
107-
108-
:::
109-
110-
## Quick Check
111-
112-
```javascript title="index.js"
113-
const score = 85;
114-
const grade = score > 90 ? "A" : "B";
115-
116-
```
117-
118-
**What is the value of `grade`?**
119-
120-
The value of `grade` is `"B"` because the condition `score > 90` evaluates to `false`, so the expression after the colon (`"B"`) is returned.

‎courses/advanced-javascript/advanced-function-patterns-generators/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Advanced Function Patterns & Generators",
3+
"position": 8,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Unlock the power of closures, currying, higher-order functions, and Generator functions for custom iteration control."
7+
}
8+
}

‎courses/advanced-javascript/asynchronous-javascript-apis/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Asynchronous JavaScript & APIs",
3+
"position": 9,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Master the Event Loop, Promises, and Async/Await. Learn how to fetch data from external APIs and handle errors in a non-blocking environment."
7+
}
8+
}

‎courses/advanced-javascript/collections-symbols/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Collections & Symbols",
3+
"position": 7,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Explore modern data structures like Maps, Sets, and the unique Symbol primitive for creating private-like properties."
7+
}
8+
}

‎courses/advanced-javascript/creating-custom-objects/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Creating Custom Objects",
3+
"position": 6,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "A comprehensive guide to Object-Oriented Programming (OOP) in JavaScript, covering prototypes, classes, inheritance, and 'this' binding."
7+
}
8+
}

‎courses/advanced-javascript/function-expressions-parameters/_category_.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Function Expressions & Parameters",
3+
"position": 3,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Explore anonymous functions, arrow functions, and advanced parameter handling like rest/spread and default values."
7+
}
8+
}

0 commit comments

Comments
 (0)