Today, we're going to explore an important concept in JavaScript called "scopes." Don't worry if it sounds complicated – I'll explain it in a way that's easy to understand. So put on your coding cap, and let's dive in!
What are Scopes?
In JavaScript, a scope is like a container that holds variables and functions. It helps us organize our code and determine where these variables and functions can be accessed. Scopes define the visibility and lifetime of our code elements.
Global Scope:
Imagine you have a big toy box in your room. Anything you put in that box can be accessed from anywhere in your room. In JavaScript, we have something similar called the "global scope." Variables and functions declared outside any specific block of code, like inside a function or a loop, belong to the global scope.
Let's look at an example:
var toy = "Buzz Lightyear";
function play() {
console.log(`Playing with ${toy}`);
}
play();
In this code, the variable toy is declared outside the play function, making it part of the global scope. Therefore, we can access it inside the play function and print its value.
Local Scope:
Now, imagine you have a smaller box inside your big toy box. Anything you put in that smaller box can only be accessed from within the big box. In JavaScript, we call this a "local scope."
Let's see an example:
function play() {
var toy = "Toy Car";
console.log("Playing with " + toy);
}
play();
console.log("Playing with " + toy);
Here, the variable toy is declared inside the play function, creating a local scope for it. We can only access it within the play function. If we try to access it outside the function, like in the last line, we'll get an error because the variable is not defined in that scope.
Nested Scopes:
Sometimes, we can have scopes within scopes, just like having smaller boxes inside a bigger box. This is called "nested scopes."
Let's see an example:
function play() {
var toy = "Teddy Bear";
function playWithToy() {
console.log("Playing with " + toy);
}
playWithToy();
}
play();
In this code, we have the play function, which has a nested function called playWithToy. The playWithToy function can access the toy variable from its parent scope, which is the play function.
Scopes in JavaScript help us control the visibility and lifetime of our code elements. Remember, we have a global scope that allows access from anywhere, and local scopes that restrict access to specific parts of our code. Sometimes, we can even have nested scopes, like smaller boxes inside bigger boxes.
What is Hoisting?
In JavaScript, hoisting is a behaviour where variables and function declarations are moved to the top of their containing scope during the compilation phase.
Consider this example:
play();
function play() {
console.log("Let's play!");
}
In this code, we are calling the play function before its declaration. But thanks to hoisting, JavaScript moves the function declaration to the top, and the output will be "Let's play!".
Variable Declarations vs. Assignments:
Hoisting behaves differently for variable declarations and assignments. Only the declaration part gets hoisted, not the assignment part.
console.log(number);
var number = 10;
In this code, the declaration of number is hoisted, but the assignment (number = 10) stays in its original place. As a result, the output will be undefined.
Hoisting allows us to use them before they are actually declared in the code. However, remember that only the declarations get hoisted, not the assignments.
References
Have a look at the below questions to improve the concepts and several edge cases.