Scope & Variable Visibility

Scope determines where you can access a variable in your code. If you try to access a variable outside its scope, you'll get an error.

1. What is Scope? 🔭

What is it? The context in which variables are declared. It defines the visibility and lifetime of variables.

Why use it?

• Security: Variables inside functions can't be messed with from outside.
• Naming: You can use the same variable name (e.g., count) in different functions without conflict.

How it works: JavaScript has 3 main types of scope:

1. Global Scope
2. Function Scope
3. Block Scope

2. Global Scope 🌍

Variables declared outside any function or block are Global. They can be accessed from anywhere.

Warning: Avoid global variables! They can be overwritten by mistake and cause hard-to-find bugs.

3. Function Scope 📦

Variables declared inside a function are Local to that function. They cannot be accessed from outside.

4. Block Scope 🧱

This is where let and const shine. A block is anything inside curly braces { ... } (like if statements or loops).

• let and const are Block Scoped.
• var is Function Scoped (it ignores blocks!).

5. The Scope Chain 🔗

When you use a variable, JavaScript looks for it in the current scope. If not found, it looks in the outer scope, and so on, until it reaches the Global scope.

Practical Example: Variable Shadowing 🌓

What happens if you have a variable with the same name in both inner and outer scope? The inner one "shadows" (hides) the outer one.

Quiz

Key Takeaways

✅ Global Scope: Accessible everywhere (Avoid using).
✅ Function Scope: Accessible only inside the function.
✅ Block Scope: let/const stay inside {}.
✅ Scope Chain: JS looks outward for variables.
✅ Shadowing: Inner variables hide outer ones.

What's Next?

Now that you understand Scope, let's learn about Hoisting & Closures - two concepts that rely heavily on scope!

Keep coding! 🚀