Függvények ebben a kurzusban:

A(z) Függvények fogalomról

A függvény egy szervezett, újrahasznosítható kódrészlet, amely valamilyen műveletet hajt végre. JavaScriptben többféleképpen is definiálhatunk függvényeket. Itt a függvénydeklarációkat és a függvénykifejezéseket nézzük meg. Más lehetőségekről, például a nyílfüggvényekről, más fogalmaknál lesz szó.

Függvénydeklaráció

A függvények definiálásának szokásos módja JavaScriptben a függvénydeklaráció, amelyet függvénydefiníciónak vagy függvényutasításnak is neveznek.

A function kulcsszóból, a függvény nevéből, valamint egy kerek zárójelbe zárt, vesszővel elválasztott paraméterlistából áll. Ezt követi a kapcsos zárójelbe zárt függvénytörzs (utasítások gyűjteménye, amely meghatározza, mit tesz a függvény).

function someName(param1, param2, param3) {
  // ...
}

A függvény használata

JavaScriptben egy függvényt úgy hívunk meg, hogy leírjuk a függvény nevét, majd utána kerek zárójelbe tesszük az argumentumokat.

someName(arg1, arg2, arg3);

Ha csak leírod a függvény nevét, az nem hívja meg a függvényt JavaScriptben.

function sayHello() {
  console.log('Hello, World!');
}

sayHello;
// => [Function: sayHello]
// The text representations varies between environments.

sayHello();
// => 'Hello, World!'

Paraméterek

Amikor a függvénytörzsben paraméterekkel dolgozol, légy tisztában azzal, hogy a függvénynek átadott eredeti értéket mellékhatások érhetik. JavaScriptben az argumentum az eredeti értékre mutató referencia másolata. Ez a gyakorlatban az argumentum adattípusától függ.

• A primitív adattípusok értékei módosíthatatlanok. Minden „módosítás” mindig új primitív értéket hoz létre. Emiatt az eredeti értéket soha nem befolyásolja, hogy mi történik az argumentummal a függvénytörzsben.

  const num = 0;
  
  function increase(number) {
    number = number + 1;
  }
  
  increase(num);
  num;
  // => 0
  

• Másképp van ez az olyan értékeknél, mint az objektumok, a tömbök és a függvények. Mivel a referencia másolatáról van szó, egy újraértékadás nem érinti az eredeti értéket. Mivel azonban sekély másolatról van szó, ha az argumentumot a függvénytörzsben módosítod, az az átadott eredeti értéket is megváltoztatja.

  const nums = [0, 1, 2, 3, 4];
  
  function pushFive(arr) {
    arr.push(5);
  }
  
  pushFive(nums);
  nums;
  // => [0, 1, 2, 3, 4, 5]
  

JavaScriptben alapértelmezés szerint a függvénydeklarációban megadott összes paraméter opcionális. Ha egy függvényt kevesebb argumentummal hívunk meg, mint ahány paramétere van, a hiányzó argumentumok értéke undefined lesz a függvénytörzsben, lásd a Null és Undefined fogalmat. Sok esetben ésszerűbb egy paramétert alapértelmezett értékkel inicializálni, ha nem adunk át neki értéket, vagy undefined értéket kap. Ezt úgy teheted meg, hogy közvetlenül a függvénydefinícióban adsz meg alapértelmezett paramétereket.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

Egy függvényt több argumentummal is meghívhatunk, mint ahány paraméter a függvénydefinícióban szerepel. Az összes argumentum, a feleslegeseket is beleértve, megtalálható az arguments „tömb”-ben.

Lehetőség van olyan függvények definiálására is, amelyek tetszőleges számú argumentumot fogadnak el (variadikus függvények); a részleteket lásd a rest paramétereknél a Rest- és spread-operátorok fogalomban.

Visszatérési utasítás

A return utasítás befejezi a függvény végrehajtását, és megadja azt az értéket, amelyet a függvény visszaad a hívójának. Egy függvényben több return utasítás is lehet.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

Ha egy függvény nem ad vissza értéket, vagy nincs benne return utasítás, az eredménye undefined. JavaScriptben nincsenek implicit return utasítások.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

JavaScriptben pontosan egy értéket adhatsz vissza. Ha több információt szeretnél átadni, először egyetlen egységbe kell őket foglalnod, általában egy objektumba vagy egy tömbbe.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Függvénykifejezés

A függvénydeklaráció önálló utasítás. Néha azonban hasznos lehet egy függvényt egy másik kifejezés részeként definiálni, például értékadásban, függvényparaméterként (callback) vagy egy objektum értékeként. Erre való a függvénykifejezés. A szintaxisa ugyanaz, mint a függvénydeklarációé, csak itt elhagyható a függvény neve, így névtelen függvényt hozhatsz létre.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Scope

Egy függvény új végrehajtási környezetet hoz létre JavaScriptben. A függvényen belül definiált változók nem érhetők el a függvényen kívülről. A szülő scope-ban (abban a scope-ban, ahol maga a függvény definiálva van) definiált változók viszont elérhetők a függvényen belül. Az MDN scope-ról szóló dokumentációja példákkal szemlélteti ezt a viselkedést.

Ha többet szeretnél megtudni a változók scope-járól JavaScriptben, nézd meg a closure-öket.