JavaScript Functions – IIFE and Arrow Function Explained

A JavaScript function is an executable piece of code developers use to bundle a block of zero or more statements.

In other words, a function is an executable subprogram (mini-program).

A JavaScript function is a subprogram because its body consists of a series of statements (instructions) to the computer—just like a regular program.

The instructions in a function’s body can be a variable declaration, return call, console.log() invocation, function definition, or any other JavaScript statements.

Note

• A program is a list of instructions written for computers to execute.
• Unlike other object types, you can invoke a function without storing it in a variable.
• A JavaScript function is similar to other programming languages’ procedures or subroutines.

Why Functions?

Functions provide a way to bundle pieces of code together and reuse them anytime, anywhere, for an unlimited period. This helps you eliminate the burden of writing the same set of code repeatedly.

For instance, alert() is a built-in window function that someone wrote once for all developers to use anytime, anywhere.

Syntax of a JavaScript Function

function nameOfFunction(parameter1, parameter2, ..., parameterX) {
  // function's body
}

A function is composed of five elements:

1. A function keyword
2. The function’s name
3. A list of zero or more parameters
4. A code block ({...})
5. The function’s body

Types of JavaScript Functions

The four types of JavaScript functions are:

• Function declaration
• Function expression
• Arrow function expression
• Immediately invoking function expression

Let’s discuss each type.

What Is a JavaScript Function Declaration?

A function declaration is a function created without assigning it to a variable.

Note

We sometimes call function declaration a “function definition” or “function statement.”

Here’s an example:

function addNumbers() {
  return 100 + 20;
}

Try Editing It

The function above is a function declaration because we defined it without storing it in a variable.

What Is a JavaScript Function Expression?

A function expression is a function you create and assign to a variable.

Here’s an example:

const myFuncExpr = function addNumbers() {
  return 100 + 20;
};

Try Editing It

The function above is a named function expression that we assigned to the myFuncExpr variable.

You can also write the snippet above as an anonymous function expression like so:

const myFuncExpr = function () {
  return 100 + 20;
};

Try Editing It

The function above is an anonymous function expression that we assigned to the myFuncExpr variable.

Note

• An anonymous function is a function with no name.
• A named function is a function with a name.

A named function’s main advantage is that the name makes it easier to trace an error’s origin.

In other words, suppose your function threw an error. In such a case, if the function is named, a debugger’s stack trace will contain the function’s name. Therefore, you will find it easier to identify the error’s origin.

CodeSweetly ads

What Is a JavaScript Arrow Function Expression?

An arrow function expression is a shorthand way to write a function expression.

Syntax of an arrow function

We define an arrow function with the equality and the greater-than symbols (=>). Here is the syntax:

const variableName = () => {
  // function's body
};

Example of an arrow function

const myFuncExpr = () => {
  return 100 + 20;
};

Try Editing It

You can see that we defined the function without a function keyword and a function name.

You have to omit the function keyword and function name while writing an arrow function expression. Otherwise, JavaScript will throw a SyntaxError.

Important stuff to know about the JavaScript arrow function expression

Here are three essential facts to remember when using an arrow function expression.

1. The parameters’ parentheses are optional

Suppose your arrow function contains only a single parameter. In such a case, you can omit its parentheses.

const myFuncExpr = a => {
  return a + 20;
};

Try it on CodePen

2. The curly brackets and return keyword are optional

Suppose your arrow function contains only a single statement. In that case, you can omit its curly brackets and return keyword.

const myFuncExpr = (x, y) => x + y;

Try Editing It

In the snippet above, we implicitly returned the sum of parameters x and y by removing the curly brackets and the return keyword.

Note

Whenever you choose to omit the curly brackets, also make sure that you remove the return keyword. Otherwise, the computer will throw a SyntaxError.

3. Use parentheses to wrap any implicit object return

Suppose you wish to return an object implicitly. In such a case, wrap the object in a grouping operator (...).

For instance, consider the code below:

const myFuncExpr = () => {
  carColor: "White",
  shoeColor: "Yellow",
};

Try it on CodeSandbox

