JavaScript cz.2 - Funkcje

Funkcje

Funkcja JavaScript to blok kodu zaprojektowany do wykonywania określonego zadania.
Aby funkcja została wykonana trzeba ją wywołać.
Funkcji warto używać, gdy kod wykonujemy wiele razy albo dla różnych argumentów.
Z funkcji można korzystać tak samo, jak ze zmiennych, we wszystkich typach formuł, przypisań i obliczeń.

function kgNaGramy(kg) {
  return kg * 1000 + " g";
}
document.write(kgNaGramy(13));

W powyższym przykładzie stworzono funkcję kgNaGramy, która oblicza i zwraca wartość tyciąckrotnie wyższą niż do niej przesłaliśmy. Wywołanie funkcji: kgNaGramy(13), gdzie 13 to liczba kilogramów.

Składnia:

Słowo kluczowe: function, nazwa funkcji i nawiasy (), w których mogą występować oddzielone przecinkami parametry. Następnie występuje umieszczony w nawiasach klamrowych { ... } kod do wykonania

function nazwaFunkcji(opcjonalneParametry, ...) { kod do wykonania }

Argumenty funkcji to wartości otrzymane przez funkcję po jej wywołaniu.
Wewnątrz funkcji argumenty (parametry) zachowują się jak zmienne lokalne. Dostęp do zmiennych lokalnych można uzyskać tylko z poziomu funkcji. Są one tworzone podczas jej uruchamiania i usuwane po zakończeniu.

Parametry funkcji to nazwy wymienione w definicji funkcji. Argumenty funkcji to rzeczywiste wartości przekazywane do (i odbierane) przez funkcję.

Definicje funkcji JavaScript nie określają typów danych dla parametrów.
Funkcje JavaScript nie sprawdzają typu ani liczby przekazanych argumentów.
Jeśli funkcja zostanie wywołana z brakującymi argumentami (mniej niż deklarowano), brakujące wartości zostaną ustawione na: undefined (niezdefiniowane)

Wywołanie funkcji, zwracanie wartości

Do wykonania kodu w funkcji potrzebne jest jej wywołanie (call). Można to zrobić:
- z kodu JavaScipt
- automatycznie (samowywołanie)
- gdy nastąpi jakieś zdarzenie

Instrukcja return kończy wykonywanie funkcji i zwraca obliczoną wartość z powrotem do/w miejsce instrukcji, która ją wywołała.

function dodawanie(a, b) {
  return a + b;
};
var x = dodawanie(10, -5);
alert(x);

Aby wywołać funkcję używamy operatora (). Sama tylko nazwa funkcji określa i zwraca obiekt. Nazwa z () odnosi się do wyniku funkcji.
Na przykład:

function centymetryNaCale(cm) {
  return cm / 2.54;
}
document.write(centymetryNaCale(5));
document.write("<br>");
document.write(centymetryNaCale);

Funkcje cz.II

Definicje funkcji

Deklaracja funkcji

Funkcje najczęściej definiujemy przez deklaracje. Nie są one wtedy wykonywane natychmiast, tylko przy wywołaniu funkcji.

function nazwaFunkcji(opcjonalneParametry, ...) { kod do wykonania }

Średniki służą do oddzielania wykonywalnych instrukcji JavaScript. Ponieważ deklaracja funkcji nie jest instrukcją wykonywalną, często nie kończy się jej średnikiem.

Wyrażenia funkcyjne

Funkcję JavaScript można również zdefiniować za pomocą wyrażenia. Wyrażenie funkcyjne może być przechowywane w zmiennej. Po zapisaniu wyrażenia funkcji w zmiennej, zmiennej można użyć jako funkcji:

var iloczyn= function (a, b) {return a * b};
alert(iloczyn);        //zwróci: function (a, b) {return a * b}
alert(iloczyn(2, 3));  //zwróci: 6

