JavaScript - Functions

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.
Advantage of JavaScript function :
There are mainly two advantages of JavaScript functions.

Code reusability : We can call a function several times so it save coding.

Less coding : It makes our program compact. We don’t need to write many lines of code each time to perform a common task. Syntax :

    function functionName([arg1, arg2, ...argN]){  
        //code to be executed  
    }

Eg :

    < !DOCTYPE html>
    < html>
    < body>
    < h1>JavaScript Functions
    < p>Function has been called and performs a calculation and returns the result:< /p>
    < p id="demo">< /p>
    < script>
    let x = myFunction(2, 3);
    document.getElementById("demo").innerHTML = x;

    function myFunction(a, b) {
        return a * b;
    }
    < /script>
    < /body>
    < /html>

Output :
js-fun-1

Function Expressions :
A JavaScript function can also be defined using an expression.

A function expression can be stored in a variable.
After a function expression has been stored in a variable, the variable can be used as a function.

Eg:

    < !DOCTYPE html>
    < html>
    < body>
    < h2>JavaScript Functions< /h2>
    < p>A function can be stored in a variable:< /p>
    < p id="demo">< /p>
    < p id="demo1">< /p>

    < script>
    const x = function (a, b) {return a * b};
    document.getElementById("demo").innerHTML = x;

    const y = function (a, b) {return a * b};
    document.getElementById("demo1").innerHTML = y(2, 3);
    < /script>

    < /body>
    < /html>

Output :
js-fun-2

Function() Constructor :
As you have seen in the previous examples, JavaScript functions are defined with the function keyword. Functions can also be defined with a built-in JavaScript function constructor called Function(). Then we actually don't have to use the function constructor.
Eg :

    < !DOCTYPE html>
    < html>
    < body>

    < h2>JavaScript Functions< /h2>
    < p>JavaScript has an built-in function constructor.< /p>
    < p id="demo">< /p>
    < p id="demo1">< /p>

    < script>
    const myFunction = new Function("a", "b", "return a * b");
    document.getElementById("demo").innerHTML = myFunction(4, 3);

    const myFunction1 = function (a, b) {return a * b}
    document.getElementById("demo1").innerHTML = myFunction1(2, 3);
    < /script>

    < /body>
    < /html>

Output :
js-fun-3

Functions Can Be Used as Values :
JavaScript functions can be used as values:

    < !DOCTYPE html>
    < html>
    < body>

    < h2>JavaScript Functions< /h2>
    < p>Functions can be treated as values:< /p>
    < p>x = myFunction(2,3) or x = 6< /p>
    < p>In both cases, x becomes a number with the value of 6.< /p>
    < p id="demo">< /p>

    < script>
    function myFunction(a, b) {
    return a * b;
    }
    let x = myFunction(2, 3);
    document.getElementById("demo").innerHTML = x;
    < /script>

    < /body>
    < /html>

Output :
js-fun-4

JavaScript functions can be used in expressions :

    < !DOCTYPE html>
    < html>
    < body>

    < h2>JavaScript Functions< /h2>
    < p>Functions can be used in expressions.< /p>
    < p id="demo">< /p>

    < script>
    function myFunction(a, b) {
    return a * b;
    }
    let x = myFunction(2, 3) * 2;
    document.getElementById("demo").innerHTML = x;
    < /script>

    < /body>
    < /html>

Output :
js-fun-5

Functions are Objects :
The typeof operator in JavaScript returns "function" for functions. But, JavaScript functions can best be described as objects. JavaScript functions have both properties and methods.
The arguments.length property returns the number of arguments received when the function was invoked:
Eg :

    < !DOCTYPE html>
    < html>
    < body>
    < p>The arguments.length property returns the number of arguments received by the function:< /p>
    < p id="demo">< /p>

    < script>
    function myFunction(a, b) {
    return arguments.length;
    }
    document.getElementById("demo").innerHTML = myFunction(2, 3);
    < /script>

    < /body>
    < /html>

Output :
js-fun-6

The toString() method returns the function as a string:

    < !DOCTYPE html>
    < html>
    < body>
    < h1>JavaScript Functions< /h1>
    < h2>The toString() Method< /h2>
    < p>The toString() method returns the function as a string:< /p>
    < p id="demo">< /p>

    < script>
    function myFunction(a, b) {
        return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction.toString();
    < /script>

    < /body>
    < /html>

Output :
js-fun-7

Function - apply() method :

    < !DOCTYPE html>
    < html>
    < body>
    < h2>JavaScript Functions
    < p>Functions can be used in expressions.< /p>
    < p id="demo">< /p>

    < script>  
        var arr = [7, 5, 9, 1];  
        var max = Math.max.apply(null, arr);  
        document.writeln(max);  
    < /script>

    < /body>
    < /html>

Output :
js-fun-8

« Previous Next Topic » (JS - Arrow Function)