Function Expression in Javascript

The Function Expression is another way to create a JavaScript function. We learned how to create JavaScript Function. In that article, we used the Function Statement or declaration to create the Function. In this tutorial, we will look at Function Expression.

Function Expression

Here we create the function as part of the JavaScript Expression.

JavaScript Expression is any code that JavaScript evaluates to get a Value. They produce value

The following is the example, we create a function and assign it to the variable calcArea. We use the variable calcArea to invoke the function

Function Expression Vs Function Declaration

There are a few differences between the Function expression and Function Declaration.

Syntax

If we declare a function using a JavaScript statement, then we call it a Function declaration.

The following code creates the calcArea function using the Function statement/ declaration. Here we give a name to function calcArea. The JavaScript creates a Variable calcArea and assigns the function to it.

If the function is created using a JavaScript expression, then we call it Function Expression

The following is the function expression. We create the function and use the assignment operator to assign it to a variable. Note that we have not given any name to the function. The Syntax of creating the function is almost similar to the function declaration

Hoisting

JavaScript process the Function declarations (Hoisting), before it executes any code block. Hence they are available everywhere. But it evaluates the Function Expressions during the code execution and when the code reaches it. Hence they are available only after the evaluation.

JavaScript process all the declaration statements before it executes a block of code. This is called Hoisting.

In the following example, we invoke the calcArea function before its declaration. It works because JavaScript moves the calcArea to the top. Hence It does not matter where we declare the function.

But the following code results in an error. That is because the hoisting works only in declarations and not in assignments. Since we used the assignment operator to assign the function to the calcArea variable, we can only invoke after the assignment.

Named Function Expression

We can assign a name to a Function Expressions as shown in the example below. But we cannot use that name to invoke the function.

Use case of Function Expression

Using it as callback

The callback functions are one of the use cases for a function expression. A callback is a function that we pass as an argument to another function.

For Example, take a look at this function. The third parameter to addNum is a function.The function invokes it with the result. The addNum is not aware of what this function does.

The logToConsole function prints the message to console whatever it gets.

We invoke the addNum with logToConsole as the third argument. You will see the result on the console.

Here the logToControl is the callback function. We pass it to the addNum and it invokes it.

We can rewrite the function as shown below. Instead of declaring the function, we use the function expression to create the function on the fly and pass it to the addNum function.

Advantageous of this is that the function is discarded after it is invoked.

Immediately Invoked Function Expressions (IIFE)

We can create a function using the function expression on the fly, invoke it, and forget about it. Such a use case is called IIFE (Immediately Invoked Function Expressions). It also helps to avoid polluting the global scope.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top