Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Explain the MUL() function in JavaScript
In this tutorial, we will learn to implement the MUL() function in JavaScript. This function demonstrates multiplication using nested functions, which create closures that maintain access to outer function variables. The MUL() function showcases JavaScript's first-class function nature, where functions can be returned from other functions.
There are two ways to implement the MUL() function using nested functions:
Using nested functions with names
Using function currying with anonymous functions
Using Nested Functions With Names
In JavaScript, we can use nested functions to create a multiplication function that takes arguments one at a time. Each function returns the next function in the chain until all arguments are provided.
Syntax
function mul(num1){
function mul1(num2){
function mul2(num3){
return num1 * num2 * num3;
}
return mul2;
}
return mul1;
}
The outer function mul() takes the first parameter and returns mul1(). The mul1() function takes the second parameter and returns mul2(). Finally, mul2() takes the third parameter and returns the product of all three numbers.
Example
In the below example, we multiply three numbers and observe different ways to call the function:
<html>
<body>
<h2>The MUL() function in JavaScript</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function mul(num1){
function mul1(num2){
function mul2(num3){
return num1 * num2 * num3;
}
return mul2;
}
return mul1;
}
output.innerHTML = "Multiplication of 2, 3 and 4 is: ";
output.innerHTML += mul(2)(3)(4) + "<br><br>";
output.innerHTML += "Partial application with 4 and 6: ";
// This returns a function, not a number
output.innerHTML += typeof mul(4)(6) + "<br><br>";
output.innerHTML += "Multiplication of 3, 5 and 7 is: ";
// Store partial result and complete later
const temp = mul(3)(5);
output.innerHTML += temp(7);
</script>
</body>
</html>
Multiplication of 2, 3 and 4 is: 24 Partial application with 4 and 6: function Multiplication of 3, 5 and 7 is: 105
Using Function Currying
Currying transforms a function that takes multiple arguments into a series of functions that each take a single argument. This approach uses anonymous functions instead of named nested functions.
Syntax
function mul(num1) {
return function(num2) {
return function(num3) {
return num1 * num2 * num3;
};
};
}
This curried version achieves the same result but uses anonymous functions. Each function returns another function until all parameters are provided.
Example
<html>
<body>
<h2>The MUL() function using Currying</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function mul(num1) {
return function(num2) {
return function(num3) {
return num1 * num2 * num3;
};
};
}
output.innerHTML = "Multiplication of 2, 4 and 6 is: ";
output.innerHTML += mul(2)(4)(6) + "<br><br>";
output.innerHTML += "Type when passing only one argument: ";
output.innerHTML += typeof mul(9) + "<br><br>";
output.innerHTML += "Multiplication of 2, 3 and 5 is: ";
const temp = mul(2)(3);
output.innerHTML += temp(5);
</script>
</body>
</html>
Multiplication of 2, 4 and 6 is: 48 Type when passing only one argument: function Multiplication of 2, 3 and 5 is: 30
Comparison
| Approach | Function Names | Readability | Use Case |
|---|---|---|---|
| Named Nested Functions | Explicit names | More verbose | Debugging, clarity |
| Currying | Anonymous | More concise | Functional programming |
Key Points
Both approaches create closures that maintain access to outer scope variables
Partial application is possible - you can call the function with fewer arguments and complete later
Inner functions cannot be called directly from outside their parent function
This pattern is useful for creating specialized functions or when arguments arrive at different times
Conclusion
The MUL() function demonstrates JavaScript's powerful closure and currying capabilities. Both approaches achieve the same result, with currying being more concise and nested named functions being more explicit for debugging purposes.
913 Views
