Skip to content
Kezdőlap » Nyíl függvények

Nyíl függvények

A nyíl függvények az egyik fontos újítása a JavaScript ES6-ban bevezetett új nyelvi elemeinek. Minden hagyományos függvény átírható nyíl függvényes megfelelőre.

nyíl függvények
Köszönöm a képet!

Egyszerű példa

Induljunk ki egy nagyon egyszerű példából. Van egy függvényünk, ami a konzolba ír egy szöveget:

function hello(msg) {
   console.log(msg);
}   

A függvénynek átadunk egy szöveget vagy számot és azt bedobja a konzolba:

hello("Szevasztok!");

A böngésző konzoljában az a szöveg fog megjelenni, hogy Szevasztok!

Hogy néz ki ez nyíl függvényes formában?

const hello = (msg) => {
    console.log(msg);
}    

A hívás így történik:

hello("Szia!");

Nincs túl sok különbség. Maximum annyi vehető észre, hogy elhagytuk a function kulcsszót, helyette a const-tal létrehoztuk a hello változót. Tehát az egész olyan, mintha a függvényt egy változóba tettük volna. Végül is ezt tettük.

Másik különbség, hogy a függvény paramétere és a kezdő kapcsos zárójel között ott van az a „nyíl”, vagyis a => karakter pár.

Egyszerűbb forma

Van három olyan eset, amikor sokkal egyszerűbben is definiálhatunk egy nyíl függvényt.

  • Ha csak egy paraméter van, akkor a paraméter köré nem kell kitenni a gömbölyű zárójelet:
const hello = msg => {
    console.log(msg);
}
  • Ha a függvény törzsében csak egy utasítást hajtunk végre, akkor kapcsos zárójel sem kell:
const hello = msg => console.log(msg);
  • Ha nincs paraméter, akkor viszont meg kell adni egy üres gömbölyű zárójel párt:
const hello = () => console.log("Hello World!");

A this használata

Amikor egy hagyományos függvényt írunk és valahol használjuk benne a this kulcsszót, akkor a this mindig azt az objektumot jelenti, ami a függvényt meghívta. Ez lehet például a window, a document, a button, vagy bármelyik másik obejktum. Egy a fontos: mindig azt az objektumot jelöli, ami a függvényt meghívta.

Nyíl függvény esetében pedig a this azt az objektumot jelenti, amin belül a nyíl függvény definiálva lett.

Nézzük a példákat, hogy teljesen vili legyen!

this és a hagyományos függvény – példa

Ez egy hagyományos függvény, ami a this-t használja:

function thisOne() {
  console.log("Who is 'this'?: " + this);
}

Tegyük fel, hogy ezt a függvényt egyszer meghívja a window objektum akkor, amikor az oldal betöltődik:

window.addEventListener("load", thisOne);

Valamint egy gomb, amikor arra kattintunk:

document.getElementById("btn").addEventListener("click", thisOne);

Az első esetben a this az maga a window, mert ő volt aki meghívta a thisOne nevű függvényt:

Who is 'this'?: [object Window]

Szöveg lesz a konzolban.

A második esetben pedig a this az a gomb, mert ő volt az „elkövető”, vagyis aki a függvény hívást kezdeményezte, tehát ez fog megjelenni a konzolban:

Who is 'this'?: [object HTMLButtonElement]

this és a nyíl függvény – példa

A nyílfüggvény így néz ki:

const thisTwo = () => console.log(`Who is "this"?: ${this}`);

A függvény hívásai így történnek:

window.addEventListener("load", thisTwo);
document.getElementById("btn2").addEventListener("click", thisTwo);

Mindkét esetben ezt látjuk a konzolban:

Who is "this"?: [object Object]

Ezekben az esetekben az ős Object objektum volt a this, mert valójában ez definálja a függvényt. A lényeg tehát, hogy nem a hívó a this ebben az esetben.

Remélem sikerült ezzel érzékeltetnem a this különbözőképpen történő kezelését.

Működő példa

Itt található egy példa, amin keresztül bemutatom a nyíl függvény hosszabb és rövidebb formáját, valamint a this használatát is.

Vélemény, hozzászólás?

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük