THE ARROW FUNCTIONS

ARROW FUNCTION

Arrow functions are a new type of anonymous functions, introduced in ES6, they have a compact and easily readable syntax. Arrow functions are particularly suitable as callbacks.

Arrow functions allow us to write shorter function syntax:

let myFunction = (a, b) => a * b;

Before the arrow functions we had:

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

With the arrow functions we have:

hello = () => {
return “Hello World!”;
}

It gets shorter! If the function has only one statement and the statement returns a value, you can remove the parentheses and the return keyword:

hello = () => “Hello World!”;

Note: This only works if the function has only one statement. If you have parameters, you pass them in brackets:

hello = (val) => “Hello ” + val;

Also, if you only have one parameter, you can skip the brackets too:

hello = val => “Hello ” + val;

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Arrow Function</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*--Le arrow function sono un nuovo tipo di funzioni anonime, introdotte in ES6, 
        hanno una sintassi compatta e facilmente leggibile.*/
        let fn = function(x){
            return x * Math.PI;
        }
        //La stessa funzione con una arrow function.
        /*--Non è necessario definire la key function,
        si indicano i parametri se ne ha il simbolo =>
        e il corpo della funzione. Inoltre quando vi è
        un solo parametro non è necessario indicare
        le parentesi tonde, infine se composta da
        una singola istruzione si può togliere il return
        e le graffe.*/
        //let fn_a = (x) => { return x * Math.PI};
        let fn_a = x => x * Math.PI;
        console.log(fn(2));
        console.log(fn_a(2));
        /*--Le arrow function sono particolarmente adatte come callback.*/
        let a = [2,6,9,10,29];
        let b = a.filter(function(x)
        {
            return x % 2 == 0;
        });
        /*--Al momento non è importante capire il metodo filter. Esso
        prende in input una callback, in x vengono passati di volta in volta
        gli elementi dell'array. Viene verificato se il numero è pari con 
        l'operatore modulo e se pari il numero è inserito nell'array b.*/
        console.log(b);
        /*--Usiamo una arrow function*/
        let c = a.filter(x => x % 2 == 0);
        console.log(c);
        //ALTRI ESEMPI
        let myFunction = (a,b) => a * b;
        console.log(myFunction(5,4));
        let hello1 = () => 'Hello world!';
        console.log(hello1());
        let hello = val => 'Hello '+ val;
        console.log(hello('Marco!'))
        let myFunc = a => Math.sqrt(a);
        console.log(myFunc(144));
    </script>
</body>
</html>

LINKS TO PREVIOUS POST

THE JAVASCRIPT LANGUAGE

LINK TO THE CODE ON GITHUB

GITHUB

ARROW FUNCTION

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

THE ARROW FUNCTIONS