Funkční objekt, NFE

Jak již víme, funkce v JavaScriptu je hodnota.

Každá hodnota v JavaScriptu má svůj typ. Jakého typu je funkce?

V JavaScriptu jsou funkce objekty.

Dobrý způsob, jak si představit funkce, je představit si je jako „akční objekty“, které lze volat. Můžeme je nejenom volat, ale i zacházet s nimi jako s objekty: přidávat a ubírat vlastnosti, předávat je odkazem a tak dále.

Vlastnost „name“

Funkční objekty obsahují některé užitečné vlastnosti.

Například název funkce je dostupný ve vlastnosti name:

function řekniAhoj() {
  alert("Ahoj");
}

alert(řekniAhoj.name); // řekniAhoj

Zábavné je, že logika přiřazení názvu je chytrá a přiřadí korektní název i funkci, která je vytvořena bez názvu a pak okamžitě přiřazena:

let řekniAhoj = function() {
  alert("Ahoj");
};

alert(řekniAhoj.name); // řekniAhoj (je tady název!)

Funguje to i tehdy, je-li přiřazena jako standardní hodnota:

function f(řekniAhoj = function() {}) {
  alert(řekniAhoj.name); // řekniAhoj (funguje!)
}

f();

Ve specifikaci se tato vlastnost nazývá „kontextuální název“ („contextual name“). Jestliže funkce neobsahuje vlastní název, je při přiřazení detekován z kontextu.

I metody objektů mají názvy:

let uživatel = {

  řekniAhoj() {
    // ...
  },

  řekniNashle: function() {
    // ...
  }

}

alert(uživatel.řekniAhoj.name); // řekniAhoj
alert(uživatel.řekniNashle.name); // řekniNashle

Není v tom ovÅ¡em nic magického. Existují případy, kdy není způsob, jak zjistit skutečný název. V takovém případÄ› je vlastnost name prázdná, například zde:

// funkce vytvořená uvnitř pole
let pole = [function() {}];

alert( pole[0].name ); // <prázdný řetězec>
// motor nemá jak zjistit správný název, takže tady žádný není

V praxi však většina funkcí název má.

Vlastnost „length“

Další vestavÄ›ná vlastnost je length, která vrací počet parametrů funkce, například:

function f1(a) {}
function f2(a, b) {}
function mnoho(a, b, ...další) {}

alert(f1.length); // 1
alert(f2.length); // 2
alert(mnoho.length); // 2

Zde vidíme, že zbytkové parametry se nepočítají.

Vlastnost length se nÄ›kdy používá pro introspekci ve funkcích, které operují s jinými funkcemi.

Například v níže uvedeném kódu funkce zeptejSe pÅ™ijímá parametr otázka, kterou položí, a libovolný počet funkčních handlerů v parametru handlery, které zavolá.

Jakmile uživatel poskytne odpověď, funkce zavolá handlery. Můžeme předávat dva druhy handlerů:

• Funkci bez argumentů, která se volá jedinÄ› tehdy, když uživatel zadá kladnou odpověď.
• Funkci s argumenty, která se volá v každém případÄ› a vrátí nÄ›jakou odpověď.

Abychom zavolali handler správnÄ›, prozkoumáme vlastnost handler.length.

Myšlenkou je, že máme jednoduchou syntaxi handleru bez argumentů pro kladné případy (nejčastější varianta), ale jsme schopni podporovat i univerzální handlery:

function zeptejSe(otázka, ...handlery) {
  let jeAno = confirm(otázka);

  for(let handler of handlery) {
    if (handler.length == 0) {
      if (jeAno) handler();
    } else {
      handler(jeAno);
    }
  }

}

// při kladné odpovědi se volají oba handlery
// při záporné odpovědi se volá jen druhý
zeptejSe("Otázka?", () => alert('Řekl jste ano'), výsledek => alert(výsledek));

