JavaScript Scope – What is Scope in JavaScript?

The Scope in JavaScript basically refers to the availability of different variables. It’s the policy to manage these variables and make them available. The variables defined in a Scope are only accessible within that Scope. If you try to access them outside that Scope, they will fail.

How are scopes created in JavaScript? In JS these Scopes are created by functions, modules and code blocks. Let’s see the tutorial below to understand the concept of Scope in JavaScript.

 If you declare a variable or function in JavaScript then it will be valid in certain defined areas of your JS code and it will be invalid in other areas of your JS code. Where a declared variable or function is valid and can be accessed those areas are called the scope of that particular variable or function. 

Let me tell you what this means. Please declare a variable in JS and then write 2 functions. 

let myVariable = 5
function myFunction1(){
    console.log(myVariable)
}
function myFunction2(){
    console.log(myVariable)
}
myFunction1();
myFunction2();
console.log(myVariable)

Now myVariable is valid and can be accessed in both functions myFunction1() and myFunction2(). This is called Global scope in JS, when a Variable of function can be accessed anywhere. 

Let’s declare a variable inside myFunction1 and try to access it in that function and outside.

let myVariable = 5

function myFunction1(){
    let myFunction1Variable = 9
    console.log(myVariable)
}

function myFunction2(){
    console.log(myFunction1Variable)
    console.log(myVariable)
}

myFunction1()
myFunction2()
console.log(myFunction1Variable)
console.log(myVariable)

This will cause errors in that code because myFunction1Variable is only defined and valid in myFunction1 and nowhere else. So my myFunction1Variable has Functional Scope inside only myFunction1 and there only. It is not valid in global scope or inside other functions like myFunction2. 

Now let’s create a few blocks of conditional statements in our code.

let myVariable = 5

if(myVariable == 5){
    console.log(myVariable)
}

if(myVariable != 5){
    console.log(myVariable)
}

console.log(myVariable)

Now here myVariable is valid and accessible in all the blocks if the condition for block code is found valid. You can check this by changing the value of myVariable to anything else as well. Now we will try to declare a variable inside the conditional block and try to access it somewhere else. 

let myVariable = 5
if(myVariable == 5){
    let myBlockVariable = 7
    console.log(myBlockVariable)
    console.log(myVariable)
}
if(myVariable != 5){
    console.log(myBlockVariable)
    console.log(myVariable)
}
console.log(myBlockVariable)
console.log(myVariable)

Now myBlockVariable is not found valid in global scope or other conditional blocks. So myBlockVariable is only accessible in that block scope where it is declared. Block scope can be for each loop or anything else which starts and ends with {}. Even simple parenthesis can be considered a block in JS. Let me show you an example. 

let myVariable = 5
{
    let myBlockVariable = 7
    console.log(myBlockVariable)
    console.log(myVariable)
}
{
    console.log(myBlockVariable)
    console.log(myVariable)
}
console.log(myBlockVariable)
console.log(myVariable)

I hope this clears your mind about scope in JavaScript. If you have any questions please leave a comment. We appreciate that.