De ce ar trebui să fii atent la utilizarea funcțiilor săgeată în JavaScript

Sintaxa funcției săgeată a sosit odată cu lansarea ECMAScript 2015, cunoscut și sub numele de ES6. Astăzi, funcțiile săgeată au devenit caracteristica preferată a multor programatori JavaScript. Această dragoste pentru funcțiile săgeată se datorează sintaxei concise și comportamentului simplu al cuvântului cheie „acest”.

Dar funcțiile săgeată au unele dezavantaje. Aflați despre diferențele cheie dintre funcțiile săgeată și funcțiile obișnuite și aflați de ce, în cele mai multe cazuri, este mai bine să rămâneți la funcțiile obișnuite.

1. Trebuie să definiți o funcție săgeată înainte de ao utiliza

Nu puteți ridica o funcție de săgeată. Regulile implicite de ridicare JavaScript vă permit să apelați o funcție înainte de a o defini, dar nu este cazul funcțiilor săgeți. Dacă aveți un fișier JavaScript cu funcții, aceasta ar însemna că tot codul important va fi jos în partea de jos a fișierului.

Luați în considerare următorul cod JavaScript, de exemplu:

const doubleNumbers = (numere) { 
 numere.hartă(n => n * 2)
}
const jumatateNumere = (numere) { 
 numere.hartă(n => n/ 2)
}
const sumNumbers = (numere) { 
 numere.reduce((suma, n) => { 
întoarcere suma + n; 
 }, 0)
}
const numere = [1, 20, 300, 700, 1500]
const dublat = doubleNumbers (numere)
consolă.log (jumătate de numere (dublat))
consolă.log (sum Numerele (numerele))

În blocul de cod de mai sus, codul important este în jos în jos. Toate funcțiile de ajutor sunt definite înainte de punctul de execuție. Trebuie să creați-vă funcțiile JavaScript în partea de sus a fișierului poate fi incomod, deoarece va trebui să derulați în jos pentru a vedea codul real care face treaba.

Dacă ați mutat funcțiile de ajutor în partea de jos și codul real în partea de sus, veți primi o eroare de referință. Runtime tratează funcția ca pe o variabilă. Astfel, trebuie să-l definiți mai întâi înainte de a-l accesa sau invoca. Dar dacă ați convertit toate funcțiile săgeților în funcții obișnuite (cu funcţie cuvânt cheie), atunci codul dvs. ar funcționa bine. În același timp, codul important rămâne în partea de sus unde îl puteți localiza.

Aceasta este una dintre cele mai mari probleme legate de utilizarea funcțiilor săgeților. Nu prezintă niciun comportament de găzduire. Cu alte cuvinte, trebuie să le definiți înainte de locul real în care le-ați folosi. Pe de altă parte, puteți ridica funcții obișnuite.

2. Funcțiile săgeților pot fi confuze pentru unii oameni

Un alt motiv pentru a folosi funcțiile obișnuite în loc de funcțiile săgeți este lizibilitatea. Funcțiile obișnuite sunt mai ușor de citit, deoarece folosesc în mod explicit funcţie cuvânt cheie. Acest cuvânt cheie identifică faptul că codul în cauză este o funcție.

Pe de altă parte, atribuiți funcții săgeți variabilelor. În calitate de începător, acest lucru ar putea să vă încurce să vă gândiți că codul este o variabilă, mai degrabă decât o funcție.

Comparați cele două funcții de mai jos:

const jumatateNumere = (numere) => {
întoarcere numere.hartă(n => n/ 2)
}
funcţiejumatateNumere(numere) { 
întoarcere numere.hartă(n => n/ 2)
}

La prima vedere, puteți spune cu ușurință că a doua bucată de cod este o funcție. Sintaxa arată clar că codul este o funcție. Cu toate acestea, prima este ambiguă - s-ar putea să nu știți cu ușurință dacă este o variabilă sau o funcție.

3. Nu puteți utiliza funcțiile săgeată ca metode

