Day 4 : JavaScript Shadowing

Shadowing in JavaScript :

                   

• Simply shadowing means exact copy of anything.
• In Programming, when a function or variable declared within inner class has same name as function or variable declared in outer class then shadowing occurs.
• So their are two concepts:  

1. Variable Shadowing
2. Function Shadowing

• We can say that the outer variable or function is shadowed by the inner variable or function.
• We can also say that the inner variable or function is mask of outer variable or function.

Variable Shadowing:

• Example :

• Output:

• In above program, variable a declared in outer scope has value 10 and redeclared in inner  scope has value 5.Because of shadowing it shows inner scope value after function call. If we display the variable a in outer class then it shows 10.

                                       i.e

                                        alert(a);    //10 

Function Shadowing:

• Example:

• Output:

• In above example, we declared two functions with same name.The first function want to display Hii!! and the second want to display Hello!!. As we see above output it shows Hello!! only. 
• It is because the second function shadows the first function. So it only shows the second function output.

• If we want to display both the functions then we can use the iife concept. Means we declare the first function as iife and second remains same.
• How we can declare first function as iife?? ..... we see later in this blog. 

• "The shadowing is not used by the programmers because for lengthy projects it is impossible to find the errors in whole program, if we give same names.So programmer's prefer unique names."

 IIFE:

              

• IIFE stands for Immediately Invoked Function Expression.
• IIFE is a self invoking function i.e it automatically invokes when definition is completed.
• IIFE contains parenthesis () which are important here, these parenthesis contain expression not statements.
• IIFE has variables and methods which are not accessed from outside. If we want to access them we must pass global window object as a parameter.
• Syntax:

                              ( function(){

                                        //statements or code

                              }) ();

• Example 1:

                 //IIFE without passing arguments  

                 (function (){

                          var a="Learn";

                          function simple(a){

                             var b=" Angular";

                             alert(a+b);

                          }

                         simple(a);

                   }) ();

• Output:

• Example 2:

              //IIFE with passing arguments 

              

              var a="Learn";

              ( function(n) {

                          function simple(n) {

                             var c=" JavaScript";

                             alert(n+c);

                          }

                          simple(n);

              }) (a);

• Output:

Advantage of IIFE:

         1) IIFE is an self invoking function.

         2) If the variables and functions defined in IIFE then they don't conflict with other variables and functions even if they have same name.

         3) They are useful for one time execution of task.

Thank you!!!

For more understanding watch below video :

Angular

JavaScript Day 1 : Day 1

JavaScript Day 2 Global Pollution : Day 2 Global

JavaScript Day 2  Undefined and Hoisting : Day 2 Undefined

JavaScript Day 3 : Day 3