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.
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
A function is composed of five elements:
- A
function
keyword - The function’s name
- A list of zero or more parameters
- A code block (
{...}
) - 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.
Here’s an example:
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:
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:
The function above is an anonymous function expression that we assigned to the myFuncExpr
variable.
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.
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:
Example of an arrow function
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.
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.
In the snippet above, we implicitly returned the sum of parameters x
and y
by removing the curly brackets and the return
keyword.
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:
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:
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
.
Let’s now discuss the fourth type of JavaScript function.
Create your web presence in no time
What Is a JavaScript Immediately Invoked Function Expression?
An immediately invoked function expression (IIFE) is a function expression that invokes itself automatically.
Syntax of an IIFE
An IIFE is composed of three main components:
- A grouping operator: The first pair of parentheses
()
- A function: Enclosed within the grouping operator
- An invocator: The last pair of parentheses
()
Examples
Below are examples of an IIFE.
How to define a named IIFE
The function in the snippet above is a named self-invoking function expression.
How to define an anonymous IIFE
The function in the snippet above is an anonymous self-invoking function expression.
How to define an arrow function IIFE
The function in the snippet above is an arrow self-invoking function expression.
How to define an async IIFE
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:
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
Note that you can use any whitespace character. For instance, the snippet below used the newline character:
Learn Flexbox with Images
2. Add a second dot between the number and the existing dot
The snippet above works because 4.
is equivalent to 4.0
.
3. Add .0
to the number
4. Enclose the number in a grouping operator
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:
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: