Post
Ask Question

Voice of a Developer: JavaScript Functions Invocations - Part 11

Introduction

 
JavaScript is a language of Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript. 
 
Before moving further let us look at the previous articles of the series:
In the last article, I covered functions in depth. In this article, I will cover various ways to invoke functions. 
 
Functions are first-class citizens in JavaScript. There are many ways to declare functions in JavaScript. Let's understand each.
 

Function Declaration

 
The traditional way of defining a function is:
  1. function logMe() //function name logMe    
  2. {    
  3.     console.log ('Log me in');    
  4. }    
  5. logMe();   
If you skip the function name then it'll become an anonymous function, we'll talk about them in detail later. But here is the code:
  1. (function ()     
  2. {    
  3.     console.log ('Log me in');    
  4. })(); // we’re calling this anonymous function;   

Function hoisting

 
It is the process in which JavaScript runtime hoists all the functions declared using function declaration syntax at the top of JavaScript file, look at the example below:
  1. function logMe()    
  2. {    
  3.     console.log ('Log me in');    
  4. }    
  5. logMe();    
  6. function logMe()    
  7. {    
  8.     console.log ('Log me again');    
  9. }    
  10. logMe();  
What do you think about the output? Will it be: 
 
Log me in
Log me again
 
No, it’ll be:
 
Log me again
Log me again
 
This is because of function hoisting because JavaScript will replace the first logMe with the second one and place it at the top.
 

FUNCTION EXPRESSION

 
It’s the second form of declaring a function.
  1. var log = function (){    
  2.     console.log('Log me in');    
  3. }   
Now writing logMe after the function is futile because it can now be called using the assigned variable log.
 
Consider the following example:
  1. var log = function logMe(){    
  2.     console.log ('Log me in');    
  3. }    
  4. log();    
  5. var log = function logMe(){    
  6.     console.log ('Log me again');    
  7. }    
  8. log();   
So what shall be the output of it? Is it:
 
Log me again
Log me again
 
No, it’s:
 
Log me in
Log me again
 
The reason is that its function expression is part of the variable and not directly a function. So JavaScript will not place it at the top.
 

Anonymous function

 
It’s a function without a name. You can assign a function to a variable. Another way of declaring an anonymous function is within an object literal. For example:
  1. var programmer = {    
  2.     lang:  'Javascript',    
  3.     browser: 'Chrome',    
  4.     getFullSpecs: function(){    
  5.         console.log(this.lang+ ' running inside ' + this.browser);    
  6.     }    
  7. }   
Here an anonymous function is assigned to the getFullSpecs property. In case of anonymous function Javascript doesn't apply function hoisting.  We will learn more about these functions in the next article.
 

Function() Constructor

 
The function() constructor expects any number of string arguments. The last argument is the body of the function; it can contain arbitrary JavaScript statements, separated from each other by semicolons.
  1. var multiply = new Function("x","y","var z=x*y; return z;");    
  2. multiple(10,20);   
Output: 200
 

Summary

 
These are various ways to invoke functions in Javascript. Please share your comments/feedback.
 
Read more articles on JavaScript:


Similar Articles