JavaScript - Arrow Function

Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax: 
    Simple example :
    
    let myFunction = (a, b) => a * b;


Full Eg: 
    < !DOCTYPE html>
    < html>
    < body>

    < h1>JavaScript Functions< /h1>
    < h2>The Arrow Function< /h2>
    < p>This example shows the syntax of an Arrow Function, and how to use it.< /p>
    < p id="demo">< /p>

    < script>
        let myFunction = (a, b) => a * b;
        document.getElementById("demo").innerHTML = myFunction(4, 5);
    < /script>

    < /body>
    < /html>
Output :

JavaScript Functions

The Arrow Function

This example shows the syntax of an Arrow Function, and how to use it.

20

Before Arrow Function :
    < !DOCTYPE html>
    < html>
    < body>

    < h1>JavaScript Functions< /h1>

    < p>This example shows the syntax of a function, without the use of arrow function syntax.< /p>

    < p id="demo">< /p>

    < script>
    let hello = "";

    hello = function() {
        return "Hello World!";
    }

    document.getElementById("demo").innerHTML = hello();
    < /script>

    < /body>
    < /html>
Output :

JavaScript Functions

This example shows the syntax of a function, without the use of arrow function syntax.

Hello World!



It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword :
    < !DOCTYPE html>
    < html>
    < body>

    < h1>JavaScript Functions< /h1>
    < h2>The Arrow Function< /h2>
    < p>This example shows an Arrow Function with a parameter.< /p>
    < p id="demo">< /p>
    < br>
    < p>This example shows an Arrow Function with a parameter but without paranthesis.< /p>
    < p id="demo1">< /p>

    < script>
        let hello = "";
        hello = (val) => "Hello " + val;
        document.getElementById("demo").innerHTML = hello("Vijay!");

        hello = val => "How are " + val;
        document.getElementById("demo1").innerHTML = hello("You?");
    < /script>

    < /body>
    < /html>
Output :

JavaScript Functions

The Arrow Function

This example shows an Arrow Function without the brackets or the return keyword.

Hello Vijay!


This example shows an Arrow Function with a parameter but without paranthesis.

How are You?



Arrow Function using this keyword : 
    < !DOCTYPE html>
    < html>
    < body>

    < h1>JavaScript "this"< /h1>

    < p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.< /p>

    < p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.< /p>

    < button id="btn">Click Me!< /button>

    < p id="demo">< /p>

    < script>
        let hello = "";

        hello = function() {
            document.getElementById("demo").innerHTML += this;
        }

        //The window object calls the function:
        window.addEventListener("load", hello);

        //A button object calls the function:
        document.getElementById("btn").addEventListener("click", hello);
    < /script>

    < /body>
    < /html>
Output :

JavaScript "this"

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.



(JS - Arrays)