In JavaScript or in any programming language, functions, loops, mathematical operators, and variables are the most widely used tools. This article is about how we can use and what are the real conditions when the Named function Expressions. We will discuss all the required concepts in this article to know the named function Expression in and out.
Named function: Using the function keyword followed by a name that can be used as a callback to that function is known as using a named function in JavaScript. Named functions are regular functions that have a name or identifier. Both their use in expressions and their declaration in statements are options. The name of the function is stored in the body, which is useful. Additionally, we might use the name to get a function to call itself or to acquire its characteristics, just like we would for any object.
Syntax:
var functionName(){
// Code here
}
Function Expression: The primary distinction between Function Expression and Function Declaration is the ability to define anonymous functions without function names using Function Expression. An IIFE (Immediately Invoked Function Expression) is a function expression that executes as soon as it is defined. The variableName keyword can be used to access a function expression, which must be kept in a variable. It is now simpler to declare function expressions thanks to the ES6 capabilities that introduce Arrow Function.
Syntax:
var variableName = function () {
// Code here
}
Named Function Expression: So, it is now obvious that the Function Expression which has a name or identifier is called Named Function Expression. It can be helpful that the function’s name is bound inside of its body. Additionally, we can access a function’s properties just like any other object by using its name to have it call itself.
Syntax:
var variableName = function f(){
// Code here
};
The f() function in the syntax example is available only inside the inner scope and to invoke the function outside the inner scope we need to call it with variableName.
What is the utility of Named Function Expression?
For recursive calls or distancing event listeners, access the designated function within its scope. When employing named functions, call stacks and error messages will display more specific information. As a result, the experience of debugging is enhanced by fewer anonymous stack names. Naming a function makes the code more readable, and clear, and helps you communicate your intentions.
Example 1: The code below demonstrates how we can create a recursive Named Function Expression and return a Fibonacci number.
Javascript
<script> var fibo = function fibonacci(number) { if (number <= 1) return 1; return fibonacci(number - 1) + fibonacci(number - 2); }; console.log(fibo(5)); </script> |
Output:
8
Example 2: The code below demonstrates the function that calculates the factorial of 6 and it gets called when a button is clicked.
HTML
<!DOCTYPE html> <html lang="en"> <body> <h1 style="color:green">neveropen</h1> <h2><b>Named function expression in JavaScript.</b></h2> <div class="result" style="font-size: 40px; color: green;"> </div> <br /> <button class="btn">CLICK HERE</button> <h3>Click on the button to call the factorial function expression of obj object <br>And also get the result of the factorial of 6. </h3> <script> let ele = document.querySelector(".result"); let BtEle = document.querySelector(".btn"); let obj = { factorial: function fact(n) { if (n <= 1) { return 1; } return n * fact(n - 1); }, }; BtEle.addEventListener("click", () => { ele.innerHTML = obj.factorial(6); }); </script> </body> </html> |
Output:
