Voice of a Developer: JavaScript Functions Invocations - Part 11

Sumit Jolly
May 03, 2016
9.5k
0
2
Article

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:

function logMe() //function name logMe
{
console.log ('Log me in');
}
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:

(function ()
{
console.log ('Log me in');
})(); // 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:

function logMe()
{
console.log ('Log me in');
}
logMe();
function logMe()
{
console.log ('Log me again');
}
logMe();

What do you think 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.

var log = function (){
console.log('Log me in');
}

Now writing logMe after the function is futile because it can now be called using the assigned variable log.

Consider the following example:

var log = function logMe(){
console.log ('Log me in');
}
log();
var log = function logMe(){
console.log ('Log me again');
}
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 because it’s 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:

var programmer = {
lang: 'Javascript',
browser: 'Chrome',
getFullSpecs: function(){
console.log(this.lang+ ' running inside ' + this.browser);
}
}

Here an anonymous function is assigned to the getFullSpecs property. Incase of anonymous function Javascript doesn't apply function hoisting. We will learn more about these functions in 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.