Cosa sono le funzioni freccia JavaScript?

In questo articolo imparerai tutto sulle funzioni freccia JavaScript. Funzioni freccia che usiamo per rendere il codice più conciso e ci sono molte varianti che puoi scrivere.

Javascript è un linguaggio molto ricco di funzioni . Le funzioni in javascript sono uno dei concetti più preziosi. Scriviamo funzioni, passiamo funzioni, callback e il codice di sincronizzazione abbiamo funzioni. È solo una parte fondamentale di JavaScript.

Per molto tempo abbiamo scritto parole chiave di funzione per scrivere una funzione in javascript. Ecco alcuni esempi di funzioni in JavaScript. Puoi vedere che stiamo usando una parola chiave di funzione qui.

(function () {
   //...
});

Una funzione anonima non è accessibile dopo la sua creazione iniziale. Pertanto, spesso è necessario assegnarlo a una variabile.

Ad esempio, quanto segue mostra una funzione anonima che visualizza un messaggio:

let show = function() {
    console.log('Anonymous function');
};

show();

Poiché in seguito dobbiamo chiamare la funzione anonima, assegniamo la funzione anonima alla show variabile.

Poiché l'intera assegnazione della funzione anonima alla variabile show costituisce un'espressione valida, non è necessario racchiudere la funzione anonima all'interno delle parentesi ().

In pratica, spesso si passano funzioni anonime come argomenti ad altre funzioni. Per esempio:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Nota che le funzioni sono cittadini di prima classe in JavaScript. Pertanto, puoi passare una funzione a un'altra funzione come argomento.

Qui puoi vedere ogni volta che dobbiamo scrivere una parola chiave di funzione e definire una funzione. Ma è qui che entra in gioco la funzione freccia. ES6 ha introdotto espressioni di funzioni freccia che forniscono una scorciatoia per dichiarare funzioni anonime. Un'espressione di funzione freccia è un'alternativa compatta a un'espressione di funzione tradizionale , con alcune differenze semantiche e limitazioni deliberate nell'uso

Normalmente le funzioni Arrow sono più brevi e talvolta si comportano in modo diverso rispetto alle tradizionali funzioni javascript.

Le funzioni freccia non sono supportate per Internet Explore .

Stiamo usando i simboli '= e >' quando definiamo una funzione freccia. Sembra una freccia, ecco perché chiamiamo queste funzioni funzioni freccia.

let show = () => console.log('Anonymous function');

Possiamo scrivere la funzione normale come una funzione freccia come questa.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Se hai 2 argomenti puoi usare le parentesi come una normale funzione:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Per rimuovere questo problema, dobbiamo racchiuderlo tra parentesi .

Ora javascript lo sa come valore di ritorno e non è solo una parentesi graffa per il corpo di una funzione.

Le funzioni freccia non hanno le proprie associazioni a this, argumentso supere non devono essere utilizzate come metodi

• Le espressioni di funzione freccia devono essere utilizzate solo per funzioni non di metodo perché non hanno il proprio this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Sto chiamando l'azione su un oggetto persona e il valore del nome verrà restituito con la stringa concatenata. Ora usiamo le funzioni freccia invece delle normali funzioni.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Ora otteniamo solo " dice ciao " come output. Cos'è successo qua? Quando usiamo le funzioni freccia il valore del nome non è stato impostato come funzionano le normali funzioni. È semplicemente impostato sull'oggetto finestra quando lo usiamo nelle funzioni freccia. Si comporta come se la funzione delle azioni fosse una funzione autonoma.

Per ragioni simili, i metodi call(), apply()e bind()non sono utili quando vengono richiamati su funzioni freccia, poiché le funzioni freccia stabiliscono thisin base all'ambito in cui è definita la funzione freccia e il thisvalore non cambia in base a come viene richiamata la funzione.

• Le funzioni freccia non possono essere utilizzate come costruttori e generano un errore quando vengono chiamate con new. Inoltre non hanno prototypeproprietà.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Questo è tutto sulle funzioni della freccia e spero che tu abbia una perfetta comprensione delle funzioni della freccia. Ci vediamo in un altro tutorial.

Grazie!