JavaScript: Introduction to Scope (function scope, block scope)

What is Scope?

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

Global Scope

There's only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

//global scope
var fruit = 'apple'
console.log(fruit);        //apple

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //apple

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable can be used in different functions because they are bound to the respective functions and are not mutual visible.

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

Local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA script 6 (ES6) together with the new ways to declare variables -- const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can't access it outside the function. var is the keyword to define variable for a function-scope accessibility.

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined 

Block Scope

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

Lexical Scope

Another point to mention is the lexical scope. Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

function foo1(){
    var fruit1 = 'apple';        
    const fruit2 = 'banana';     
    let fruit3 = 'strawberry';
    function foo2(){
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
    }
    foo2();
}

foo1();

//result:
//apple
//banana
//strawberry

For detailed comparison between var, let and const, take a look of JavaScript: var, let, const!

Comments

[M.Navid]

Thank you @mingt .
I think there is a misinformation In "Lexical Scope" topic that you define it: "children scope have the access to the variables defined in the parent scope."
I think that definition is for "Scope Chain" and the "Lexical Scope" related to which type of referencing to parent in Scope Chain does JS (Lexical or Dynamic).

[Jyotirmoy Deb]

is block scope and child scope same ?

[Oshie]

I have not seen any simple explanation of function scope and block scope before. It is a worthwhile article to read, thanks

[Gaurav Gupta]

_Easy and Clear explanation: thanks for sharing this article. _

[Kibirige John]

Thank you so much for the elaborative write-up

[Hafed Benchellali]

Thank you I Finally understood !

[KH]

clear, helpful description of scope! Thanks!

[yusufnviiri]

Thank you for such Great work

[B77748]

Thank you, it's very clear now.

[Mark Rubanza]

nice explanation
salut

[outman boko]

Thank you so much for that explanation

[Vikler Charles]

Very helpful article! :)

[Mahmoud Abdulmuty]

Good Explanation .. thanks alot

[Mohamad-serhan]

Fantastic, great job

[Siddh]

If we are not able to reassign the value in the variable that is defined with the const
then why it is changing his value every time, when the loop gets executed

const array = [1,2,3,4] ;

for (let index = 0; index < array.length; index++) {
const element = array[index];
console.log(element);
}

answer is

1
2
3
4

[Dev Hamza]

you are storing the array[index] in element
you are not re-declaring but you are updating the value of element