Arrow function

Ha csinálok egy sima function-t és benne egy arrow functiont:

A this nem csapja felül az arrow functiont. A külső, befoglaló scope marad meg az arrow functionon belül is. Míg a function felül csapja önmagát, és magát rakja be this-nek.

Az arrow (=>) függvényekben

a this mindig a függvény definíciójának környezetében lévő this-hez tartozik, nem változik.

A sima (function) függvényekben

a this értéke a hívási kontextustól függ: ha objektumon keresztül hívják meg, akkor az objektumra mutat, különben a globális objektumra (pl. window a böngészőben). A this értékét sima függvényeknél a bind, call, és apply metódusok segítségével is állíthatjuk.

Az arrow függvények számára a this konstans, a sima függvények esetében pedig dinamikus a this értéke.

A JavaScript-ben a function (sima function) és az arrow function között több fontos különbség is van. Itt van egy áttekintés a legfontosabb különbségekről:

1. Szintaxis:
   • Sima function:
     function nev() { return 'Ez egy sima function'; }
   • Arrow function:
     const nev = () => 'Ez egy arrow function';
2. A this kulcsszó viselkedése:
   • Sima function esetében a this értéke a hívás környezetétől függ. Ha egy metódusként hívjuk meg (pl. objektum metódusaként), akkor az objektumhoz kötődik. Ha szabadon álló funkciót hívunk meg, akkor (strict mode-ban) undefined lesz, egyébként pedig az általános globális objektumhoz (pl. a böngészőben a window objektumhoz) kötődik.
   • Arrow function esetében a this értéke lexikailag kötődik, vagyis az arrow function létrehozásának helyén lévő this-t veszi fel. Nem kötődik újra, amikor meghívjuk a funkciót.
3. Arguments objektum:
   • Sima function rendelkezik egy arguments objektummal, amely egy hasonló tömbhöz tartalmazza a funkcióhoz átadott összes argumentumot.
   • Arrow function-öknek nincs saját arguments objektuma. Ha az arguments-et használjuk egy arrow function-en belül, akkor az a külső (normál) funkció arguments objektumára fog hivatkozni.
4. Konstruktor:
   • Sima function használható konstruktorként (a new kulcsszóval kombinálva) új objektumok létrehozásához.
   • Arrow function nem használható konstruktorként, és hiba keletkezik, ha megpróbáljuk.
5. Prototype tulajdonság:
   • Sima function rendelkezik prototype tulajdonsággal.
   • Arrow function-nek nincs prototype tulajdonsága.
6. Method shorthand:
   • Objektumokban a sima functiont rövidített módon is írhatjuk, ha metódusként használjuk:
     const obj = { metodus() { return 'Metódus'; } };
   • Arrow function nem használható ilyen rövidített formában.

Ezen különbségek tudatában fontos mérlegelni, melyik fajta funkciót használjuk egy adott helyzetben.

Egy rövidített szintaxisú függvénydefiníció JavaScriptben, amelyet a “=>”, azaz nyíl jel jelöl.

Az arrow function létrehozása egyszerűbb és tömörebb módot kínál a függvények definiálására, és általában a “this” kontextusának kezelésére is más módon reagál, mint a hagyományos függvények.

Hagyományos function

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

Arrow function

const multiply = (a, b) => a * b;

Az arrow function-ök gyakran használatosak rövid és egyszerű kifejezések vagy callback függvények definiálására, és általában rövidebb és olvashatóbb kódot eredményeznek.