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.