Home >Web Front-end >JS Tutorial >Explain the MUL() function in JavaScript
In this tutorial, we will learn to implement the MUL() function in JavaScript. This function is a very simple multiplication function. Basically, we use the concept of nested functions to implement the MUL() function. Nested functions are used to create closures and decorators. And we can use nested functions to achieve privacy.
There are two ways to implement MUL() function using nested functions −
Using nested function with name
By currying a function
In JavaScript, we can use nested functions to obtain multiplication results. We need to write n nested functions to multiply n numbers.
JavaScript is a First-class function language. It means functions in JavaScript can be treated like any other variable. So, here we return the inner function in the return statement of the outer function.
Users can follow the below syntax to implement MUL( ) function using nested functions with name.
function mul(num1){ function mul1(num2){ function mul2(num3){ return num1*num2*num3; }; // end of mul2() return mul2; }; // end of mul1() return mul1; } // end of mul()
For example, we multiply three numbers – num1, num2, and num3. A function is a keyword to define function in JavaScript. Here, we are defining a function with the name mul( ), which has num1 as the parameter. Inside the mul( ) function, we return function mul1( ), which is defined inside mul( ) function. mul1( ) has num2 as parameter, it returns function mul2( ). And mul2( ) has num3 as the parameter; it returns the product of num1, num2, and num3.
In this way, we can write n functions to multiply n numbers.
Step 1 - Define the function mul( ) using the first number num1 as argument.
Step 1.1 − Inside function mul( ), define function mul1( ) using the second number num2 as parameter.
Step 1.2 - In the return statement of function mul(), return mul1.
Step 2 − Inside function mul1( ), define function mul2( ) with third number num3 as parameter.
Step 2.1 − In the return statement of function mul1( ), return mul2.
Step 3 − In the return statement of function mul2( ), return a product of num1, num2, and num3
In the example below, we are multiplying three numbers. We also observed the output when we passed only two numbers.
<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; }; // end of mul2() return mul2; }; // end of mul1() return mul1; } // end of mul() output.innerHTML = "Multiplication of 2, 3 and 4 is : "; output.innerHTML += mul(2)(3)(4) + "<br><br>"; output.innerHTML += "Multiplication of 4 and 6 is : "; //This line returns a function output.innerHTML += mul(4)(6) + "<br><br>"; output.innerHTML += "Multiplication of 3, 5 and 7 is: "; //Another way of multiplication const temp = mul(3)(5); output.innerHTML += temp(7); </script> </body> </html>
In the above code, the user can see that multiplication is performed by passing 2, 3 and 4 together to the function call. When we pass just two numbers, it returns a function. Then we pass 3 and 5 in the function call, but we store the result in the temp variable. Then using the temp variable, we pass 7. So, we get the product of 3, 5 and 7 = 105.
Note − We cannot call mul1() or mul2() function outside mul() function.
We can write the above logic in another way by currying the function. Currying is useful when we cannot provide all parameters to a function at the same time. Functions that are not called from anywhere can be written as anonymous functions.
Follow the following syntax to implement MUL() through curried functions.
function mul(num1) { return function(num2) { return function(num3) { return num1 * num2 * num3; }; }; }
Here, we also use an example of 3 numbers to illustrate, so that users can observe the difference in the above logic that we can achieve by writing anonymous functions. The outermost function mul() takes a parameter num1; it returns a function taking a parameter num2. This function returns a function with parameter num3. The innermost function returns the product of num1, num2, and num3.
The same logic can be applied to more numbers.
Step 1 − Define function mul( ) with num1 as a parameter.
Step 2 − In the return statement of function mul( ), define an anonymous function using num2 as a parameter (we call it the first anonymous function for easier understanding).
Step 3 − In the return statement of 1st anonymous function, define 2nd anonymous function with num3 as a parameter.
Step 4 − In the return statement of the 2nd anonymous function, return a product of num1, num2, and num3.
In the following example, we implement the MUL() function by currying a function.
<html> <body> <h2> The MUL() function in JavaScript </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 += "Output when we pass only 9 is: <br>"; //This line returns a function output.innerHTML += mul(9) + "<br><br>"; output.innerHTML += "Multiplication of 2, 3 and 5 is: "; //Another way of multiplication const temp = mul(2)(3); output.innerHTML += temp(5); </script> </body> </html>
In the above output, users can see that when we pass three numbers in function call, we get the product of 3 numbers. We are getting 48 when we are passing 2, 4, and 6 together in the function call. When we pass only 9, we get function. Then we pass 2 and 3 only in a function call and store the result in the temp variable. And using that temp variable, we are passing 5. So, we get the product of 2, 3 , and 5 = 30.
We have learned the implementation of the MUL( ) function with two different methods: nested functions and currying a function.
The above is the detailed content of Explain the MUL() function in JavaScript. For more information, please follow other related articles on the PHP Chinese website!