JavaScript Function Declaration versus JavaScript Function Operator
FREE     2 minute and 20 seconds read
Part of Course: D3 Data Manipulation

Takeaways:

  • Anonymous Functions are a big part of D3 Data Visualization Example Code
  • Three main type of JavaScript anonymous function declarations are IIFE, Assignment to Variable, and Defining and Passing anonymous function as a parameter to another function
  • A JavaScript Function Declaration is a function declaration that defines a function with the parameters of a) name of the function, b) name of arguments passed to the function (255 max), and c) statement of function
  • A JavaScript Function Expression is a function defined inside of a JavaScript expression such that the function declaration defines the function with the parameters of a) name of the function, though can be omitted to form an anonymous function, b) name of arguments passed to the function (255 max), and c) statement of function
  • Most commonly D3 Data Visualizations, the JavaScript Function Expression is used as an anonymous function assigned to a JavaScript variable
  • The distinction between a JavaScript Function Declaration and a JavaScript Function Expression matters because of how the browser loads the functions into the execution context
  • Because of JavaScript Function Hoisting, when a web browser loads your web page, the JavaScript Function Declaration will be created at a different time than the JavaScript Function Expression

D3 Tutorial:

JavaScript Function Declaration versus JavaScript Function Operator

Let's start by looking at the code of these two different functions:

function multiplyByTwo(x) {

    return x * 2;
}

// vs

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


You can see that they will do the same thing when they are run at a later date - multiply the parameter is passed into the function by the number 2.

multiplyByTwo(100);

anonMultiplyByTwo(100);

JavaScript Function Operator call versus JavaScript Function Expression call

So at first glance the functionality is the same.


To better understand the difference, let's learn a little bit about how JavaScript defines functions


Let's first look at the multiplyByTwo code:

function multiplyByTwo(x) {

    return x * 2;
}

Per the Mozilla Developer Network "Function" definition, this is a "JavaScript Function Declaration"

Per Mozilla - "The function declaration defines a function with the specified parameters."

Where the parameters are:

  • name - The function name
  • param - The name of an argument to be passed to the function. A function can have up to 255 arguments
  • statements - The statements which comprise the body of the function

The key being that the function has a name.

This type of JavaScript function definition is a function declaration.


Next, let's look at the anonMultiplyByTwo code:

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

Per Mozilla Developer Network "Function Expression" definition, this is a "JavaScript Function Expression"

Per Mozilla - "The function keyword can be used to define a function inside an expression"

Where the parameters are:

  • name - The function name. Can be omitted, in which case the function is anonymous. The name is only local to the function body
  • paramN - The name of an argument to be passed to the function
  • statements - The statements which comprise the body of the function

The key being that the function name can be omitted

When the function name is omitted and the anonymous function is assigned to a variable, it's described as using the JavaScript Function Operator to create the anonymous function.


You're probably thinking that this sounds like a bunch of semantics that while important to some people, isn't important to you.

This is actually very important to you when constructing D3 Data Visualizations because even though both functions are called them same way, the difference lies in how the browser loads the functions into the execution context.


Reviewing:

If the function has a name then it's a function declaration, but if it does not have a name and it's assigned to a variable then it's created using the function operator.

This distinction is important because of JavaScript Function Hoisting, the topic of the next D3 Tutorial Lesson.

Specifically because of JavaScript Function Hoisting, when a web browser loads your web page, the function declaration will be created at a different time than the function operator

So unless you are aware of this and are paying attention to it, your code might run and have errors in it or not even run at all!

<< Back To D3 Screencast and Written Tutorials Index