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 in Javascript?
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);
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("var a=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 as a 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
var aVar=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 as a 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 in apply 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
function Dummy()
{
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 Future Work
Working on
– JSDocs – for the documentation
– Integrated JSdocs in the build of the
mVisualizer
For unit testing would work either on
– JSUnit
– YUI test
