Function Expression in JavaScript

In JavaScript, a function that includes parameters can be established within any expression through the use of a Function Expression. The main distinction between a function declaration and a function expression lies in how the function is directly associated with its name and the variable when utilizing JavaScript.

Upon defining a function expression, an IIFE (Immediately Invoked Function Expression) runs immediately following the function in JavaScript. It is essential to store a function expression in a variable, which can then be accessed via the variable name assigned to the function. The introduction of Arrow Functions in the ES6 specifications has simplified the process of declaring function expressions.

Important Elements of Function Expressions in JavaScript

The following are the main elements of Javascript function expressions, and they are discussed in detail:

• ✅ Keyword: The function keyword comes before each Javascript function expression. It is a primary and essential parameter for the function name.
• ✅ Parameters: Parameters are also called arguments for the function expression. It is the values that a function uses to carry out performed actions.
• ✅ Operations: The function uses arguments to perform operations, often known as computations.
• ✅ Return value: The value that is returned to the calling statement at the end of all operations is known as the return value.

Differences between Function Expressions and Declarations:

• ✅ Hoisting: When a function declaration is hoisted, its definition is pushed to the top of the scope during execution. This allows the function to be utilized before the code defines it. On the other hand, function expressions are not hoisted.
• ✅ Naming: The function expressions can be named or left nameless, but function declarations must always have a name.
• ✅ Use: Functions will be implemented as IIFEs (Immediately Invoked Function Expressions) due to function expressions. A function expression can be used in loops or conditions, but function declarations are not feasible.

Syntax

The syntaxes below illustrate the various methods for invoking function expressions in JavaScript.

Syntax for Function Declaration:

function function_Name(a, b) { statements... return (z) };

Syntax for Function Expression (anonymous):

let variable_Name = function(a, b) { statements... return (z) };

The choice between utilizing a function declaration and a function expression largely hinges on the specific coding context and needs at hand.

JavaScript Anonymous Function Expression

A function that lacks a designated name for its declaration or definition as a function expression is referred to as an anonymous function expression. In JavaScript, when a function is assigned to a variable, it produces a function expression. Anonymous functions can be found on the right side of the assignment operator, typically accompanied by a common label or letter. Therefore, when a nameless function is assigned to a variable, it results in the creation of an anonymous function expression.

Applications of JavaScript's Anonymous Function Expression

Using anonymous function expressions in your JavaScript code has a number of advantages. Among them include, but are not restricted to:

• ✅ Coding simplification: Code can be more concise when anonymous functions are used because you don't have to come up with a name for each function you write.
• ✅ Absence of function lifting: Expressions for anonymous functions are not hoisted, in contrast to named functions. For this reason, the function needs to be defined before it can be used.
• ✅ Making callbacks understandable: Anonymous function expressions are the preferred tool for working with callback functions, which are functions that are sent to another function.
• ✅ Saving memory: You can eliminate needless references and save memory by manually creating a reference to an anonymous function instead of having the interpreter do it for you by assigning it to a variable.

Syntax for Function Expression (Anonymous):

The syntax provided below is utilized to create an anonymous function expression.

let variable_Name = function(a, b) { statements... return (z) };

var variable_Name = function(a, b) { statements... return (z) };

Examples

The examples provided below illustrate how to define a function expression that lacks a designated name. To denote a function, we can utilize variables created with the keywords let and var. We assign the function to the right side of the variable name.

Example 1:

The subsequent illustration demonstrates how to execute an anonymous function expression. In this case, the function expression employs the "let" keyword for declaring the variable associated with the function.

function expression uses the "let" keyword variable for the function declaration.
<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Anonymous Function Expression </h4>
<p> We can create and declare the function without the function name. We can use the let variable for the function expression. </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
//create the variable with the 'let' keyword for a function expression
let cal_Substraction = function (x, y) {
	let c = x - y;
	return c;
}
document.getElementById("data_view").innerHTML = "Subtraction value: " + cal_Substraction(10, 4);
let cal_add = function (x, y) {
	let c = x + y;
	return c;
}
document.getElementById("data_view1").innerHTML = "Addition value: " + cal_add(10, 4);
</script>
</body>
</html>

Output

The result illustrates the function expression in an unnamed format along with its execution.

Example 2:

The subsequent example demonstrates the execution of an anonymous function expression. In this instance, the function expression employs the "var" keyword for its variable declaration.

<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Anonymous Function Expression </h4>
<p> We can create and declare the function without the function name. <br>
we can use the "var" variable for the function expression. </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
//create the variable with the 'var' keyword for a function expression
var cal_Substraction = function (x, y) {
let c = x * y;
return c;
}
document.getElementById("data_view").innerHTML = "Multiplication value: " + cal_Substraction(10, 4);
var cal_add = function (x, y) {
let c = x / y;
return c;
}
document.getElementById("data_view1").innerHTML = "Division value: " + cal_add(10, 4);
</script>
</body>
</html>

Output

The output illustrates the function expression in a non-named manner along with its execution.

Named Function Expression

In JavaScript, a function expression is utilized to define a function by associating it with a variable name as well as a function name. Within the script tag, it is permissible to reference the function name on the right side while using the variable name on the left side.

Syntax for Function Expression (anonymous):

The syntax provided below is utilized to establish a function expression that includes the name of the function.

let variableName = function functionName(x, y) 
{ statements... return (z) };

Example:

The subsequent example demonstrates how to work with a function expression that includes a designated function name. In this instance, the function expression employs both the variable and the function name following the function keyword for its declaration.

<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Function Expression with function name </h4>
<p> We can create and declare the function with the function name.  </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
var Square_operation = function square_fun(x) {
let c = x * x;
return c;
}
document.getElementById("data_view").innerHTML = "Square value: " + Square_operation(12);
var Cube_operation = function cube_fun(x) {
let c = x * x * x;
return c;
}
document.getElementById("data_view1").innerHTML = "Cube value: " + Cube_operation(12);
</script>
</body>
</html>

Output

The result displays the function expression along with the designated function name and its corresponding operation.

Function Expression for Arrow Function:

The function expression is defined using an arrow function along with a variable identifier. Within parentheses, the parameter is specified, while the traditional function keyword and function name are omitted from the JavaScript operational statement. The arrow function employs the arrow symbol to denote the function.

Syntax

The syntax below demonstrates the Function Expression utilizing an Arrow notation.

let variable_Name = (x, y) => { statements... return (z) };

Example:

The subsequent illustration demonstrates the utilization of function expressions in conjunction with arrow functions. In this case, the function expression employs a variable alongside the arrow function for its declaration.

<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Function Expression with arrow function </h4>
<p> We can create and declare the function with the arrow function.  </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
var mul_operation = (x, y, z) =>{
	let c = x * y * z;
	return c;
}
document.getElementById("data_view").innerHTML = "Multiplication value: " +mul_operation(12, 10, 2);
var math_operation = (x, y, z) =>{
	let c = x + y - z;
	return c;
}
document.getElementById("data_view1").innerHTML = "Mathematical operational value: " + math_operation(12, 10, 5);
</script>
</body>
</html>

Output

The result displays the function expression utilizing the arrow function along with its functionality.

Supported Browser:

The following web browsers and their versions support the function expression.

• ✅ Chrome 1 and later
• ✅ Edge 12 and later
• ✅ Firefox 1 and later
• ✅ Internet Explorer 3 and later
• ✅ Opera 3 and later
• ✅ Safari 1 and later

Conclusion

The function expression serves the purpose of defining, declaring, and executing a function according to the needs of the user. Typically, developers utilize function expressions to invoke the function directly, bypassing the need for any HTML or JavaScript events.