Functions in JavaScript — Part 3

In the previous article, we learned about variable scoping and understood the implementation of pass-by-value and pass-by-reference. And how functions work as first-class objects.

In this article, we will learn about three more ways of creating functions. And understand why we need these different flavours of functions.

Function Expression

Functions, being first-class objects, can be defined as an “expression” and are assigned to a variable. These function expressions can either be named or anonymous functions.

In the case of an anonymous function expression, the “name” attribute will have the variable’s name as its value. In the case of a named function expression, the “name” attribute will have the name of the function expression.

The following code snippet explains the same.

Output

Output

Note: In the case of a named function expression, it is impossible to use the function name (greet()) to call/execute a function. However, using the function name (greet()) within the function’s scope is possible. This is very helpful in the case of recursive function calls. Refer to the code snippet below.

Passing these function expressions as a parameter to another function is also possible.

Output

Output

Output

Hoisting of the function expressions is not possible. It must be defined before it is used.

Returning a function expression from a function. While doing so, the inner function has access to the variables defined in the outer function. The outer function creates a “closure” for the inner function.

Output

“arguments” attribute of a function expression. Like a named function, a function expression has an argument attribute that contains the arguments passed to a function.

Output

Immediately Invoked function execution (IIFE)

It is possible to declare a function expression and execute the same immediately. It is done by adding round braces around the function definition and another pair of round braces () right after the function declaration to execute the function. (function () {definition goes here} (); The IIFEs can also be “named” or “anonymous” like function expressions. Accepts arguments. Refer to the code below.

Output

Output

Output

It is possible to return a function from an IIFE. JavaScript also creates a closure for an inner function to access the outer function’s variables.

Output

Arrow functions

Arrow functions, introduced in ES6, provide an alternative way of declaring a function in JavaScript. These functions have a lesser number of braces and parentheses. In the case of single-line expressions, the return statement is implied.

Output

Output

Output

Output

Hoisting of an arrow function is impossible.

Passing arrow function as a parameter — However, passing an arrow function as a parameter to a function is possible. Refer to the code below.

Output

Output

Returning an arrow function from an outer function. It is possible to return an arrow function from an outer function. Refer to the code snippet below.

Output

Why do we need these different styles of function declaration

One big question that comes to mind is why there are so many ways of declaring a function. What is the difference? What are the use cases for using these functions? The following table helps in answering these questions.

References

Functions - JavaScript | MDN

JavaScript Functions

Functions