JavaScript/Funkcje

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania

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 jest mówi co dan 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[edytuj]

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ę oraz nawiasy oraz 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. Czyli będzie to wyglądać taka 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 funkcje.

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

Wywołując funkcje można przypisać wartość zwracaną przez return to zmiennej.

Funkcje zagnieżdżone[edytuj]

Jedna funkcja może wywoływać drugą funkcje, także wartość zwracana przez funkcje 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[edytuj]

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[edytuj]

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

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

Natychmiastowo wywołane wyrażenie funkcyjne[edytuj]

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łem kodu. Zmienna zadeklarowana wewnątrz IIFE dostępna jest tylko wewnątrz tej funkcji.


Rekurencja[edytuj]

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łnie rekurencyjne ze zmniejszającym się parametrem
}
factorial(10); // 3628800

Funkcje wyższego rzędu[edytuj]

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 funkcje 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óry 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 mechanizmu do domknięcia.

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

Funkcja wywołania zwrotnego[edytuj]

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

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łje fn jest funkcją wywołania zwrotnego dla setTimeout, a alert jest fukcja wywołnia zwrotnego dla greet.