Powyższa funkcja kończy się średnikiem, ponieważ jest częścią instrukcji wykonywalnej. Jest funkcją anonimową (bez nazwy). Funkcje przechowywane w zmiennych nie wymagają nazw. Są zawsze wywoływane (wywoływane) przy użyciu nazwy zmiennej.

Konstruktor funkcji: Function()

Funkcje najczęściej definiujemy za pomocą słowa kluczowego 'function'. Istnieje także wbudowany konstruktor funkcji o nazwie Function().

var iloczyn = new Function("a", "b", "return a * b");
alert(iloczyn(4, 3));

Podnoszenie funkcji

Deklaracje funkcji podnoszone są w JS na szczyt bieżącego zakresu. Z tego powodu funkcje JavaScript mogą być wywoływane przed zadeklarowaniem. Funkcje zdefiniowane za pomocą wyrażenia nie są podnoszone.

alert(iloczyn(4, 3)); //zwróci 12
function iloczyn(a, b) {return a * b};

Samowywołanie funkcji (self-invoking) - Anonimowa funkcja samo-wywołującą się.

Nie można samowywołać deklaracji funkcji. Można automatycznie wywołać wyrażenie funkcyjne jeśli po wyrażeniu dodamy () a samą funkcję też ujmiemy w nawiasy, wskazując, że jest to wyrażenie funkcyjne:

(function () {
  ...
})();

Jeszcze słów kilka...

Funkcje można używać w wyrażeniach i używać jako wartości.
Chociaż JS opisuje typ funkcji jako 'function' to funkcje są także obiektami - z właściwościami i metodami.
Funkcja zdefiniowana jako właściwość obiektu nazywana jest metodą obiektu.
Funkcja zaprojektowana do tworzenia nowych obiektów nazywa się konstruktorem obiektów.

Funkcja strzałkowa

Funkcje strzałek umożliwiają krótką składnię do pisania wyrażeń funkcyjnych. Nie potrzebujemy słowa function. Nie potrzebujemy słowa return i nawiasów klamrowych gdy funkcja jest pojedynczą instrukcją.

Funkcje strzałek nie są podnoszone, nie mają własnych 'this'. Używanie const jest bezpieczniejsze niż używanie var, ponieważ wyrażenie funkcji ma zawsze stałą wartość:

const x = (x, y) => x * y;   //czyli const x = (x, y) => { return x * y };
alert( x(5, 5));

Brakujące argumenty - domyślne argumenty

function iloczyn(x, y) {
  if (y === undefined) {
    y = 0;
  }
  return (x*y);
}

function iloczyn (x, y=0) {
  return x*y;
}

Obiekt Arguments

arguments[0];
arguments[1];
arguments[2];
arguments[1] = 'nowa wartosc';

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  var i;
  var max = -Infinity;
  for (i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  var i;
  var sum = 0;
  for (i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

Przekazywanie argumentów i obiektów

Argumenty są przekazywane przez wartość. Parametry w wywołaniu funkcji są argumentami funkcji. Argumenty JavaScript są przekazywane przez wartość (value): funkcja poznaje tylko wartości, a nie lokalizacje argumentu. Jeśli funkcja zmienia wartość argumentu, nie zmienia oryginalnej wartości parametru. Zmiany argumentów nie są widoczne (odzwierciedlone) poza funkcją.

Obiekty są przekazywane przez odniesienie (reference). W JavaScript odwołania do obiektów są wartościami. Z tego powodu obiekty będą zachowywać się tak, jakby były przekazywane przez odniesienie: Jeśli funkcja zmienia właściwość obiektu, zmienia oryginalną wartość. Zmiany właściwości obiektu są widoczne (odbite) poza funkcją.

Funkcje cz. III

Wyłowywanie funkcji

Funkcje call() i apply()

Zamknięcie JS (closure)

Następny rozdział: łańcuchy (String) lub wybierz z menu po prawej stronie -->