JavaScript/Funkcje

Funkcje są najbardziej podstawowym elementem, dzięki któremu można organizować sobie kod w programie. Dzięki nim można wydzielić część kodu, np. powtarzający się, i nadać mu nazwę, która będzie zrozumiała dla osoby czytającej kod. Gdy funkcja ma nazwę, która mówi co dana funkcja robi, nawet gdy kod funkcji jest skomplikowany, możemy zapomnieć o tym co jest w środku.

W języku JavaScript można tworzyć swoje własne funkcje takie jak np. alert. Funkcje tworzymy za pomocą słowa kluczowego function, istnieje kilka sposobów definiowania funkcji

Deklaracja funkcji

Przykład deklaracji funkcji wygląda tak jak poniżej:

function greetings(name) {
    console.log("Hej: " + name);
}

Deklaracja funkcji składa się z nazwy – w tym przypadku greetings, listy parametrów – w tym przypadku name oraz ciała funkcji.

Aby wywołać funkcję, podaje się jej nazwę i w nawiasie argumenty wywołania po przecinkach:

greetings("Co tam"); // Hej: Co tam

Ciąg znaków "Co tam" zostanie przypisany do parametru name i wywoła się kod wewnątrz funkcji. Będzie to wyglądać tak, jakby została zadeklarowana zmienna name z daną wartością.

var name = "Co tam";
console.log("Hej: " + name);

Wewnątrz funkcji można wstawić dowolny kod, oraz specjalne słowo kluczowe return, za którym powinno być wyrażenie. Będzie to wartość, która jest zwracana przez funkcję.

function greetings(name) {
    return "Hey: " + name;
}
var message = greetings("Co tam");

Wywołując funkcję można przypisać wartość zwracaną przez return do zmiennej.

Funkcje zagnieżdżone

Jedna funkcja może wywoływać drugą funkcję, także wartość zwracana przez funkcję może być przekazana do innej funkcji:

function concat(prefix, name) {
   return prefix + name;
}
function greetings(name) {
    return concat("Hej: ", name);
}
alert(concat("On Mówi", greetings("Co tam"))); // On Mówi Hej: Co tam

Wyrażenie funkcyjne

Drugi sposób tworzenia funkcji jest związany z faktem, że funkcje w języku JavaScript mają takie same prawa jak np. liczby czy ciągi znaków. To znaczy, że możliwe jest utworzenie funkcji w „locie” i przypisanie jej do zmiennej:

var greetings = function(name) {
    return concat("Hey: ", name);
};

Tego typu funkcja, nazywana anonimową, jest wyrażeniem, dlatego stosuje się średnik za funkcją.

Nazwane wyrażenie funkcyjne

Funkcje jako wyrażenie można także nazwać:

var greetings = function greet(name) {
    return concat("Hej: ", name);
};

Natychmiastowo wywołane wyrażenie funkcyjne

IIFE (ang. Immediately Invoked Function Expression) jest to funkcja, która jest utworzona i od razu wywoływana:

(function() {
    var name = "Jan"
    return concat("Hej: ", name);
})();

Tego typu funkcje stosowało się często w kodzie, przed ES6 zanim powstały zmienne blokowe (let i const), aby utworzyć odizolowany kawałek kodu. Zmienna zadeklarowana wewnątrz IIFE dostępna jest tylko wewnątrz tej funkcji.

Rekurencja

Jeśli funkcja ma nazwę, można ją wywołać wewnątrz swojego ciała. Taki mechanizm nazywany jest rekurencją. Rekurencja działa podobnie do pętli. Funkcja rekurencyjna powinna się składać z dwóch części:

1. warunku stopu
2. wywołania rekurencyjnego

Warunek stopu musi sprawdzać, czy argument określa, że to koniec pętli (rekurencji) czy nie i przerwać działanie. Wywołanie rekurencyjne powinno wywołać tą samą funkcje, ale ze zmienionym parametrem.

Najprostszym przykładem funkcji rekurencyjnej jest funkcja obliczająca silnię:

function factorial(n) {
    if (n <= 0) {
       return 1; // warunek stopy
    }
    return n * factorial(n - 1); // wywołanie rekurencyjne ze zmniejszającym się parametrem
}
factorial(10); // 3628800

Funkcje wyższego rzędu

Funkcje wyższego rzędu to funkcje, które jako argument przyjmują inne funkcje lub/i zwracają inne funkcje.

function adder(a) {
    return function(b) {
        return a + b;
    };
}
var plus10 = adder(10);
plus10(20); // 30

Dzieje się tutaj kilka ważnych rzeczy. Funkcja adder zwraca funkcję, więc jest wyższego rzędu. Natomiast funkcja, która jest zwracana (dostępna w zmiennej plus10) nazywana jest Domknięciem. Domknięcie (ang. closure) jest to mechanizm, dzięki któremu funkcje mają dostęp do zmiennych zdefiniowanych poza nimi, tzn. w środowisku, w którym zostały zadeklarowane. Tutaj zakres zmiennych wewnątrz funkcji adder się zakończył po zwróceniu funkcji wewnętrznej. Jednak funkcja wewnętrzna nadal ma dostęp do parametru a, właśnie dzięki mechanizmowi domknięcia.

Inny przykład funkcji wyższego rzędu to funkcja, która przyjmuje inną funkcję jako argument.

Funkcja wywołania zwrotnego

Funkcja wywołania zwrotnego jest to funkcja, dzięki której można odebrać wynik działania funkcji, jest to parametr funkcyjny przekazany do innej funkcji. Przykładem funkcji typu callback jest np. funkcja, którą przekazuje się do funkcji setTimeout, która wywołuje daną funkcję po przekroczeniu danych milisekund:

setTimeout(function() {
   alert("Hej");
}, 1000);

Wyrażenie funkcyjne w powyższym przykładnie to funkcja wywołania zwrotnego. Tego typu funkcje można tworzyć samemu.

function greet(fn) {
    setTimeout(function() {
        fn("Hej");
    }, 1000);
}
greet(alert);

W tym przypadku funkcja, która wywołuje fn jest funkcją wywołania zwrotnego dla setTimeout, a alert jest funkcją wywołania zwrotnego dla greet.