Când utilizați o funcție săgeată, acest cuvântul cheie corespunde a ceea ce se află în afara obiectului în care ne aflăm. În cele mai multe cazuri, este obiectul fereastră.

Luați în considerare următorul obiect:

const persoana = {
 Nume: "Kyle",
 nume: "Bucătar",
 printeaza numele: () => {
consolă.Buturuga(`${acest.Nume}``${acest.nume}` )
 }
}
person.printName()

Dacă rulați codul, veți observa că browserul se tipărește nedefinit atât pentru prenume, cât și pentru nume. Deoarece folosim o funcție săgeată, acest cuvântul cheie corespunde obiectului fereastră. De asemenea, nu există Nume sau nume proprietate definită acolo.

Pentru a rezolva această problemă, trebuie să utilizați o funcție obișnuită:

const persoana = {
 Nume: "Kyle",
 nume: "Bucătar",
 printeaza numele: funcţie() {
consolă.Buturuga(`${acest.Nume}``${acest.nume}` )
 }
}
person.printName()

Acest lucru va funcționa bine pentru că acest se referă la persoană obiect. Dacă veți face mult acest tip de programare orientată pe obiecte, atunci va trebui să vă asigurați că utilizați funcții obișnuite. Funcțiile săgeților nu vor funcționa.

Când să utilizați funcțiile săgeată

Utilizați funcțiile de săgeți în principal în locurile în care aveți nevoie de o funcție anonimă. Un exemplu de astfel de scenariu este utilizarea unei funcții de apel invers. Este mai bine să folosiți o funcție săgeată atunci când scrieți un apel invers, deoarece sintaxa este mult mai simplă decât scrierea unei funcții complete.

Comparați aceste două și decideți care este mai simplă:

funcţiejumatateNumere(numere) {
întoarcere numere.hartă(n => n/ 2)
}
funcţiejumatateNumere(numere) {
întoarcere numere.hartă(funcţie(n) {
întoarcere n/ 2
 })
}

Ambele cazuri transmit o funcție de apel invers metodei map(). Dar primul apel invers este o funcție săgeată, în timp ce a doua este o funcție completă. Puteți vedea cum prima funcție ocupă mai puține linii de cod decât a doua funcție: trei vs. cinci.

Cealaltă dată pentru a utiliza funcțiile săgeată este ori de câte ori doriți să vă ocupați de o anumită sintaxă „acest lucru”. Obiectul „acest” se va schimba în funcție de dacă utilizați funcții obișnuite sau funcții săgeți pentru anumite lucruri.

Următorul bloc de cod înregistrează doi ascultători de evenimente „clic” pe obiectul document. Prima instanță folosește o funcție obișnuită ca apel invers, în timp ce a doua folosește o funcție săgeată. În ambele apeluri inverse, codul înregistrează obiectul de execuție (this) și ținta evenimentului:

document.addEventListener("clic", funcţie(e) {
consolă.Buturuga("FUNCŢIE", acest, e.țintă)
})
document.addEventListener("clic", (e) => {
consolă.Buturuga("SĂGEATĂ", acest, e.țintă)
})

Dacă ar fi să rulați acest script, veți observa că referința „această” este diferită pentru ambele. Pentru funcția obișnuită, această proprietate face referire la document, care este același cu e.ţintă proprietate. Dar pentru funcția săgeată, aceasta face referire la obiectul fereastră.

Când utilizați o funcție obișnuită ca apel invers, atunci aceasta se va referi la elementul în care declanșăm evenimentul. Dar când utilizați o funcție săgeată, atunci acest cuvânt cheie este implicit la obiectul fereastră.

Aflați mai multe despre funcțiile săgeată vs funcțiile obișnuite

Există câteva alte diferențe subtile între funcțiile obișnuite și funcțiile săgeți. Stăpânirea ambelor tipuri de funcții este fundamentală pentru a dobândi stăpânirea JavaScript. Învață când să folosești unul și când să îl folosești pe celălalt; veți înțelege apoi implicațiile utilizării fie a unei funcții obișnuite, fie a unei săgeți în JavaScript.