How do we use function literal to define a function in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to use the function literal to define a function in JavaScript. A function literal is another way to define the function

The normal functions can be declared below in JavaScript with the function name.

// this is the function expression
function functionName ( parameters ) {
   // function body
}

But using the literal, we can define the function in another way. There are two ways to use the function literals to define the functions in JavaScript one is an anonymous function, and another is an arrow function.

Function Literal

We need to keep in mind three things about the literal function while defining the functions using it.

It contains the function keyword, which can be optional.
The second thing is the function name which is also optional.
The third thing is the function expression in the curly braces, a function body.

Furthermore, users can use the parameters with the function literals.

Syntax

Here is the syntax to define the function using the function literal and store the function expression to the variable.

let func = function ( parameters ) {
   // function body statments
}
func( 10,20 ); // call the function using the variable.

As above, we can define the function without its name and store it in the variable using the function literal.

Example

In the below example, we have defined the normal function and another using the function literal, both function performs the same operation, and we will match the output of both.

<html>
<body>
   <h2> Using the function literal to define the function.</h2>
   <h4> Output of normal function: </h4>
   <div id="normal"></div>
   <h4> Output of when we define the function using the function literal: </h4>
   <div id="literal"> </div>
   <script>
      let normal = document.getElementById("normal");
      let literal = document.getElementById("literal");
      function normalFunction( a, b ) {
         return a * b;
      }
      var func = function ( a, b ) {
         return a * b;
      }
      normal.innerHTML = normalFunction(10, 3);
      literal.innerHTML = func(10, 3); // calling function literal using the variable
   </script>
</body>
</html>

In the above output, users can see that both functions return the same result which proves that even changing the way of defining the function, doesn’t affect the final output.

Use the Arrow Function

The arrow function is the updated version of the anonymous function introduced in the ES6 version of JavaScript. The arrow function expression contains three parts. The first part is the braces which contain the parameters for the function. The second part is the arrow to make it an arrow function. The third part contains the function body statements inside the curly braces.

Syntax

Here is the syntax that users can follow to define the expression for the arrow function and invoke it.

// storing function expression to func variable.
var func = (param1, param2) => {
   // function body.
}
func ( 20 , 30 ); // invoke the arrow function using variable

Example

In the below example, we have created the arrow function. It returns the sum of its parameters, and we are rendering the output on the screen. We have invoked the arrow function using the variable in which we have stored the expression of the arrow function.

<html>
<head>
   <title> Using the function literal. </title>
</head>
<body>
   <h2> Using the function literal to define the function. </h2>
   <h4> Output of when we define the function using the arrow. </h4>
   <div id="literal"> </div>
   <script>
      let literal = document.getElementById("literal");
      var func = (param1, param2) => {
         return param1 + param2;
      }
      literal.innerHTML = " output is " + func(123, 323); // calling function literal using the variable
   </script>
</body>
</html>

Conclusion

We have seen two different function literals to define the function. The function literal saves the programmer’s time to write code for the function. We can invoke the expression of the function using the variables in which it is stored.

However, when we define the function using the function literal, it doesn’t work as an actual function. It works as an expression and evaluates at the time when control goes to the line of the function. In JavaScript, all normal function evaluates and compiles when the program starts to execute.