Example

Function Block & Lexical scope

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
    <title>Function Block & Lexical scope</title>
</head>    
<body>
<!--
    Local Variables : Variables declared within a JavaScript function, become LOCAL to the function.
                        Local variables can only be accessed from within the function.
    Block Level Scope : This scope restricts variable declared inside a specific block, from access by the outside of the block. 
                        let & const keyword facilitates variables to be block scoped.
    Lexical scope : means a variable defined outside a function can be accessible inside another function defined after the variable declaration. 
                    But the opposite is not true; the variables defined inside a function will not be accessible outside that function.
-->

    <h1>Demo: JavaScript Functions</h1>

    <div>
        <h2>Function Block variable Scope - Part(1)</h2>
        <p id="para1"></p>
        <p id="para2"></p>
        <p id="para3"></p>
    </div>

    <div>
        <h2>Function Block variable Scope - Part(2)</h2>
        <p id="para4"></p>
        <p id="para5"></p>
    </div>

    <div>
        <h2>Function Lexical Scope</h2>
        <p id="para6"></p>
        <p id="para7"></p>
        <p id="para8"></p>
        <p id="para9"></p>
    </div>


    <!-- JavaScript code Starts here -->
    <script>

        /************************************************/
        // Function variable Scope - Part(1)
        // Score Goals Example
        //
        let totalGoals = 0;     // Declaring the global variable 
        function scoreGoals() {  
            let totalGoals = 5;     // Declaring the local variable 
            document.getElementById('para2').innerHTML = 
            "Local Variable value within the function declaration - totalGoals = " + totalGoals;
        }    // End of function declaration block

        document.getElementById('para1').innerHTML = 
        "Variable value before involing the function - totalGoals = " + totalGoals;
        
        scoreGoals();          // Function calling or invoking

        document.getElementById('para3').innerHTML = 
        "Variable value after involing the function - totalGoals = " + totalGoals;


        /************************************************/
        // Function variable Scope  - Part(2)
        // Dog Names Example
        //
        let dog = 'Charlie';   // Declaring the global variable
        function dogNames() {
            dog = 'Sultan';    // Re-assigning global variable, locally in a function
            document.getElementById('para4').innerHTML = 
            "Dog name within a function = " + dog;
        }
        dogNames();            // Function calling or invoking
        document.getElementById('para5').innerHTML = 
        "Dog name after involing the function = " + dog;

    
        /************************************************/
        // Function Lexical Scope
        // Example : Cricket Team India scored in WorldCup
        //
        function indiaWorldCup() {
            const runScored = [317,350,322,301];
            function announceScores() {
                let matchNum = 1;
                function scoreBoard() {
                    let paraNum = 6;
                    for (let run of runScored) {
                        document.getElementById(`para${paraNum}`).innerHTML =
                        `${matchNum} : Team India scored ${run} runs.`;
                        matchNum++;
                        paraNum++;
                    }
                }
                scoreBoard();
            }
            announceScores();
        }
        indiaWorldCup();

    </script>   
    <!-- JavaScript code Ends here -->

</body>
</html>

Output

View original