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
No comments:
Post a Comment