Do not declare function and variable with the same name in same scope

In Javascript functions and variables share same namespace  and that is why this code will break

 

<script>         function ThisIsAFunction(n) {             alert(n);         };           var ThisIsAFunction = 'India';           alert('abount to execute');           ThisIsAFunction('Hello');     </script>

 

Basically 1^st statement in code is similar to

var ThisIsAFunction  = function ThisIsAFunction(n) { alert(n); };

 

Or

 

var ThisIsAFunction = = function (n) { alert(n); };

 

and this will collide even inside a closure as closure will be scope rather than global.

Close with function notation

See how private and public methods are accessible from outside. Last statement will not work,  tell me why ?

 

var Inventory = function InventoryConstructor(n) {      var that = function(n)      {         title = n;         GetTitle = function()         {              return title;         };           };        var names = ['Honda', 'BMW', 'Kia', 'Toyota'];      that.FindIfCarMakeIsInList = function(m)      {          return names.indexOf(m) > -1 ;      };        that.TotalMakesWeHave = names.length;           that.AddMake = function(m)      {        if(names.indexOf(m) === -1)        {           names[names.length] = m;        }        return true;      }        return that; }('India inv');   alert('Is Acura in list ->' + Inventory.FindIfCarMakeIsInList('Acura')); alert('How many car make we have ? ' + Inventory.TotalMakesWeHave); alert('add Acura in list ->' + Inventory.AddMake('Acura')); alert('Is Acura in list ->' + Inventory.FindIfCarMakeIsInList('Acura')); alert('How many car make we have ? ' + Inventory.TotalMakesWeHave); alert(Get Title ' + Inventory.GetTitle()); // This will fail, tell me why ?

 

Thanks

Pradeep

Clouse that return Object literal and how to use returned Object literal Methods

Returning Object literal from Closure and using methods and Properties returned in the object literal.

 

var Inventory= function() { var names = ['Honda', 'BMW', 'Kia', 'Toyota']; // it will be initialized only once.    // return an object literal so that we can access more than one operation return {      FindIfCarMakeIsInList : function(make)      {          return names.indexOf(make) > -1 ;      },        TotalMakesWeHave : names.length,      AddMake : function(m)      {         if(names.indexOf(m) === -1)         {            names[names.length] = m;         }         return 1;      }    } }();   alert('Is Acura in list ->' + Inventory.FindIfCarMakeIsInList('Acura')); alert('How many car make we have ? ' + Inventory.TotalMakesWeHave); alert('add Acura in list ->' + Inventory.AddMake('Acura')); alert('Is Acura in list ->' + Inventory.FindIfCarMakeIsInList('Acura')); alert('How many car make we have ? ' + Inventory.TotalMakesWeHave);

 

Thanks

Pradeep

When to use Closure in JavaScript

Here is when and how..

Problem to solve – find if an element exists in an array.

Bad code 1 – clutter global namespace

var names = ['Honda', 'BMW', 'Kia', 'Toyota']; var findIfCarMakeIsInList = function(make) {   return names.indexOf(make) > -1 ; } alert('Is Honda in list ->' + findIfCarMakeIsInList('Honda')); alert('Is Acura in list ->' + findIfCarMakeIsInList('Acura'));

Bad code 2  - slow because of initialization of local list every time method is call

var findIfCarMakeIsInList = function(make) {   var names = ['Honda', 'BMW', 'Kia', 'Toyota'];   return names.indexOf(make) > -1 ; } alert('Is Honda in list ->' + findIfCarMakeIsInList('Honda')); alert('Is Acura in list ->' + findIfCarMakeIsInList('Acura'));

Closure helps us to

1.       Avoid polluting global namespace

2.       And get the benefit of global objects.

var  FindIfCarMakeIsInList = function() { var names = ['Honda', 'BMW', 'Kia', 'Toyota']; // it will be initialized only once. // return function reference so that if can be called. return function(make) {       return names.indexOf(make) > -1 ; }; }(); alert('Is Honda in list ->' + FindIfCarMakeIsInList('Honda')); alert('Is Acura in list ->' + FindIfCarMakeIsInList('Acura'));

Thanks

Pradeep

Keep learning “JavaScript good part..”