Skoro vše o funkcích v JS na jedné stránce

Co je to funkce

// vytvoření funkce
function pozdrav() {
    console.log("ahoj");
}

// zavolání funkce
pozdrav();

// zavolání funkce ještě jednou
pozdrav();

Návratové hodnoty

Někdy můžeme chtít, aby nám naše funkce po dokončení své operace vrátila nějakou hodnotu. Tuto hodnotu bychom si potom například mohli uložit do nějaké proměnné. Hodnotu můžeme z funkce vrátit pomocí klíčového slova return za které napíšeme co chceme vrátit. Příkaz return zároveň ukončí provádění funkce, takže pokud za ním následuje ještě nějaký kód, tak už se neprovede. Příkaz return můžeme použít také bez vracení nějaké hodnoty když chceme z nějakého důvodu předčasně ukončit provádění funkce.

function nahodneCislo() {
    // použití funkce Math.random, která vrací náhodné číslo od 0 do 1
    // (hodnotu, kterou nám funkce vrátí opět vrátíme v naší funkci)
    return Math.random();
}

const cislo1 = nahodneCislo();
const cislo2 = nahodneCislo();

Klíčové slovo this

V JavaScriptu existuje klíčové slovo this, které má různé hodnoty podle toho kde jej používáme. V tomto seznamu je popsáno čemu se v jakých případech klíčové slovo this rovná:

• v globálním prostoru (mimo funkci) bude klíčové slovo this odkazovat na globální objekt (window objekt)
• v metodě (funkci, která patří objektu) bude klíčové slovo this odkazovat na objekt, který metodu volá
• ve funkci bude při zapnutém strict módu (když na začátek scriptu napíšeme 'use strict';) klíčové slovo this undefined
• ve funkci bude při vypnutém strict módu klíčové slovo this odkazovat na globální objekt (window objekt)
• arrow funkce nemění čemu se klíčové slovo this bude rovnat, bude se rovnat tomu čemu se rovnala v předešlém scopu (pokud je arrow funkce například vnořená v normální funkci a je zapnutý strict mód, tak bude klíčové slovo this undefined)
• ve funkci, kterou předáváme metodě addEventListener bude klíčové slovo this odkazovat na DOM element, kterému jsme event listener přidali

'use strict'; // zapnutí strict módu

console.log(this); // globální objekt (window)

function vypisThis {
    console.log(this); // undefined (protože je zapnutý strict mód)
}
vypisThis();

const objekt1 = {
    cislo: 0,
    zvysCislo: function() {
        this.cislo++; // this odkazuje na objekt, který jej volá
    }
};
objekt1.zvysCislo(); // this bude v metodě zvysCislo odkazovat na objekt1

const objekt2 = {
    cislo: 0
};
objekt2.zvysCislo = objekt1.zvysCislo;
objekt2.zvysCislo(); // this bude v metodě zvysCislo odkazovat na objekt2

const el = document.getElementById('tlacitko');
el.addEventListener('click', function() {
    console.log(this); // this odkazuje na element, kterému event listener patří (ale nesmíme použít arrow funkci)
});

Změnění na co má klíčové slovo this odkazovat při volání funkce

Pokud chceme při volání funkce změnit na co má klíčové slovo this odkazovat, můžeme to udělat pomocí metody call nebo apply. Metoda call přijímá jako první parametr hodnotu na kterou má klíčové slovo this odkazovat a v ostatní parametrech hodnoty, které se mají volané funkci předat jako parametry. Metoda apply to má podobně, ale narozdíl od metody call přijímá jako druhý parametr pole hodnot, které se mají volané funkci předat jako parametry.

function vypisThis(text, pocet) {
    for (let i = 0; i < pocet; i++) {
        console.log(text + " " + this);
    }
}

const objekt1 = { id: 1 };
const objekt2 = { id: 2 };

// zavolání funkce vypisThis - klíčové slovo this bude odkazovat na objekt1
vypisThis.call(objekt1, 'Klíčové slovo this:', 3);

// stejné jako metoda call, až na to že hodnoty, které se volané funkci přadají jako parametry se předávají v poli
vypisThis.apply(objekt2, ['Klíčové slovo this:', 3]);

Vytvoření nové funkce, která bude mít určeno, na co má klíčové slovo this odkazovat

Pokud si chceme předpřipravit na co bude klíčové slovo this odkazovat až později funkci zavoláme, tak k tomu můžeme použít metodu bind. Tato metoda vrací novou funkci, která má již určeno na co klíčové slovo this bude odkazovat když ji budeme volat. Na co bude v nově vytvořené funkci klíčové slovo this odkazovat předáváme metodě bind v prvním parametru. Pokud chceme, tak si můžeme v ostatních parametrech také přednastavit nějaké hodnoty, které se budou automaticky předávat jako parametry když ji budeme volat. Nemuseli bychom je tedy později předávat ručně.

function vypisThis(text, pocet) {
    for (let i = 0; i < pocet; i++) {
        console.log(text + " " + this);
    }
}

const objekt1 = { id: 1 };
const objekt2 = { id: 2 };

// vytvoření funkce pro vypsání objektu objekt1
const vypisObjekt1 = vypisThis.bind(objekt1);

// vytvoření funkce pro vypsání objektu objekt2
const vypisObjekt2 = vypisThis.bind(objekt2, 'Klíčové slovo this:');

vypisObjekt1('Klíčové slovo this:', 3);
vypisObjekt2(3); // první parametr jsme si přednastavili při vytváření funkce

Closure

JavaScript má v sobě zabudovaný mechanismus, kterému se říká closure. Díky closure má funkce, která se nachází v jiné funkci vždy přístup k jejím proměnným i když tato funkce již skončila.

const vytvorPozdravFunkci = function(pozdrav) {
    // funkce vrátí novou funkci (poté skončí)
    return function(name) {
        // i když funkce vytvorPozdravFunkci již skončila, díky closure máme hodnotu proměnné pozdrav stále k dispozici
        console.log(`${pozdrav} ${name}`);
    }
}

const pozdrav1 = vytvorPozdravFunkci('Ahoj');
const pozdrav2 = vytvorPozdravFunkci('Čau');

pozdrav1("Karle"); // vypíše: "Ahoj Karle"
pozdrav2("Pavle"); // vypíše: "Čau Pavle"