tapascript · atapas · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/README.md b/README.md
@@ -31,4 +31,5 @@ I am an independent educator and open-source enthusiast who creates meaningful p
 
 ### Module 2
 - **`Day 08: Mastering JavaScript Execution Context Visually`** - [Watch Video](https://youtu.be/ylx5F7hbzVQ) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-08/README.md)
-- **`Day 09: Mastering Temporal Dead Zone and Hoisting`** - [Watch Video](https://youtu.be/OqMxh1QdYEg) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-09/README.md)
+- **`Day 09: Mastering Temporal Dead Zone and Hoisting`** - [Watch Video](https://youtu.be/OqMxh1QdYEg) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-09/README.md)
+- **`Day 10: Mastering Scope and Scope Chain`** - [Watch Video](https://youtu.be/14H2TsrjcLo) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-10/README.md)
diff --git a/day-10/README.md b/day-10/README.md
@@ -0,0 +1,47 @@
+# Day 10 - 40 Days of JavaScript
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Intro
+- ✅ Misconception About Hoisting
+- ✅ Variable Hoisting
+- ✅ Hoisting and let and const
+- ✅ Temporal Dead Zone(TDZ)
+- ✅ Functional Hoisting
+- ✅ Hoisting and Function As an Expression
+- ✅ Task and What’s Next?
+
+## 🫶 Support
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+    > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+Here is the video for you to go through and learn:
+
+[![day-10](./banner.png)](https://youtu.be/14H2TsrjcLo "Video")
+
+## The Scope Table
+## Comparison Table: `var` vs `let` vs `const`
+
+| Feature               | `var`                         | `let`                         | `const`                       |
+|-----------------------|-----------------------------|-----------------------------|-----------------------------|
+| **Scope**            | Function scope               | Block scope `{}`             | Block scope `{}`             |
+| **Hoisting**         | Hoisted & initialized as `undefined` | Hoisted but in **Temporal Dead Zone (TDZ)** | Hoisted but in **Temporal Dead Zone (TDZ)** |
+| **Attached to `window`?** | ✅ Yes | ❌ No | ❌ No |
+| **Can be Re-declared?** | ✅ Yes | ❌ No | ❌ No |
+| **Can be Reassigned?** | ✅ Yes | ✅ Yes | ❌ No |
+| **Initial Value Required?** | ❌ No | ❌ No | ✅ Yes (Must be initialized) |
+| **Mutability** | Mutable | Mutable | Immutable (Can't be reassigned but mutable if it's an object or array) |
+| **Use in Loops** | Allowed but not recommended (function scope issues) | ✅ Recommended | ❌ Not recommended for changing values |
+
+
+## **👩‍💻 🧑‍💻 Assignment Tasks**
+
+Please find the task assignments in the [Task File](./task.md).
diff --git a/day-10/banner.png b/day-10/banner.png
diff --git a/day-10/index.html b/day-10/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scope and Scope Chain</title>
+    <script defer src="./index.js"></script>
+</head>
+<body>
+    <h1>Welcome to the <u>Day 10</u> of "40 Days of JavaScript!"</h1>
+</body>
+</html>
diff --git a/day-10/index.js b/day-10/index.js
@@ -0,0 +1,99 @@
+console.log("Day 10");
+
+// 4 Types of Scope in JavaScript
+// 1. Global Scope
+// 2. Function Scope
+// 3. Block Scope
+// 4. Module Scope
+
+// Global Scope
+// Variables declared outside of any function or block scope
+// are in the global scope
+
+let name = "Tapas";
+
+function greeting() {
+    console.log("Hello ", name);
+}
+
+greeting();
+
+console.log(name);// "Tapas"
+
+{
+    console.log("Inside Block", name)
+}
+
+// Function Scope: Variables declared inside a function are only
+// accessible within that function.
+
+function toDo() {
+    let task = "Learning 40 days of JS"
+    console.log(task);
+}
+
+toDo();
+
+// console.log(task);
+
+// Block Scope: Variables declared using let and const inside {} cannot be accessed outside the block.
+
+{
+    let count = 10;
+    console.log(count)
+}
+
+// console.log(count)
+
+// Scope Chain
+
+let globalVar = "I am a Global Variable";
+
+function outer() {
+    let outerVar = "I am an Outer Variable";
+
+    function inner() {
+        let innerVar = "I am an Inner Variable";
+
+        console.log(innerVar); // "I am an Inner Variable"
+        console.log(outerVar); // "I am an Outer Variable"
+        console.log(globalVar); // "I am a Global Variable"
+    }
+
+    inner();
+}
+
+outer();
+
+console.log(outerVar); // Reference Error
+
+
+
+var count = 10;
+
+function outer() {
+    // var count = 20;
+
+    function inner() {
+        //var count = 30;
+        console.log(count); // 10
+    }
+    inner();
+    console.log(count); // 10
+}
+
+outer();
+console.log(count); // 10
+
+
+// Variable Shadowing
+
+let message = "I am doing great"
+
+function situation() {
+    let message = "I am not doing great"
+    console.log(message); // I am not doing great
+}
+
+situation();
+console.log(message); // I am doing great
diff --git a/day-10/task.md b/day-10/task.md
@@ -0,0 +1,109 @@
+# Tasks
+Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".
+
+> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console.
+
+## 1. What will be the output of the following code and why?
+```js
+let user = "Alice";
+
+function outer() {
+    function inner() {
+        console.log(user);
+    }
+    let user = "Bob";
+    inner();
+}
+
+outer();
+```
+
+## 2. What is the mistake in the code below?
+```js
+let total = 0; // Global, bad practice
+
+function add(num) {
+    total += num;
+}
+
+add(5);
+add(10);
+console.log(total);
+```
+
+## 3. Create a function with a nested function and log a variable from the parent function.
+
+## 4. Use a loop inside a function and declare a variable inside the loop. Can you access it outside?
+
+## 5. Write a function that tries to access a variable declared inside another function.
+
+## 6. What will be the output and why?
+```js
+console.log(a);
+let a = 10;
+```
+
+## 7. Where is the `age` variable accessible?
+```js
+function showAge() {
+    let age = 25;
+    console.log(age);
+}
+
+console.log(age);
+```
+
+Options:
+- A: In Global
+- B: Only inside showAge
+- C: It will cause an error
+- D: None of the above
+
+## 8. What will be the output and explain the output?
+```js
+let message = "Hello";
+
+function outer() {
+    let message = "Hi";
+
+    function inner() {
+        console.log(message);
+    }
+
+    inner();
+}
+
+outer();
+```
+
+## 9. What will be the output and why?
+```js
+let x = "Global";
+
+function outer() {
+    let x = "Outer";
+
+    function inner() {
+        let x = "Inner";
+        console.log(x);
+    }
+
+    inner();
+}
+
+outer();
+```
+## 10. What will be the output and why?
+```js
+function counter() {
+    let count = 0;
+    return function () {
+        count--;
+        console.log(count);
+    };
+}
+
+const reduce = counter();
+reduce();
+reduce();
+```