Saturday 1 September 2018

JavaScript: function scope and hoisting

If you come from languages like c, java you may have heard about block scope. In block scope, a variable defined inside a block {}, is not visible (or) accessible outside the block. JavaScript don't have block scope, it supports function level scope. A variable defined inside a function is available throughout the function.

scope.html
<!DOCTYPE html>

<html>

<head>
    <title>Function Scope</title>
</head>

<body>
    <script>
        function processData() {
            var i = 10;

            // Even though j is defined inside loop, it is available throughout the function
            for (var j = 0; j < 100; j++) {
                var k = 9999;
            }

            document.write("i = " + i + "<br />");
            document.write("j = " + j + "<br />");
            document.write("k = " + k + "<br />");
        }

        processData();
    </script>
</body>

</html>

Load scope.html in browser, you can able to see following text.

i = 10
j = 100
k = 9999

As you see the file ‘scope.html’, variables j and k are defined in for loop. Due to the concept of functional scope variable j and k are available outside the loop also.

Hoisting
Variables are visible before declaration.

var name = "Hari krishna";

function processData(){
         // Usually you may expect the value "Hari Krishna" here, but it is undefined
         document.write("name = " + name + "<br />"); // Line 1
                                   
         var name = "Deeraj"; // Line 2
                                   
         document.write("name = " + name + "<br />");
}      
                          
processData();
                          
You may think that the first line in the function prints the value “Hari Krishna”, but as I said the local variable defined in a function is available throughout the function, even though the variable 'name' defined at 2nd line, it is still visible at line 1 as undefined value. So you will get undefined.


hoisting.html

<!DOCTYPE html>

<html>

<head>
    <title>Function Scope</title>
</head>

<body>
    <script>
        var name = "Hari krishna";

        function processData() {
            document.write("name = " + name + "<br />");

            var name = "Deeraj";

            document.write("name = " + name + "<br />");
        }

        processData();
    </script>
</body>

</html>

Open above page in browser, you can able to see following data.

name = undefined
name = Deeraj

Hoisting is applicable to nested functions also. When you declare a variable using var keyword, the hoisted variable initialization code remains same where you placed it and it has the value
undefined before the initialization. With function declaration statements, both the function name and function body are hoisted.


functionHoisting.html

<!DOCTYPE html>

<html>

<head>
    <title>Hoisting Example</title>
</head>

<body>
    <script>
        function arithmetic(a, b) {

            var result = [add(a, b), sub(a, b), mul(a, b), div(a, b)];
            return result;

            function add(a, b) {
                return a + b;
            }

            function sub(a, b) {
                return a - b;
            }

            function mul(a, b) {
                return a * b;
            }

            function div(a, b) {
                return a / b;
            }
        }

        var result = arithmetic(10, 20);
        document.write("Addition : " + result[0] + "<br />");
        document.write("Subtraction : " + result[1] + "<br />");
        document.write("Multiplicaiton : " + result[2] + "<br />");
        document.write("Division : " + result[3] + "<br />");
    </script>
</body>

</html>

Open above page in browser, you can able to see following text.

Addition : 30
Subtraction : -10
Multiplicaiton : 200
Division : 0.5


Previous                                                 Next                                                 Home

No comments:

Post a Comment