JavaScript Tips and Tricks - 6

Implicit Vs Explicit Global Variable-
We all know that if we don't write var keyword, JavaScript will define the variable globally.
var myglobalVar = '';
(function (){
   anotherGlobalVar = '';
})();
typeof(myglobalVar); // string
typeof(anotherGlobalVar); // string
In the above example both myglobalVar and anotherGlobalVar are global and thus are available in the whole javascript.The "anotherGlobalVar" is also called as implied global variable.
The implied global variables are technically not real variables, the are properties of global object. Properties can be deleted with delete operator whereas variables can not and that is why we can delete the peoperty anotherGlobalVar but not myglobalVar.
which means -
delete myglobalVar; // false
delete anotherGlobalVar; //true

There are other ways where we can create implied global variables, one of them is chain of assignment.
Here is example -
function(){
    var a = b = 0;
}
In the above example variable a is local, whereas b is global.

Variable Hoisting -
JavaScript enables you to have multiple var statements anywhere in a function, and they all act as if the variables were declared at the top of the function. This behavior is known as hoisting. Sometimes it creates problem. lets take an example -
var myglobalVar = 'global';
(function (){
    alert(myglobalVar); //--1
  var myglobalVar = 'local';
  alert(myglobalVar); // --2
})();
In the above example what do you think the output will be? 1- global and 2- local, right? -- NO
the output is undefined and local. myglobalVar is declared locally. Even if it is declared after alert, then also JavaScript consider this as local and for this scope of the function it will be local. Thus the first alert gives undefined and another one gives local as output.

Function Hoisting  -
When using function declaration, the definition of the function is also get hoisted, not only its declaration. The function can be defined either by function declaration or by function expression.
function expression -
function a() {};
function declaration -
var a = function (){};

Both of these will show different behaviors because of hoisting. Consider following example-
function func1(){
    alert('global func1');
}
function func2(){
    alert('global func2');
}
function func3(){
    alert(typeof(func1)); // function
    alert(typeof(func2)); //undefined
    func1(); //local func1
    func2(); // Error - func2 undefined

    function func1(){
        alert('local func1');
    }
    var func2 = function(){
        alert('local func2');
    }
}
func3();

In the given example func1 get hoisted along with its definition, but func2, its just declaration which get hoisted.

Function Invocation -
There are four ways to call a function:
Function form - Value of "this" is global object.
functionObject(arguments)

Method form- Value of "this" is set to "thisObject", object which this method defined.
thisObject.methodName(arguments)
thisObject["methodName"](arguments)

Constructor form- A new object is created and assigned to "this".
new FunctionValue(arguments)

Apply form- Value of "this" object will be "thisObject", an explicitly passed value.
functionObject.apply(thisObject,[arguments])
functionObject.call(thisObject,arguments)