Arrow funkcijos vs įprastos funkcijos: Kurią pasirinkti ir kodėl?

Šiuolaikiniame programavime svarbu ne tik sukurti veikiančią programą, bet ir padaryti ją aiškią bei lengvai prižiūrimą. JavaScript kalba siūlo įvairius būdus funkcijoms apibrėžti, tačiau dažniausiai susiduriame su dviem tipais: arrow funkcijomis ir įprastomis funkcijomis. Kiekvienas iš šių būdų turi savo privalumų ir trūkumų, todėl svarbu suprasti, kada naudoti vieną ar kitą. Šiame straipsnyje mes lyginsime arrow funkcijas ir įprastas funkcijas, pateikdami praktinius pavyzdžius.

Kas yra arrow funkcijos?

Arrow funkcijos (arba „lankstinės“ funkcijos) buvo pristatytos JavaScript ES6 standarte, siekiant supaprastinti funkcijų apibrėžimą. Jos turi trumpesnę sintaksę ir dažnai naudojamos dėl savo paprastumo ir lengvumo, ypač kai reikia parašyti vieno ar kelių argumentų funkcijas. Arrow funkcijos turi tokią sintaksę:

const suma = (a, b) => a + b;

Kaip matote, vietoje function žodžio naudojame => simbolį. Tai žymiai supaprastina kodą, ypač jei funkcija turi tik kelis paprastus veiksmus.

Kas yra įprastos funkcijos?

Įprastos funkcijos yra ilgesnės, tačiau taip pat labai populiarios ir dažnai naudojamos. Jų sintaksė yra šiek tiek sudėtingesnė, tačiau jos suteikia daugiau galimybių kontroliuoti funkcijų elgseną, ypač kai reikia naudoti this kontekstą. Įprastos funkcijos apibrėžiamos taip:

function suma(a, b) {
    return a + b;
}

Ši sintaksė yra labiau tradicinė, ir ji leidžia jums apibrėžti funkcijas su keliomis eilutėmis, pridėti papildomas logikas, arba pasinaudoti this raktu, kurio trūksta arrow funkcijose.

Arrow funkcijos vs įprastos funkcijos: Pagrindiniai skirtumai

Pažvelkime į keletą pagrindinių skirtumų tarp arrow funkcijų ir įprastų funkcijų:

1. „this“ elgesys

Vienas didžiausių skirtumų tarp šių dviejų tipų funkcijų yra, kaip jos tvarko this kontekstą. Įprastos funkcijos turi savo this kontekstą, kuris priklauso nuo to, kaip funkcija buvo iškviesta. Tuo tarpu arrow funkcijos naudoja this iš išorinio konteksto, todėl jos nekeičią šio reikšmės.

function regularFunction() {
    console.log(this);
}
regularFunction(); // „this“ nurodo į globalų objektą (naršyklėje window)

const arrowFunction = () => {
    console.log(this);
}
arrowFunction(); // „this“ nurodo į išorinį kontekstą (dažniausiai tai bus „window“ naršyklėje)

Taigi, jeigu reikia, kad funkcija naudotų aplinkos this reikšmę (pvz., klasės metodų atveju), arrow funkcija gali būti netinkama. Įprastos funkcijos, priešingai, išlaiko savo kontekstą, priklausomai nuo to, kaip jos buvo iškviestos.

2. Sintaksės paprastumas

Arrow funkcijos pasižymi paprasta ir glausta sintakse, todėl jos ypač naudingos trumpiems funkcijų apibrėžimams. Pvz., jei jums reikia paprastos funkcijos, kuri tik grąžina reikšmę, arrow funkcija gali būti ideali pasirinkimo galimybė. Tuo tarpu įprastos funkcijos suteikia daugiau lankstumo, tačiau dažniausiai reikalauja daugiau kodų eilutės, ypač kai funkcijos yra sudėtingesnės.

3. Įprastų funkcijų parametrai

Įprastos funkcijos leidžia naudoti parametrus, kurie yra neprivalomi ir turi numatytąsias reikšmes. Tai gali būti naudinga, kai norite sukurti funkciją, kuri dirba su kintamais parametrais. Arrow funkcijos tokių galimybių neturi arba jų naudojimas gali būti šiek tiek sudėtingesnis.

function example(a = 10, b = 20) {
    return a + b;
}
example(); // Grąžins 30, nes abu parametrai turi numatytąsias reikšmes

4. Naudojimo atvejai

Arrow funkcijos dažnai naudojamos vietose, kur reikia greitai atlikti mažus veiksmus, pavyzdžiui, map, filter, arba reduce metodų viduje. Jos yra lengvesnės ir greitesnės rašyti. Tuo tarpu įprastos funkcijos dažniausiai naudojamos tada, kai reikia sudėtingesnės logikos arba kai reikia pasinaudoti funkcijos kontekstu, pvz., dirbant su metodais objektuose ar klasėse.

Arrow funkcijos vs įprastos funkcijos: Pavyzdžiai

Norėdami geriau suprasti skirtumus, pažiūrėkime į pavyzdžius, kaip tiek arrow funkcijos, tiek įprastos funkcijos gali būti naudojamos praktikoje.

Arrow funkcija su map metodu

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16, 25]

Šiuo atveju map metodas su arrow funkcija leidžia labai greitai apdoroti kiekvieną masyvo elementą ir grąžinti jo kvadratą. Tai yra idealus atvejis naudoti arrow funkciją dėl jos paprastumo ir glaustumo.

Įprasta funkcija su map metodu

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(function(num) {
    return num * num;
});
console.log(squares); // [1, 4, 9, 16, 25]

Čia mes naudojame įprastą funkciją su map metodu, ir nors rezultatas tas pats, sintaksė yra šiek tiek ilgesnė ir sudėtingesnė.

Kur naudoti arrow funkcijas ir kur įprastas funkcijas?

Pirmiausia, geriausia naudoti arrow funkcijas, kai dirbate su mažais, paprastais ir vienos eilutės funkcijomis, kurios neturi didelės logikos. Jos taip pat tinka, kai reikia išsaugoti išorinį this kontekstą, pvz., dirbant su funkcijomis, kurios perduodamos į map, filter ir kitus metodus.

Naudokite įprastas funkcijas, kai turite sudėtingesnę logiką, kai reikia naudoti this arba kai funkcija turi daugiau nei kelis veiksmus. Jos taip pat yra tinkamos, kai reikia parametrų numatytųjų reikšmių arba kai norite turėti visišką kontrolę ir lankstumą.

Apibendrinimas

Arrow funkcijos ir įprastos funkcijos turi savo vietą ir naudojimo atvejus. Išmokę juos atskirti ir teisingai naudoti, galėsite rašyti aiškų, tvarkingą ir lengvai palaikomą kodą. Nepamirškite, kad kiekvienas metodas turi savo privalumų ir trūkumų, todėl svarbu pasirinkti tinkamą sprendimą priklausomai nuo užduoties sudėtingumo ir reikalavimų.