As a beginner learning JavaScript, getting a hang of everything that's going on can be overwhelming. some concepts can be hard
to grasp. However, one very important concept that every JavaScript beginner or even intermediate must know is the concept of scope in JavaScript. If you want to write executable programs in JavaScript, understanding scoping is a must.
First of all, what is scope?
In simple terms, scope of a variable refers to the accessibility of a variable within the program. Don't worry too much if that definition flew over your head (when i was a beginner, it did too).
What you need to know is that; How and where you declare a variable in your JavaScript program, determines how and where it can be accessed within the program. Still not clear? let's talk about the 3 types of scopes in JavaScript with examples.
Global Scopes
Function Scopes
Block Scopes
1. Global Scopes
The variables within the global scopes can be accessed from anywhere within our program.
say we declare a variable "userName" and assign it a value of "20". we can access the "userName" variable globally across our program. that includes inside a function, or inside any blocks we have in our program.
let us look at a simple example.
let userName = "adewole";
function greetAdewole (){ console.log(`hello ${userName}`) }
greetAdewole();
the above function prints "hello Adewole" to the console. notice how the "userName" was declared outside of the function and yet we still have access to it inside the function to print something to the console.
another example
let userName = "ademola";
let age = 30;
if ( userName === "ademola" && age >= 25){
console.log(`hello ${username}, you are ${age} years old, which means you're old enough to vote)}
we'll get "hello ademola, you are 30 years old which means you're old enough to vote" in the console.
we could access the "userName" and "age" variable inside our if statement even though it wasn't created inside the if statement.
2. Function scopes
From the name, i think we should have an idea of what it entails. these are variables that can be accessed only inside the function it was created in. we have no access to them on a global level and we definitely cannot access them in any other function or blocks in our program.
let's look at an example to make it clearer
function greetUser(){
let UserName = "adewole"
}
greetUser()
console.log(userName)
in the above function, we created a function "greetUser" and in the function, we created a variable "userName" and we assigned it a value of "adewole", then we tried to access it outside the function with the console.log() function which is obviously going to throw an error because we don not have access to that "username" variable on a global level. if we wanted to have access to the "userName" variable, we would have to take it out of the function and declare it globally.
another example
function greetUser(){
let UserName = "adewole"
let Age = 30
}
if ( age >= 20){
console.log(`hello ${username}, you are ${age} years old)
this also returns an error as we tried to access a "userName" and "age" variable that's scoped to the "greetUser" function, in the if block. we would have to take out "username" and "age" from the "greetUser" function and declare them globally, if we want access to them in the if block.
3. Block Scopes
First of all, what is a block? a block is simply anything within a opening curly braces and a closing one. think about when you try to write an if statement, the opening and closing curly braces that comes after the condition itself, is essentially a block.
example
if (conditions){ block where code to be executed goes}.
when a variable is declared inside a Block scope, it is only accessible inside that block scope. if we try to access it on a global level or inside another function or even another scope, we get an error.
example
if ( 100 > 20){ let number = 20 }
console.log(number)
in the above code, we created a variable in the block of an if statement with the name "number" and assigned a value "20" to it.
on the next line, we tried to access the "number" variable in the console.log function which will obviously throw an error.
so, essentially, we are restricting the access of the "number" variable to that single if block.
NOTE: There's one important note though, if you declare a variable inside the block scope with the "var" keyword instead" of "let", you get access to it globally.
example
( 100 > 20){ var number = 20 }
console.log(number)
"20" will be printed to the console.
this is one of the biggest difference between declaring a variable with "var" and "let" keywords. personally, i always use "let" and "const" that just got introduced in the new JavaScript es6 syntax for all my projects. it helps avoid weird behaviors that happens with the "var" keyword.
I hope this article was helpful.
Top comments (0)