Skip to content

Commit 750e587

Browse files
committed
Fixed bug's
1 parent a4a4220 commit 750e587

17 files changed

Lines changed: 69 additions & 220 deletions

docs/02-shadowing.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ description: "Learn how variable shadowing works in JavaScript, the difference b
55
keywords: [javascript shadowing, lexical scope, illegal shadowing, var vs let, javascript tutorial]
66
---
77

8+
<!--
89
import JSEditor from "@site/src/components/js-live-code-editor";
10+
-->
11+
912
import firstExample from "!!raw-loader!./_scripts/02-shadow-01.js";
1013
import secondExample from "!!raw-loader!./_scripts/02-shadow-02.js";
1114
import thirdExample from "!!raw-loader!./_scripts/02-shadow-03.js";
@@ -18,9 +21,11 @@ When this happens, the inner variable "shadows" the outer one, making the outer
1821

1922
In the example below, notice how the `city` inside the function is independent of the `city` defined at the top level.
2023

24+
<!--
2125
<JSEditor title="Example: Lexical Shadowing" run={false}>
2226
{firstExample}
2327
</JSEditor>
28+
-->
2429

2530
> **What's happening?** > The `city` parameter on **Line 3** shadows the `city` variable on **Line 1**. Any changes made to `city` inside the function (Line 4) stay inside the function's "bubble."
2631
@@ -32,19 +37,23 @@ While shadowing is a common pattern, JavaScript has strict rules about how diffe
3237

3338
You cannot shadow a `let` or `const` variable using `var` within the same block or a nested block. This is because `var` is function-scoped and tries to "hoist" itself to the top, which conflicts with the block-scoped `let`.
3439

40+
<!--
3541
<JSEditor title="Error: Illegal Shadowing Attempt">
3642
{secondExample}
3743
</JSEditor>
44+
-->
3845

3946
*The `var` at line 4 is trying to **'cross the boundary'** of the `let` declaration, which results in a SyntaxError.*
4047

4148
### 2. Valid Shadowing (Function Boundaries)
4249

4350
Shadowing becomes valid again if there is a **function boundary** separating the declarations. Since functions create a completely new execution context, the conflict is resolved.
4451

52+
<!--
4553
<JSEditor title="Valid: Shadowing via Function Boundary">
4654
{thirdExample}
4755
</JSEditor>
56+
-->
4857

4958
## Best Practices
5059

docs/03-varible-declaration.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ description: "A deep dive into JavaScript variable scopes (Global, Function, Blo
55
keywords: [javascript variables, hoisting, var let const differences, functional scope, block scope, js execution context]
66
---
77

8+
<!--
89
import JSEditor from "@site/src/components/js-live-code-editor";
10+
-->
911
import firstExample from "!!raw-loader!./_scripts/03-variable-declaration-01.js";
1012
import secondExample from "!!raw-loader!./_scripts/03-variable-declaration-02.js";
1113
import thirdExample from "!!raw-loader!./_scripts/03-variable-declaration-03.js";
@@ -23,17 +25,21 @@ Before ES6, `var` was the only way to declare variables. It behaves differently
2325
* **Global Scope:** When declared outside a function, it attaches to the `window` object (in browsers).
2426
* **Function Scope:** When declared inside a `function`, it is trapped there and cannot be accessed from outside.
2527

28+
<!--
2629
<JSEditor title="Visualizing Function Scope" url="scopes">
2730
{firstExample}
2831
</JSEditor>
32+
-->
2933

3034
### Re-declaration & Updates
3135

3236
One of the "quirks" of `var` is that it allows you to re-declare the same variable name without an error. In large codebases, this often leads to accidental bugs.
3337

38+
<!--
3439
<JSEditor title="The 'Silent' Re-declaration">
3540
{secondExample}
3641
</JSEditor>
42+
-->
3743

3844
:::tip Technical Insight
3945
A repeated `var` declaration in the same scope is effectively a **do-nothing operation**. The JS engine sees the first one and ignores subsequent declarations of the same name.
@@ -63,9 +69,11 @@ age = 25; // 3. Assignment happens here
6369

6470
Functions are the "VIPs" of hoisting. They are moved to the top **before** variable declarations.
6571

72+
<!--
6673
<JSEditor title="Challenge: Function vs. Var Hoisting">
6774
{fourthExample}
6875
</JSEditor>
76+
-->
6977

7078
## 3. The Modern Way: `let` & `const`
7179

@@ -82,9 +90,11 @@ While `var` is function-scoped, `let` and `const` are **block-scoped** `{ }`. Th
8290

8391
Test your understanding of the execution context with these common interview scenarios.
8492

93+
<!--
8594
<JSEditor title="Puzzle: The Hoisting Order">
8695
{fifthExample}
8796
</JSEditor>
97+
-->
8898

8999
:::info Deep Dive
90100
For a deeper understanding of these mechanics, I highly recommend checking out:
-151 KB
Binary file not shown.

docs/_assets/call-site.png

-57.8 KB
Binary file not shown.

docs/_assets/default-binding-1.png

-2.19 KB
Binary file not shown.

docs/_assets/internal-methods.png

-63 KB
Binary file not shown.

docs/_assets/js-proxy.png

-138 KB
Binary file not shown.
-69.3 KB
Binary file not shown.

docs/_assets/proxy-server.png

-128 KB
Binary file not shown.

docs/_assets/resident-set.png

-61.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)