JavaScript Anonymous Functions - Immediately Invoked Function Expression
FREE     Duration: 4:59
Part of Course: D3 Data Manipulation
 

Takeaways:

  • Anonymous Functions are a big part of D3 Data Visualization Example Code
  • Anonymous Functions differ from Named Functions in JavaScript by lacking a name with which to refer them to
  • There are three main anonymous function declarations you will run into: Immediately Invoked Function Expression (IIFE), Assignment to Variable, and Anonymous Functions used as a parameter passed to another function
  • IIFE functions are anonymous functions encapsulated in parentheses
  • IIFE functions are called with the parameters immediately after the last parentheses enclosing the anonymous function
  • IIFE functions are immediately invoked so cannot be called later
  • IIFE functions can take in zero or any number of arguments

Resources:
Transcript:

JavaScript Anonymous Functions - Immediately Invoked Function Expression

Named Functions vs Anonymous Functions


This is Mike Bostock's D3 Bar Chart Example

[ Image: Mike Bostock's D3 Bar Chart Example ]

The URL is the following: https://bl.ocks.org/mbostock/3885304


If we scroll down to the bottom of the D3 code, we see two different type of function calls

[ Image: svg.selectAll("...") all the way to function type(d)... ]

One - for the height attr, we see the following:

[ Image: Anonymous Function highlighted ]

Two - for the function named "type", we see the following:

[ Image: Named Function highlighted ]


Looking closer at the code highlighted, we can see that the function in the height attribute declaration does not have a name before the parentheses containing the letter "d".

While the function with the word "type" after the word "function" does have a name before the parentheses containing the letter "d".

The function without a name is called an "anonymous function".

The function with a name is called a "named function"


Let's dig deeper into anonymous functions



Three Main Ways To Define Anonymous Functions


There are three main anonymous function declarations you will run into:

IIFE (Immediately Invoked Function Expression)

( function (x) { return x * 2; } )(2);

Assignment to Variable

var multiplyByTwo = function (x) { return x * 2; };

and Anonymous Functions used as a parameter passed to another function

[1, 2, 3, 4, 5].map( function(x) { return x * 2;} );


For the rest of this video you'll look at Immediately Invoked Function Expressions.

In later videos, you'll cover Assignment to Variable and Anonymous Functions used as a parameter passed to another function.



Immediately Invoked Function Expression


The IIFE is the least common anonymous function declaration you'll run into when studying D3 data visualizations examples.

// IIFE (Immediately Invoked Function Expression) Example
( function (x) { return x * 2; } )(2);

Though it is seen less often, it will be the first one we look at because it highlights an important distinction between anonymous functions and named functions.

The distinction is that if you do not give the function a name, you will not be able to call it later.

If you do give the function a name, then you are able to call it at a later time.


Let's define a JavaScript function named "multiplyByTwo" in the JavaScript console of the Chrome web browser.

function multiplyByTwo(x) {

    return x * 2;
}

You can then see that if you type out the function name and pass the number 9 into the function, it returns the value of 18.

multiplyByTwo(9)
// should return 18

Because the function declaration had a name, you were able to reference it easily and accurately so that you could use it to calculate the result.


Now, as a second step, define an anonymous function with the same functionality in the JavaScript console.

function (x) { return x * 2; }

When you press return, Chrome throws the error "Uncaught SyntaxError: Unexpected token".

Which isn't really helpful.

What is helpful to think about is how you would go about calling this function at a later time.

Since the function declaration doesn't have a name, how are you supposed to call it?

Exactly - you can't.

Which is why Chrome throws the error, as unhelpful as it is.


Which brings us back to the IIFE.

This was the anonymous function you tried to run in the JavaScript Console:

function (x) { return x * 2; }

Since it broke, you never got the chance to pass the value of 9 to it.

This is the IIFE equivalent with the 9 being passed to it.

(function (x) { return x * 2; })(9)


The first thing to notice about this IIFE function expression is the set of parentheses around the anonymous function:

(function (x) { return x * 2; })
// the first "(" and the last ")"

When you run this in the JavaScript console, you see that it returns the function you just wrote.

Which means that even though you didn't give it a name, JavaScript understood that you had a function in there.


The second thing to notice about this IIFE function expression is the set of parentheses with the number 9 in it:

(9)

This is the number 9 we want to pass to the anonymous function


When you run the full expression, you see that it returns the number 18.

(function (x) { return x * 2; })(9)

This is because the number 9 is being passed to the anonymous function as the parameter "x", so it gets evaluated.


The third thing to notice is that this IIFE function expression is immediately used to calculate something:

(function (x) { return x * 2; })(9)

This is why it is called the Immediately Invoked Function Expression

As soon as JavaScript realizes there is a function in there, it is used.


Let's run through 3 quick IIFE Examples.

(function (x) { return x * 2; })(10);
  
(function () { return "see you later, alligator"; })();

(function (x, y) { var z = x + y; return 1 + z; })(10, 20);

In all three cases, you can see that the functions are anonymous.

You can see that they are immediately invoked.

You can see that the inside of the function is evaluated.

You can see in the last one that you can have complicated anonymous functions.

You can also see that we can define the anonymous functions to take in any number of arguments from zero to a non-zero positive number.

You can also see that if the function takes in zero arguments, you still need to have an open and close parentheses with zero arguments to invoke the anonymous function.


Terrific - so IIFE or Immediately Invoked Function Expressions are one way you can use anonymous functions in JavaScript.

<< Back To D3 Screencast and Written Tutorials Index