Programming for beginners: 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 2^nd 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

Programming for beginners

Saturday, 1 September 2018

JavaScript: function scope and hoisting

No comments:

Post a Comment