In JavaScript, variables do have Global and functional scope. In above script, variable x is already
defined and assigned with the value of 5. This x has its scope globally
and is available everywhere. However, in the function, we have again declared the
same variable one more time inside the if condition. Therefore, when script gets loaded, function gets
parsed and the variable x get hoisted to the top inside the function and
creates new functional scope.It is something like, someone has declare the variable
x in the first line of the function before the if condition statement.
see below:

var x=5;//x is already defined and assigned with value 5 and is available in Global scope.
function c( ) {
var x; // variable x get hoisted to the top.
if (typeof(x) === 'undefined') {//therefore, here it will be undefined.
x = 10;//assigning value 10
alert(x); //x will be 10
}
alert(x);// x will be 10 , value of x will be 10 inside the function scope.
}
alert(x); // here the value of x will be still 5. Since it has its own value available in the global scope.

Therefore, when we call function c then x gets declared
one more time as undefined inside scope of the function. The if condition which
checks if x is undefined becomes true
and x will be further assigned by the value 10 and inside the function
scope the value of x becomes 10. However the value of the x
outside the function scope will be still 5.

Therefore, it's considered best practice to have all variables declared at the top
of the area they will be used to prevent hoisting causing a problem. JSLint is good tool which will suggest you to do this, if
test your code in JSLint.

This is because, in JavaScript all the function declarations get hoisted at the
top of the script. However, function expressions are not get hoisted till they evaluated.
Therefore, declareMe function will be available even before its declaration
gets evaluated. Hence the call declareMe() will be evaluated without
any exception. However, the fnExpression() call will throw exception
saying that "Object Expected". Because, fnExpression is a function expression and as per hoisting principle the function will not be hoisted at the top of the script unless function expression gets evaluated.

Let me explain it in Execution Context point of view also

In ECMAScript functions are objects and each line of JavaScript code executes in separate Execution Context.

There are 3 Execution contexts for above lines of code.

First is Global Execution Context during this all variable instantiations happens
and assigned to Global Object.

2nd is "declareMe" function invoke Execution Context.

3rd is "fnExpression" function invoke Execution Context.

During the Global Execution Context:
Variable instantiations takes place and Function objects are created for all Function Declarations and got assigned to Global Object. Hence, the function object (for declareMe function) that is created is referred to by the property of the Global Object with the name "declareMe".

However, function objects are not created for function expressions during the variable instantiation of the Global Execution Context. Hence, the Global Object will have property named as "fnExpression" with having no function object assigned.

In the next Execution context that is the function call to declareMe function ( declareMe(); ) will get evaluated successfully because, global object already had the property named as declareMe referring to the corresponding function object which get invoked.

And in the last Execution context that is the function call to fnExpression function ( fnExpression(); ) will result "Object Expected" error because, global object had the property named as fnExpression which had never assigned with corresponding function object.

Question on Closure

Write a function named asnewAdd such that it will
add 2 numbers by invoking in below way:newAdd(2)(5);

The above function declaration creates a num1 variable in the newAdd
function scope. The num1 variable will be available to the inner
anonymous function because of the closure. Hence when we first call newAdd
with value 2 then it stores the value 2 in num1 and returns
a anonymous function which takes one more variable, adds it with the num1
value and returns the final result. In the second time call by passing 5 the anonymous
function gets invoked, sets num2 is equal to 2, does the sum of num1
and num2 makes it 5+2 and returns the final result as 7.

Last Question

This question is last but still it has significant importance.

What would be the result of below script

var x=5;
alert(x == "5") //what would be the result here ?
alert(x === "5") //what would be the result here ?

Answer: First alert will say true, and second will say false

The == equality operator only compares the value, it never compares the data type.
Therefore, the first comparison results true. The === equality operator compares
both value and data type hence the 2nd comparison statement results false. Therefore,
if we want to compare the value along with the type then we should use === operator.

The answer is "a=='' is true". So suppose if a = 0 then you wanted to print a is 0 . However it will not go to the else condition rather it will go in if condition only because, "==" operator does type coercing. Therefore, if you want to compare the value as well as the data Type then always use "===".

I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.

Good question.
Please note whenever you want to preserve the local scope data in a loop then it is required to create a closure there. Please see in a situation where you want to bind click event on dynamically added buttons in DOM and on each click event you want to show a unique value. Think of this situation how will you handle this ?

To clarify the example in the jsFiddle, variables in Javascript do not have block scope. So with every iteration in the for loop, i (which has global scope in that example) is updated to the value of the incremented value. The use of the fnclosure lambda creates a closure by way of the parameter p which has scope that is local to that function. That creates the closure.

A better, real-world example of how a closure can be used would be the Module pattern and the revealing Module pattern. You'll need to understand self-invoking functions before researching those patterns.

Nice article, I have used JavaScript alot in the last 4 years of my career. Would have been nice if you could have included something about how objects work, and an explanation about the fact that JavaScript does not contain Classes.