What are Block Scoped variables and functions in ES6 ?

Block-scoped variables and functions are defined inside a particular block or inside curly { } braces and they can only be accessible inside that particular block or within that block. The block-scoped variables were first introduced in EcmaScript2015 or es6. ES6 introduces us with two keywords: let and const which allows us to declare variables with block scope. Let us see them in detail in this article.

The let keyword: The let keyword does not allow us to redeclare a variable in the same block, while it is possible when you declare it using the var keyword. If you try to redeclare a variable defined using the let keyword it will throw the error as SyntaxError: Identifier has already been declared.

Syntax:

let first_name="John";

Example 1: The below example illustrates when we are not redeclaring the variable with let keyword.

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        let desc =
            "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);

        var name = "GFG";
        console.log(name);

    }
    myFunction();
    console.log(desc); // ReferenceError: desc is not defined
</script>

Output:

Without redeclaration

Example 2: The below example illustrates when we are redeclaring the variable with let keyword.

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        let desc =
            "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);

        var name = "GFG";
        let desc = "Welcome to GFG";
        console.log(name);
        console.log(desc);
    }
    myFunction();
</script>

Output:

Using redeclaration

The const keyword: The variables declared using const keyword can not be redeclared like let keyword as well as we can not reassign them. We use const keyword to declare a constant whose value we don’t want to change in code. If we try to reassign the const variable it will show an error as TypeError: Assignment to constant variable.

Syntax:

const age = 23;

Example 1: In this example, we try to reassign a const variable resulting in an error.

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const desc = "A computer science portal for all geeks";
        desc = "Welcome to GFG";
        console.log(name);
        console.log(desc);
    }
    myFunction();
</script>

Output:

Example 2: In this example we try accessing a variable outside the function.

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const desc =
              "A computer science portal for all geeks";
        console.log(name);
        console.log(desc);
    }
    myFunction();
    console.log(desc); //ReferenceError: desc is not defined
</script>

Output:

Example 3: In this example we try to redeclare the description variable.

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        const description =
              "A computer science portal for all geeks";
        console.log(name);

        const description = "Welcome to GFG!";
        console.log(description);
    }
    myFunction();
</script>

Output:

Block-scoped functions: Block-scoped functions can be defined inside the block of code that block could be inside simple curly braces or inside any function of the conditional statement. If a function is written inside another function, then those functions are nested functions.

Function written inside another function:

Syntax:

 function func1(){
     // Content of the func1()
     
     function func2(){
         // Content of the func2()
     }
 }

Example:

HTML

<script>
    function myFunction() {
        var name = "GeeksforGeeks";
        function myFunction2() {
            let desc =
                "A computer science portal for all geeks.";
            console.log(name);
            console.log(desc);
        }
        myFunction2();
        console.log(name);
    }
    myFunction();
</script>

Output:

Function written inside a conditional statement:

Syntax:

if (true){
    // Content of conditional statement
    
    function func1(){
        // Content of func1()
    }
}

Example:

HTML

<script>
    if (true) {
        var name = "GeeksforGeeks";
        function myFunction() {
            let description =
                "A computer science portal for all geeks.";
            console.log(name);
            console.log(description);
        }
        myFunction();
    }
</script>

Output: