JavaScript: Context or Scope


Scope is very confusing specially when we are working on big application. But it's a very useful feature.

When function is the part of the object

var obj = {
 isUsed: false,
 use: function(){
  this.isUsed = true;
 }
};
-> obj.use();
-> obj.isUsed; //ans: true



What is the context or scope
Context or Scope is the boundary where your code executes.

var x = 10;

function test(){
 x = 20; //updated the global vlaue
}

-> alert(x); //ans: 10
-> test();
-> alert(x); //ans: 20


When 'x' is local variable !!!


var x = 10;

function test(){
 var x = 20; //now x is a local variable of test function
}

-> alert(x); //ans: 10
-> test();
-> alert(x); //ans: 20


We can change the scope of the function while calling it

function fn(){
 this.myProperty =  'test';
}
-> fn();
-> this.myProperty; //ans: test
-> window.myProperty: //ans: test
-> myProperty; //ans: test

When you run the function 'fn' it will run in global scope and set the property in global scope (e.g. window object)


When we call the same function in diff. scope.

var object = {};

function fn(){
 this.myProperty =  'test';
}
-> fn();
-> this.myProperty; //ans: test
-> window.myProperty: //ans: test
-> myProperty; //ans: test


Some useful functions

##find the Min/Max number in an array
function smallest(array){
  return Math.min.apply( Math, array );
}
function largest(array){
  return Math.max.apply( Math, array );
}
->smallest([2,3,7,6]); //ans: 2
->largest([2,3,7,6]); //ans: 7

## Appending the Arrays
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [0, 9, 8, 7, 6];

Array.prototype.push.apply(arr1, arr2);

->console.log(arr1); //ans: [1, 2, 3, 4, 5, 0, 9, 8, 7, 6]

## looping with a callback
function loop(array, fn){
  for ( var i = 0; i < array.length; i++ )
    fn.call( array, array[i], i );
}
->loop([1, 2, 3], function(value, i){ console.log(value);}); //ans: 1,2,3



Comments

Popular posts from this blog

ERROR: Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

CSS Specificity

Application Design Notes