Javascript Interview Questions and Answers – Part16

151. A test to see if Javascript has block scope
So, back to the original question: does Javascript have block scope?
Instead of just giving you a simple yes/no answer, let’s run a test to see if it does since that will really help you remember the answer:

function scopeTest() {
/* consider this simple for loop
to be the "block" that we were
talking about earlier
*/
for (var i = 0; i <= 5; i++)
{
var inFor = i; 
}
alert(inFor); // what happens here?
}
// call the function defined above
scopeTest( );

In the code above, we have a variable called inFor that was declared in a for loop. We then try to access the inFor variable outside the for loop in the alert statement.
If the code above does not alert anything then we know it’s because Javascript uses block scope. In a block scoped language, the variable inFor will not be visible outside of the for loop. This means that if Javascript is a block scoped language, then the call to “alert(inFor);” will not recognize the inFor variable, and nothing will be output to an alert box.
But, the code above actually outputs a “5”, which means that the inFor variable does exist outside of the for loop, which must mean that Javascript does NOT have block scope. And there is our answer – Javascript does not have block scope.

152. Block scope vs Function scope
So, if Javascript doesn’t use block scope, then what kind of scope does it use?
Well, Javascript uses something called function scope. You can read more about function scope in our article here: Function Scope in Javascript.
Basically, the difference between function scope and block scope is that in a language that uses function scope, any variables declared within a function are visible anywhere within that same function. But with block scope, the visibility of variables is confined to any given block (whether it’s an if statement, where/for loop, etc) enclosed by curly braces.

153. What is Function Scope in Javascript?
Although Javascript does not haveBlock Scope, it does have what is known as function scope. Function scope means that any variables declared inside a function will be visible in the entire function in which they are defined, regardless of whether those variables are declared inside a while loop, for loop, if statement, or some other block of code within that function. Even nested functions (which are basically functions declared within other functions) can access and view variables that are declared in theirouter, enclosing, function(s).
As always, the best way to demonstrate function scope is with an example:

154. Example of Function Scope in Javascript

function scopeTest() {
var x = 2;
//this is always true:
if(x == 2)
{
var y = 15;
for (var i = 0; i <= 5; i++)
{
var inFor = i; 
}
}
console.log(y); // y is defined, prints 15 
console.log(i); // i is defined, prints 6
console.log(inFor); // inFor is defined, prints 5
}

You can see in the code above that the variables y, i, and inFor are declared either inside the if statement or inside the for loop. But, even though those variables are declared inside those separate “blocks”, they are still visible to the rest of the function. This is because all of those variables are declared inside one function – which is what function scope is all about.
Here’s another example of how Javascript uses function scope – a nested function can access and view variables that are declared in it’s outer, enclosing function.

155. Nested functions can view variables declared in their outer functions

function scopeTest() {

var x = 2;

/* this is a nested function
because it is defined inside another
function - scopeTest
*/
function nested ( )
{
/* this will output 2 because the nested function can
see the variable x even though it is declared inside 
the outer function scopeTest */ 
alert(x); 
}
// call to the nested function
nested();
}

// call to the outer function
scopeTest( );

You can see in the code above that the nested function will have access to the outer function’s variable “x”. And the code above will output “2” because of that fact. This is all because Javascript uses function scope – where variables declared within a function are visible even within the nested functions.

156. What is hoisting in Javascript? Also, provide an example of hoisting.
Because Javascript has Function Scope, this also means that variables declared within a function are visible anywherein that function. So, if a variable is declared in the middle or even at the very bottom of a function, that variable will still be visible even at the top of the function – meaning that the variable will be visible above its declaration. But, this does not mean that assigned values will still remain associated with the variable – it’s just that the variable name will be recognized starting from the verybeginning of the function.
This is an interesting feature of Javascript known as hoisting, because it is as if Javascript is “hoisting” (which means to move up) the variable declaration to the top of the function. And it is best to explain this feature through an example:

157. Example of Hoisting in Javascript

// global variable
var testVar = "I'm a global";

function example( )
{
alert(testVar); //what does this line alert?

/*local variable with same name as the global
declared outside the function
*/

var testVar = "I'm a local var";
alert(testVar); // what does this line alert?
}

example( );

The question is what do the lines above output to the page?

If you guessed that the first one outputs “I’m a global” and the second one outputs “I’m a local var”, then you would unfortunately be wrong. Because of the way that function scope works, the code above will actually output this:
undefined
I’m a local var
Here is what’s happening: the local testVar variable (the one declared in the example function) behaves as if it is defined throughout the entire function – even at the very top, because of the property of hoisting. This means that the global variable with the same name (“testVar”) is essentially hidden inside the function, because the local variable will take precedence over the global, and will be visible throughout the entire function.
So why would the first alert output “undefined” if the testVar variable is actually defined throughout the entire function? Well, remember we said that the value assigned to the variable will not also be moved up to the top of the function – so even though the variable is recognized at the top, it does not actually have a value associated with it until this line is executed:
var testVar = “I’m a local var”;
You can think of our example above as being equivalent to this code – where the variable is declared at the top of the function, but the variable is not assigned an actual value until lower down in the function:

function example( )
{
var testVar;

alert(testVar); //outputs "undefined"

var testVar = "I'm a local var";
alert(testVar); // outputs "I'm a local var"
}

example( );

 

Sign-up for our email newsletter and get free job alerts, current affairs and GK updates regularly.
Subscribe Here (or)

Leave a Reply

Your email address will not be published. Required fields are marked *


7 + four =

Popup Dialog Box Powered By : XYZScripts.com
  • RSS
  • Facebook
  • Google+
  • Twitter