Javascript scoping

Javascript scoping

• 1.
  Scoping and functionsin Javascript Aditya Gaur Mentor: Apurba Nath
• 2.
  Why Scope?  Controls the visibility of variables and parameters  A programmer should know about scope to prevent naming collisions and ambiguity
• 3.
  Why Scope inJavascript?  Javascript is NOT “s ome othe r la ngua ge ”  Unlike other languages like C, C++, Javascript does not support bloc k le ve l s c ope  Supports function level scope
• 4.
  Block level scope? var a =10 ; Output 20 if(true){ var a = 20; } alert(a); var a =10 ; Output 10 function randomFunc(){ var a = 20; } randomFunc(); alert(a);
• 5.
  Declaration and Definition var someVar = 10; is broken into var someVar=undefined; someVar =10;
• 6.
  Declaration and Definition function someFunc(){ //some random statements var aVar = 10; //some more random statements } is converted to function someFunc(){ var aVar = undefined //some random statements aVar = 10; //some more random statements }
• 7.
  The var function Dummy(){ Output: Error- privateProperty is not var privateProperty = 10; defined } alert (privateProperty); function Dummy(){ Output: 10 isItPrivate = 10; } alert(isItPrivate); So what's happening? Actually the keyword var defines the scope of the variable. If we don't give the keyword var then it is assigned to the window object
• 8.
  The eval function eval("vara=10"); Output: 10 alert(a); function someFunc(){ Output: 10 eval("var a=10"); 'a' is not defined alert(a); } someFunc(); alert(a); Variables declared in the eval have the scope in which they are called.
• 9.
  this is tricky  It is one of the most important concept to grasp in javascript  Its value depends in the way the function has been called.  A function can be called in the following ways: – As a method – As function invocation – As a constructor – In apply invocation
• 10.
  1. Function asa method var aVar=10; Output: 40 var obj= { aVar: 40, show: function(){ alert(this.aVar); } }; obj.show(); this is bound to the object from which the method is invoked.
• 11.
  2. function invocation varaVar=10; Output: 10 function someFunc(){ var aVar =40; alert(this.aVar); } someFunc(); Here the value of this is bound to the global object.
• 12.
  3. function asa constructor function Dummy(){ Output: undefined var privateProperty = 10; } var dummyObject = new Dummy(); alert(dummyObject.privateProperty); function Dummy(){ Output: 10 this.publicProperty = 10; } var dummyObject = new Dummy(); alert(dummyObject.publicProperty); this is bound to the new object being created so it is accessible through the object.
• 13.
  Privileged method function Dummy() { var privateProperty = 10; this.privilegedMethod = function() { return privateProperty; }; } var dummyObject = new Dummy(); alert(dummyObject.privilegedMethod());
• 14.
  4. function inapply invocation var obj = { x: 15 }; function dummy(message) { alert(message); alert(this.x); } dummy.apply(obj, ["invoking dummy through apply"]); Output: invoking dummy through apply 15 Here the value of this is bound to the scope passed as the first argument in the apply function
• 15.
  A catch function Dummy() { return function (){ alert (this); }(); } var dummyObject = new Dummy(); Here this refers to the global object. Why? The anonymous function here is executed immediately thus it is just like the function invocation and in function invocation this refers to the global window object
• 16.
  A fix functionDummy() { var that = this; return function (){ alert (that); }(); } var dummyObject = new Dummy(); Now we have the correct behaviour. This is possible because javascript supports function closure.
• 17.
  Current and FutureWork  Working on – JSDocs – for the documentation – Integrated JSdocs in the build of the mVisualizer  For unit testing would work either on – JSUnit – YUI test
• 18.
  Current and FutureWork
• 19.
  References  Javascript: the good parts by Douglas Crockford  YUI theater videos by Douglas Crockford
• 20.
  Thank You