In the world of JavaScript, understanding how scope works is essential to writing clean, error-free code. When scopes nest inside each other, things get more interesting! ๐ Today, weโre diving into Nested Scope and exploring Hoistingโall with a fun, easy-to-follow guide.
๐ณ Understanding Nested Scope ๐ณ
In JavaScript, when you define a function inside another function, it creates nested scopes. The inner function can access variables from its outer function, but the outer function canโt see inside the inner function.
Letโs look at an example:
function one() {
const username = "Ayush";
function two() {
const website = "YouTube";
console.log(username); // Output: Ayush
// ๐ Note: Function "two" can access the variables of function "one"
}
two();
// console.log(website); // โ Error: Can't access "website" from function "two"
}
one();
- Here, the inner function
two()
can accessusername
from the outer functionone()
. However, if you try to accesswebsite
outsidetwo()
, it throws an error because it is scoped totwo()
only.
Nested Scope in Conditionals ๐
if (true) {
const username = "Ayush";
if (username === "Ayush") { // true
const website = "YouTube";
console.log(username + website); // Output: Ayush YouTube
// โ
We can access "username" inside this block!
}
// console.log(website); // โ Error: Can't access "website" outside this block
}
// console.log(username); // โ Error: Can't access "username" outside the block
- Even in conditionals (
if
statements), block scope behaves similarly: variables declared inside one block{}
canโt be accessed outside of it.
โก Hoisting: The Magic Trick of JavaScript! ๐ฉโจ
Hoisting allows you to use functions and variables before you declare them in your code. However, the way JavaScript handles hoisting differs for functions and variables.
Function Hoisting ๐
In JavaScript, function declarations are fully hoisted. This means you can call a function before it's written in your code. Here's an example:
console.log(addOne(5)); // Output: 6
function addOne(num) {
return num + 1;
}
- Even though the
addOne
function is defined after itโs called, the JavaScript engine "hoists" it to the top of the code, making it available for use.
Variable Hoisting with Functions โ ๏ธ
Variables assigned with let
, const
, or function expressions
(like arrow functions or anonymous functions) are not fully hoisted. Youโll get an error if you try to use them before they're defined:
// console.log(addTwo(5)); // โ Error: Cannot access 'addTwo' before initialization
const addTwo = function (num) {
return num + 2;
};
- Unlike function declarations, function expressions (when a function is assigned to a variable) donโt get fully hoisted. They behave like any other variable declaration.
๐ Key Takeaways:
- Nested Scope: Inner functions can access variables from their parent scope, but not vice versa.
-
Block Scope: Variables declared inside
{}
canโt be accessed outside. - Hoisting: Function declarations are hoisted, but function expressions are not.
By mastering scope and hoisting, youโll gain a deeper understanding of how JavaScript works under the hood. Now, go ahead and put this knowledge into practice! ๐ช๐ฅ
Top comments (0)