Toto je zvláštní případ tzv. polymorfismu – odliÅ¡ného zacházení s argumenty v závislosti na jejich typu nebo v naÅ¡em případÄ› v závislosti na jejich počtu v length. Tato myÅ¡lenka je často využívána v knihovnách JavaScriptu.

Vlastní vlastnosti

Můžeme si také přidávat svoje vlastní vlastnosti.

Zde pÅ™idáme vlastnost čítač, která počítá celkový počet volání:

function řekniAhoj() {
  alert("Ahoj");

  // spočítáme, kolikrát jsme tuto funkci volali
  řekniAhoj.čítač++;
}
řekniAhoj.čítač = 0; // počáteční hodnota

řekniAhoj(); // Ahoj
řekniAhoj(); // Ahoj

alert( `Voláno ${řekniAhoj.čítač}krát` ); // Voláno 2krát

Vlastnosti funkce někdy mohou nahradit uzávěry. Například můžeme přepsat příklad funkce čítače z kapitoly Oblast platnosti proměnné, uzávěr tak, že použijeme vlastnost funkce:

function vytvořČítač() {
  // namísto:
  // let počet = 0

  function čítač() {
    return čítač.počet++;
  };

  čítač.počet = 0;

  return čítač;
}

let čítač = vytvořČítač();
alert( čítač() ); // 0
alert( čítač() ); // 1

Nyní je počet uložen přímo ve funkci, ne v jejím vnÄ›jším lexikálním prostÅ™edí.

Je to lepší nebo horší, než použít uzávěr?

Hlavním rozdílem je, že jestliže hodnota počet pÅ™ebývá ve vnÄ›jší promÄ›nné, externí kód není schopen k ní pÅ™istupovat. Mohou ji modifikovat jedinÄ› vnoÅ™ené funkce. Ale jestliže je vázána na funkci, pak je nÄ›co takového možné:

function vytvořČítač() {

  function čítač() {
    return čítač.počet++;
  };

  čítač.počet = 0;

  return čítač;
}

let čítač = vytvořČítač();

čítač.počet = 10;
alert( čítač() ); // 10

Volba implementace tedy závisí na našich potřebách.

Pojmenovaný funkční výraz

Pojmenovaný funkční výraz („Named Function Expression“), zkráceně NFE, je termín označující funkční výraz, který má nějaký název.

Vezměme si například obyčejný funkční výraz:

let řekniAhoj = function(kdo) {
  alert(`Ahoj, ${kdo}`);
};

A přidejme mu název:

let řekniAhoj = function funkce(kdo) {
  alert(`Ahoj, ${kdo}`);
};

Dosáhli jsme tím něčeho? Jaký je smysl pÅ™idaného názvu „funkce“?

Nejprve si vÅ¡imnÄ›me, že stále máme funkční výraz. PÅ™idání názvu „funkce“ za function z nÄ›j neučinilo deklaraci funkce, protože funkce je stále vytvoÅ™ena jako součást pÅ™iÅ™azovacího výrazu.

Přidání takového názvu rovněž nic nerozbilo.

Funkce je stále dostupná jako řekniAhoj():

let řekniAhoj = function funkce(kdo) {
  alert(`Ahoj, ${kdo}`);
};

řekniAhoj("Jan"); // Ahoj, Jan

Název funkce má dvÄ› speciální vÄ›ci, které jsou důvodem pro jeho použití:

1. Název umožňuje funkci odkazovat se uvnitř sebe na sebe sama.
2. Název není viditelný zvnějšku funkce.

Například následující funkce řekniAhoj volá sama sebe s parametrem "Host", není-li pÅ™edáno kdo:

let řekniAhoj = function funkce(kdo) {
  if (kdo) {
    alert(`Ahoj, ${kdo}`);
  } else {
    funkce("Host"); // použijeme „funkce“ k volání sebe sama
  }
};

řekniAhoj(); // Ahoj, Host

