Javascript uses function as scope. Declare a function inside another function creates a different scope. Let’s look at the example code below.
function outer_scope(){
var a = 'I am `a` from outer scope',
b = 'I am `b` from outer scope';
console.log( 'logging from outer scope before inner scope function declaration' );
console.log( 'a: ' + a );
console.log( 'b: ' + b );
console.log( '------------------------------------------' );
function inner_scope_1(){
console.log( 'logging from inside function inner_scope_1 before variable declaration' );
console.log( 'a: ' + a );
a = 'I will overwrite the outer scope `a`';
console.log( 'logging from inside function inner_scope_1 after variable declaration' );
console.log( 'a: ' + a );
console.log( '------------------------------------------' );
}
function inner_scope_2(){
console.log( 'logging from inside function inner_scope_2 before variable declaration' );
console.log( 'b: ' + b );
var b = 'I will not overwrite the outer scope `b`';
console.log( 'logging from inside function inner_scope_2 after variable declaration' );
console.log( 'b: ' + b );
console.log( '------------------------------------------' );
}
inner_scope_1();
inner_scope_2();
a = 'I will be the new `a`';
b = 'I will be the new `b`';
console.log( 'logging from outer scope after inner scope executed' );
console.log( 'a: ' + a );
console.log( 'b: ' + b );
console.log( '------------------------------------------' );
}
outer_scope();
Result
logging from outer scope before inner scope function declaration a: I am `a` from outer scope b: I am `b` from outer scope ------------------------------------------ logging from inside function inner_scope_1 before variable declaration a: I am `a` from outer scope logging from inside function inner_scope_1 after variable declaration a: I will overwrite the outer scope `a` ------------------------------------------ logging from inside function inner_scope_2 before variable declaration b: undefined logging from inside function inner_scope_2 after variable declaration b: I will not overwrite the outer scope `b` ------------------------------------------ logging from outer scope after inner scope executed a: I will be the new `a` b: I will be the new `b` ------------------------------------------
From the result above we can see clearly the inner scope variable without var overwrites the outer scope variable. Variables in the inner scope declare with var creates a local variable only available inside this scope( function ).
The above example is also called closure. So when exactly and how to use ? In OOP we use class attributes to store data. With closure we can store data to `higher level`( outer ) scope variables and reuse it.
Example
function photo(){
var name = 'ben';
return{
say_my_name : function(){
console.log( name );
},
rename : function( new_name ){
name = new_name;
}
};
}
var pic = new photo;
pic.say_my_name();
pic.rename( 'bibi' );
pic.say_my_name();
Result
ben bibi
node.js function scope
node.js has it’s own function scope conventions. In client side javascript variables declare with var on the highest scope is a global variable. That’s why we have the self executing anonymous function pattern for not creating global vars.
In client side javascript this equals to window.name = 'ben'
var name = 'ben';
In node.js it wraps a self executing anonymous function when it loads the file
var name = 'ben';
// the above equals to the following
( function( global ){
var name = 'ben';
})( global );
To access the global object we need to declare the variable with global keyword
global.name = 'ben';
Hope the above examples give you a clear view about what a scope and closure is. Next we will be looking at javascript callbacks.
