Understanding functions

Functions are first-class citizens in JavaScript. What this means is that a function by itself is an object, so it can be treated as such and extended with properties and additional functions to the base Object class. We will see a lot of situations where we pass functions as parameters to other functions and return functions from other function calls.

Here, we will take a standard function (in this case, myFunction). We will assign this function a timesRun property, just like we do for any other object during its execution, and see how to refer to that property later:

var myFunction = function() { 
  if(this.timesRun) 
    this.timesRun += 1; 
  else 
    this.timesRun = 1; 
  // do some actual work 
   
  console.log(this.timesRun); 
}; 
myFunction(); 
// => 1; 
myFunction(); 
// => 2; 
myFunction(); 
// => 3;  

As we have seen in the preceding example, by using the var keyword, we can define functions in the same way as variables:

function sayHello() {
console.log('Hello!');
}
// or
var sayHello = function() {
console.log('Hello!');
};

Both methods are almost identical in the preceding sample code. The first method is the most common way to define a function, and is called the named function approach. The second method discussed here is the function expression approach, where you assign the unnamed function as a reference to a variable and keep it unnamed.

The single most important difference between these two approaches is related to a concept called JavaScript hoisting. Basically, the difference is that when you adopt a function expression strategy, the function will not be available in its containing scope till the point, its definition statement gets executed. In the named function approach, regardless of the position you define it at, the function will be available throughout the containing scope as given in the following code:

one();//will display Hello  
two();//will trigger error as its definition is yet to happen. 
 
function one() { 
    console.log('Hello!'); 
} 
 
var two = function() { 
  console.log('Hello!'); 
}; 
two ();//will display Hello 

In the preceding sample code snippet, function one can be invoked from anywhere in its parent scope. But function two will not be available before the point where its expression is evaluated.

JavaScript hoisting is the process by which the function definitions and variable declarations are moved to the top of the containing scope by the JS interpreter before the script is executed. So, in the previous case of named functions, the definition was moved to the top of the scope. However, for the function expression, only the declaration of the variable moved to the top of the scope, setting it to undefined till the point in the script where it was actually executed. You can read more about the concept of hoisting at http://code.tutsplus.com/tutorials/JavaScript-hoisting-explained--net-15092.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.216.96.94