Friday 31 August 2018

JavaScript: Function expressions

Functions are first class citizens in JavaScript, just like how you use variables (like passing them as arguments), you can also use functions.

Example
var sum = function(a, b){
         return (a+b);
}

Above statements define a function sum using function expression.

functionExp.html
<!DOCTYPE html>

<html>

<head>
    <title>Function Expressions</title>
</head>

<body>
    <script type="text/javascript">
        var sum = function(a, b) {
            return (a + b);
        }

        var sub = function(a, b) {
            return (a - b);
        }

        document.write("Sum of 10 and 20 is " + sum(10, 20) + "<br />");
        document.write("Subtraction of 10 and 20 is " + sub(10, 20) + "<br />");
    </script>
</body>

</html>

Load above page in browser, you can able to see following text.

Sum of 10 and 20 is 30
Subtraction of 10 and 20 is -10

In fact you can also provide a name to functional expression, especially it is useful in recursive calls.

var factorial = function fact(n){
         if(n < 2)
                  return 1;
         return n * fact(n-1);
}


functionExp1.html
<!DOCTYPE html>

<html>

<head>
    <title>Pass by value and reference</title>
</head>

<body>
    <script type="text/javascript">
        var factorial = function fact(n) {
            if (n < 2)
                return 1;
            return n * fact(n - 1);
        }

        document.write("Factorial of 5 is " + factorial(5) + "<br />");
        document.write("Factorial of 10 is " + factorial(10) + "<br />");
    </script>
</body>

</html>

Load above page in browser, you can able to see following text.

Factorial of 5 is 120
Factorial of 10 is 3628800

Where can I use function expressions?
There are two primary advantages.
a. You can call a function as an argument to other function.
var square = function(x){
         return x*x;
}
                          
var cube = function(x){
         return x*x*x;
}
                          
var process = function(fun, x){
         return fun(x);
}

process(square, 5): Calculates square(5).
process(cube, 10): Calculates cube(10).


fun1.html
<!DOCTYPE html>

<html>

<head>
    <title>Functional Expression</title>
</head>

<body>
    <script type="text/javascript">
        var square = function(x) {
            return x * x;
        }

        var cube = function(x) {
            return x * x * x;
        }

        var process = function(fun, x) {
            return fun(x);
        }

        document.write("Square of 5 is " + process(square, 5) + "<br />");
        document.write("Cube of 10 is " + process(cube, 10) + "<br />");
    </script>
</body>

</html>

Load above page in browser, you can able to see following text.

Square of 5 is 25
Cube of 10 is 1000

b. You can able define functions based on a condition
var myFun;
                          
function defineFunction(num){
         if(num == 1){
                  myFun = function(x){
                           return x*x;
                  }
         }
         else{
                  myFun = function(x){
                           return x*x*x;
                  }
         }
}
                          

fun2.html
<!DOCTYPE html>

<html>

<head>
    <title>Functional Expression</title>
</head>

<body>
    <script type="text/javascript">
        var myFun;

        function defineFunction(num) {
            if (num == 1) {
                myFun = function(x) {
                    return x * x;
                }
            } else {
                myFun = function(x) {
                    return x * x * x;
                }
            }
        }

        defineFunction(1); // Define square functionality
        document.write("Square of 5 is " + myFun(5) + "<br />");

        defineFunction(2); // Define cube functionality
        document.write("Cube of 10 is " + myFun(10) + "<br />");
    </script>
</body>

</html>

Load above page in browser, you can able to see following text.
Square of 5 is 25
Cube of 10 is 1000




Previous                                                 Next                                                 Home

No comments:

Post a Comment