Funcții săgeată (arrow) vs. funcții normale în javascript

Dincolo de faptul că pare cool să scrii javascript folosind arrow functions (sau funcții tip săgeată), iată câteva lucruri pe care ar trebui să le știi despre ele, înainte să renunți la funcțiile normale.

Așa că azi am făcut o listă cu câteva diferențe între funcțiile normale și cele arrow (săgeată).

1. Nu sunt hoisted

Acum ca o scurtă recapitulare, dacă nu știi ce e hoisting-ul, ei bine, e faptul că poți apela funcțiile înainte ca ele să fie declarate.

Așa că dacă vei încerca să faci asta:

iAmHoisted();
iAmNotHoisted();

function iAmHoisted() {
  console.log("Apeleaza-ma inainte de declarare");
}

const iAmNotHoisted = () => {
  console.log("Nu ma poti apela inainte de declarare");
};

În consolă vei vedea următoarea eroare:

Ăsta nu e neapărat un lucru rău, pentru că uneori te poate proteja de erori neașteptate.

2. arguments e indisponibil

Citirea argumentelor (adică valorile date pentru parametri declarați) unei funcții se poate face prin folosirea obiectului arguments. Poți citi numele, cât și valorile lor. Evident pe baza valorilor poți determina și tipul fiecăruia.

function withArguments(arg1, arg2) {
  console.log(arguments);
}

const noArguments = (arg1, arg2) => {
  console.log(arguments);
};

withArguments("a", "b");
noArguments("a", "b");

3. Lipsa contextului în care e apelată

O funcție normală poate evalua contextul din care e apelată folosind keyword-ul this. Nu e cazul și pentru o funcție de tip arrow. Dacă vei încerca să faci asta, vei primi tot timpul contextul entității exterioare imediat următoare.

Hai să-ți dau câteva exemple ca să înțelegi ce vreau să spun:

function myFunction() {
    console.log(this);
}

//va returna probabil globaj object, window, de cele mai multe ori
myFunction();

const myObject = {
    field: "valoare",
    myObjectFunction() {
        console.log(this)
    }
}

//va returna obiectul care conține funcția
myObject.myObjectFunction();

function constructorFunction(){
    console.log(this);
}

//va returna funcția însăși
new constructorFunction();

Toate cazurile descrise mai sus sunt invalide în cazul unei funcții arrow.

4. Nu poate fi constructor

Ultimul exemplu dat mai sus, în care se folosește keyword-ul new cu o funcție, e de asemenea valid doar în cazul unei funcții normale, nu și în cazul unei funcții arrow.

const arrowFunc = () => {}

//va rezulta într-o eroare
new arrowFunc();

5. Nu poate fi folosită ca metodă a unui obiect

Reiau din nou cazul descris mai sus:

const myObject = {
    field: "valoare",
    myObjectFunction() {
        console.log(this)
    }
}

//va returna obiectul care conține funcția
myObject.myObjectFunction();

Așa cum se poate observa, funcția myObjectFunction e folosită ca metodă a unui obiect și poate fi apelată folosind doar referința obiectului respectiv. În acest moment, nu există nicio modalitate prin care ai putea declara metode ale unui obiect folosind arrow functions.

Concluzie

În încheiere, tot ce vreau să-ți spun e să ții cont de toate aspectele enumerate mai sus atunci când vei folosi arrow functions. O sa le găsești folosite foarte des, pentru că e varianta mai modernă a funcțiilor în javascript, dar nu mereu e justificată folosirea lor. Ca părere personală, aș zice chiar că folosind funcții normale codul e mai ușor de parcurs vizual, deși poate fi de multe ori mai multe linii de cod de scris pentru a obține același lucru.