We all know that it takes time to really understand JavaScript. But the learning process will be much faster when we write codes with fewer bugs. In this article, we will discuss one concept in JavaScript that people find difficult to understand: Scoping. Let’s dive right into it 😉.
🔭 What is Scope ?
Scope is an environment or set of code that have all the variables defined in it and those variables are only accessible inside that scope. Anything outside that scope does not have access to those variables. This is why when you try running a variable in one place and try to use it in another place it throws an error. Let’s see an example for a clearer understanding 👇🏽
const a = 1;
function num() {
const b = 2;
console.log('num', a, b);
}
num();
console.log(a, b);
let’s see the output before I explain 👇🏽
For the first output, you will see that the num() function ran successfully because variable a is scoped globally (which we are going to be talking about in a minute) which means it can be accessed from anywhere and the variable b is scoped inside the num() function and it can only be accessed inside that function, and since we logged out a and b inside the num() function, it printed out both a and b because they we properly scoped.
For the second output, we got an error because the variable b is defined inside the function num() and it is only accessible inside that function while variable a is defined globally and can be accessed anywhere.
⌨️ Types of Scope
There are four different types of scope in JavaScript which are
- Global Scope
- Block Scope
- Function Scope
- Module Scope
🌐 1. Global Scope
Just as the name implies, The global scope is the outermost scope and the variables can be accessible everywhere both in functions and blocks. Here is an example 👇🏽
let name = 'lawrence';
var age = 56;
const hobby = 'Drumming';
function profile() {
console.log(name, age, hobby);
}
profile(); //output: lawrence 56 Drumming
The variables that are declared in a global scope are called Global Variables, these variables can be accessed from any scope just like you see in the example above.
🪨 2. Block Scope
With Block scope, every variable declared that is declared is only accessible within that block scope. it is an area within conditions (if or switch) or loops (such as for ) or whenever you see {} it is a block scope. In a block scope, you can declare variables using const and letkeywords. Let’s see an example 👇🏽
if (true) {
const b = 10;
console.log(b); // ouput: 10
}
console.log(b); // ouput: Uncaught ReferenceError: b is not defined
As you can see in the example above, when we tried logging out the variable b outside the block scope, we got an error saying that b is not defined because b can only be accessible inside the block scope which is the if statement.
🎢 3. Function Scope
Function scope is the same as block scope because it is just another type of block scope that you can create and one of the important similarities it has with block scope is the {} . let’s see an example 👇🏽
function test() {
const c = 10;
console.log(c); // output: 10
}
test();
console.log(c); // ouput: Uncaught ReferenceError: c is not defined
Just like we discussed in the block scope, the Function scope also acts the same way as seen in the example above.
The only time you should be concerned about using function scoping is only when you are using the keyword var . let’s take an example before I explain 👇🏽
function test() {
var a = 10;
if (true) {
var c = 20;
}
console.log(a, c); //output: 10 20
}
test();
If you notice in the example above, you will see that the variable a and c are printed out without any error because variables that are defined with the var keyword are only function scoped which means that because the variable c is defined inside the function test(), it is available anywhere inside that function.
If we change the variable c to another variable such as let and const, we are going to get an error becauselet and const are block level scope
🏨 5. Module Scope
We already know that variables that are declared outside any function are global variables. But In modules it is different. In module scope, the variables declared outside any function cannot be accessible to other modules unless it is explicitly exported. And exporting a module file makes a function or object available to other modules.
I know it sounds confusing but let’s see an example for a better understanding 👇🏽
const moduleVar = 'Module';
export const exportedVar = 'Exported';
In the example above, We created a global variable moduleVar and we also created another variable that we are going to be explicitly exporting from an moduleScript.js module file.
💡: Both variables are inside the moduleScript.js module file.
That being said, Let’s import the moduleScript.js inside our normal script.js file 👇🏽
import { exportedVar } from './ModuleScript.js';
console.log(exportedVar); //output: Exported
You can see that when we imported the exportedVar variable and logged it out, we got the expected output. But if we try to log out the moduleVar variable inside the script.js file, we are going to get an error because the moduleVar variable is accessed globally inside the moduleScript.js. The only way it is going to run is when we import it into the script.js file.
Conclusion
We have gotten to the end of the article, One thing to note is that you can do more research about scoping in JavaScript since I did not cover everything. But the aim of the article was to cover the basics which I did and I hope you learned something from it. That’s all guys, have an amazing weekend. Bye 😀
Top comments (2)
Nice explanation 😁
Thanks Vlad