The snippet above will throw a SyntaxError because JavaScript assumed the curly brackets to be the function body’s code block—not an object literal.

Therefore, whenever you wish to return an object literal implicitly—without using the return keyword explicitly—make sure to encase the object literal in a grouping operator.

Here’s an example:

const myFuncExpr = () => ({
  carColor: "White",
  shoeColor: "Yellow",
});

Try it on CodeSandbox

Note that you can use the grouping operator to return any single value. For instance, the snippet below grouped the sum of x and 56.

const myFuncExpr = x => (x + 56);

Try it on CodePen

Let’s now discuss the fourth type of JavaScript function.

What Is a JavaScript Immediately Invoked Function Expression?

An immediately invoked function expression (IIFE) is a function expression that invokes itself automatically.

Note

We sometimes call an IIFE a “Self-Invoking Function Expression” or “Self-Executing Anonymous Function Expression.”

Syntax of an IIFE

(function () {
  /* ... */
})();

An IIFE is composed of three main components:

1. A grouping operator: The first pair of parentheses ()
2. A function: Enclosed within the grouping operator
3. An invocator: The last pair of parentheses ()

Examples

Below are examples of an IIFE.

How to define a named IIFE

(function addNumbers() {
  console.log(100 + 20);
})();

Try Editing It

The function in the snippet above is a named self-invoking function expression.

How to define an anonymous IIFE

(function () {
  console.log(100 + 20);
})();

Try Editing It

The function in the snippet above is an anonymous self-invoking function expression.

How to define an arrow function IIFE

(() => console.log(100 + 20))();

Try Editing It

The function in the snippet above is an arrow self-invoking function expression.

How to define an async IIFE

(async () => console.log(await (100 + 20)))();

Try Editing It

The function in the snippet above is an asynchronous self-invoking function expression.

So, now that we know what an Immediately Invoked Function Expression is, we can discuss how it works.

How does an IIFE work?

Consider this code:

// Convert 4 to a string value:
4.toString();

// The invocation above will return:
"Uncaught SyntaxError: Invalid or unexpected token"

Try Editing It

The computer threw a SyntaxError because it automatically interpreted the dot (.) between 4 and toString() as a decimal point—instead of a property accessor.

So, to make the computer interpret the 4.toString() statement correctly, you can:

1. Add a whitespace character between the number and the dot

// Convert 4 to a string value (Use a whitespace character to separate the number from the property accessor):
4 .toString();

// The invocation above will return: "4"

Try it on CodePen

Note that you can use any whitespace character. For instance, the snippet below used the newline character:

// Convert 4 to a string value (Use a newline character to separate the number from the property accessor):
4
.toString();

// The invocation above will return: "4"

Try it on CodePen

CodeSweetly ads

2. Add a second dot between the number and the existing dot

// Convert 4 to a string value (Use a second dot to distinguish the number from the property accessor):
4..toString();

// The invocation above will return: "4"

Try it on CodePen

The snippet above works because 4. is equivalent to 4.0.

3. Add .0 to the number

// Convert 4 to a string value (Use .0 to distinguish the number from the property accessor):
4.0.toString();

// The invocation above will return: "4"

Try it on CodePen

4. Enclose the number in a grouping operator

// Convert 4 to a string value (Use a grouping operator to distinguish the number from the property accessor):
(4).toString();

// The invocation above will return: "4"

Try it on CodePen

Using a grouping operator makes browsers interpret the dot correctly as a property accessor used to access the number’s toString() method.

Similarly, developers use IIFE’s grouping operator to make browsers interpret the invocator correctly as an operator used to invoke the function.

For instance, consider this example:

// Immediately invoke the addNumbers function (Use a grouping operator to distinguish the function from its invocator):
(function addNumbers() {
  console.log(100 + 20);
})();

// The invocation above will return: 120

Try Editing It

Suppose you did not enclose the function in a grouping operator. In that case, browsers will interpret the invocator as a SyntaxError.

Here’s an example:

function addNumbers() {
  console.log(100 + 20);
}();

// The invocation above will return: Uncaught SyntaxError

Try Editing It