// Ale tohle nebude fungovat:
funkce(); // Chyba, funkce není definována (není viditelná zvnějšku funkce)

Proč používáme funkce? Možná by pro vnoÅ™ené volání stačilo použít řekniAhoj?

Ve skutečnosti ve většině případů ano:

let řekniAhoj = function(kdo) {
  if (kdo) {
    alert(`Ahoj, ${kdo}`);
  } else {
    řekniAhoj("Host");
  }
};

Problém s tímto kódem je, že řekniAhoj se může ve vnÄ›jším kódu zmÄ›nit. Jestliže funkce bude pÅ™iÅ™azena do jiné promÄ›nné, tento kód začne způsobovat chyby:

let řekniAhoj = function(kdo) {
  if (kdo) {
    alert(`Ahoj, ${kdo}`);
  } else {
    řekniAhoj("Host"); // Chyba: řekniAhoj není funkce
  }
};

let vítej = řekniAhoj;
řekniAhoj = null;

vítej(); // Chyba, vnořené volání řekniAhoj už nefunguje!

To se stane proto, že funkce pÅ™ebírá řekniAhoj ze svého vnÄ›jšího lexikálního prostÅ™edí. Neexistuje lokální řekniAhoj, takže se použije vnÄ›jší promÄ›nná. A v okamžiku volání je vnÄ›jší řekniAhoj rovno null.

Nepovinný název, který můžeme vložit do funkčního výrazu, je určen právě k řešení problémů tohoto druhu.

Použijme jej k opravě našeho kódu:

let řekniAhoj = function funkce(kdo) {
  if (kdo) {
    alert(`Ahoj, ${kdo}`);
  } else {
    funkce("Host"); // Nyní je vše v pořádku
  }
};

let vítej = řekniAhoj;
řekniAhoj = null;

vítej(); // Ahoj, Host (vnořené volání funguje)

Nyní to funguje, protože název „funkce“ je funkčnÄ› lokální. NepÅ™ebírá se zvnÄ›jÅ¡ku (a není tam viditelný). Specifikace zaručuje, že se bude vždy odkazovat na aktuální funkci.

VnÄ›jší kód stále má svou promÄ›nnou řekniAhoj nebo vítej. A funkce je „interní funkční název“, způsob, jakým tato funkce může spolehlivÄ› volat sama sebe.

Shrnutí

Funkce jsou objekty.

Zde jsme probrali jejich vlastnosti:

• name – název funkce. Obvykle se pÅ™ebírá z definice funkce, ale pokud tam není, JavaScript se pokusí odhadnout jej z kontextu (tj. z pÅ™iÅ™azení).
• length – počet argumentů v definici funkce. Zbytkové parametry se nepočítají.

Je-li funkce deklarována jako funkční výraz (ne v hlavním běhu kódu) a ten obsahuje název, nazývá se pojmenovaný funkční výraz. Název lze používat uvnitř funkce, aby se na ni odkazoval, pro rekurzívní volání a podobně.

Funkce si také může uchovávat přidané vlastnosti. Tuto vlastnost zhusta využívá mnoho dobře známých JavaScriptových knihoven.

Vytvářejí „hlavní“ funkci a pÅ™idávají k ní mnoho dalších „pomocných“ funkcí. Například knihovna jQuery vytváří funkci jménem $. Knihovna lodash vytváří funkci jménem _ a pak do ní pÅ™idává _.clone, _.keyBy a jiné vlastnosti (pokud se o nich chcete dozvÄ›dÄ›t víc, nahlédnÄ›te do dokumentace). Ve skutečnosti to dÄ›lají proto, aby snížily zamoÅ™ení globálního prostoru, takže jedna knihovna vytváří pouze jednu globální promÄ›nnou. Tím se snižuje pravdÄ›podobnost konfliktů názvů.

Funkce tedy může sama o sobě odvádět užitečnou práci a může také obsahovat hromadu jiných funkcionalit ve svých vlastnostech.