Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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





Function Scope




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 + "
"
);
document.write("j = " + j + "
"
);
document.write("k = " + k + "
"
);
}

processData();





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 + "
"); // Line 1
                                   
         var name = "Deeraj"; // Line 2
                                   
         document.write("name = " + name + "
");
}      
                          
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






Function Scope




var name = "Hari krishna";

function processData() {
document.write("name = " + name + "
"
);

var name = "Deeraj";

document.write("name = " + name + "
"
);
}

processData();





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






Hoisting Example




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] + "
"
);
document.write("Subtraction : " + result[1] + "
"
);
document.write("Multiplicaiton : " + result[2] + "
"
);
document.write("Division : " + result[3] + "
"
);





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

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


Previous                                                 Next                                                 Home


This post first appeared on Java Tutorial : Blog To Learn Java Programming, please read the originial post: here

Share the post

JavaScript: function scope and hoisting

×

Subscribe to Java Tutorial : Blog To Learn Java Programming

Get updates delivered right to your inbox!

Thank you for your subscription

×