funkcje JavaScript

Funkcja – grupa instrukcji w JS, blok kodu który możemy wielokrotnie wykorzystywać. Funkcje w JavaScript definiujemy poprzez (deklaracja funkcji, function declaration).

Deklaracja funkcji poprzez:

• słowo kluczowe function
• podanie nazwy funkcji (nazwa powinna wskazywać co robi funkcja)
• nawiasy okrągłe do zamieszczenia ewentualnych parametrów
• nawiasy klamrowe do zamieszczenia instrukcji tzw. body function

function myFunction() {

//code;

}

w nawiasach {} body funkcji, lista operacji, instrukcji – statements.

nazwa funkcji – określana dowolnie z zachowaniem zastrzeżeń takich samych jak przy tworzeniu nazw zmiennych.

wywołanie (stosowanie, uruchomienie) funkcji – podanie nazwy funkcji wraz z ewentualnymi parametrami (argumentami) w nawiasach, (calling, invoking a function).

 

tworzenie wartości przez funkcję – funkcja zwraca wartość

funkcji można używać w większych wyrażeniach – console.log(Math.min(36, 33) + 300); -> 333

 

parametry – podane do zmiennych zadeklarowanych w ciele funkcji,

argument – wartości przekazywane funkcji podczas jej wywołania

 

Function użyte jako wyrażenie – tworzy wartość funkcyjną (function expression, expression kiedy zwraca wartość):

var Variable = function(r) {

console.log(r * r);

};

Function użyte jako instrukcja – deklaracja zmiennej, nadanie jej funkcji jako wartości:

function r (u, d) {

return u + d + a;

}

–

 

Poprawne definiowanie funkcji w najbardziej zewnętrznym bloku funkcji lub programu.

Nie definiuje się funkcji w bloku warunkowym lub pętli!

 

parametry funkcji:

function myFunction(param1, param2) {
  document.write('<' + param2 + '>' + param1 + '</' + param2 + '>');
}

myFunction('hellow Sweetheart!', 'h1'); 

parametr – zmienna przyjmująca wartość podaną podczas wywoływania funkcji.

return

wartość zwrotna funkcji, natychmiastowe wyjście z funkcji i przekazanie zwróconej wartości do kodu, brak wyrażenia po return – funkcja zwraca undefined

function myFunction(param1, param2){
  var total = param1 * param2;
  return total;
}        

var myTotal = myFunction(56, 75);
document.write('Total sumary is ' + myTotal);

 

bezpośrednie użycie funkcji w innej instrukcji:

function myFunction(param1, param2){
  var total = param1 * param2;
  return total;
}        

document.write('Total sumary is ' + myFunction(57, 75));

return jako ostatnia instrukcja,kończy funkcję, kod po return nie jest wykonywany.

 

Funkcje zwracają tylko jedną wartość.

funkcje zwrotne, callback

funkcja addEventListener kojarzy funkcje zwrotną z ze zdarzeniem (np click).Przeglądarka rejestuje skojarzenie, zapamiętuje referencje do funkcji zwrotnej i wywołuje je gdy dane zdarzenie nastapi.

W chwili wywoływania funkcji zwrotnej zmienne i parametry funkcji zawierajacej w sobie addEventListener już nie istnieją – zostały usunięte z pamięci po zakończeniu wykonywania kodu tej funkcji. Funkcja zwrotna 'przechywtuje” wartosci zmiennych i parametrów tej funkcji i wykorzystuje je gdy jest wywoływana.

Wartości w zmiennych w funkcji, wartości w zmiennych po za funkcją

zmienna lokalna – w funkcji, nie jest widoczna w kodzie po za funkcją

zmienna globalna – poza funkcją, ale funkcja ma do niej dostęp

var info = "I'm out function";
function notice(info){
  document.write(info);
}
notice("I'm in function" + '
');
document.write(info);

var info = "I'm out function";
function notice(){
  var info = "I'm in function"; 
  document.write(info + '
');
}
notice();
document.write(info);


var info = "I'm out function";
function notice(){
  document.write(info + '
');
}
notice();

Zmiana wartości zmiennej globalnej poprzez funkcję:

var info = "I'm out function";
function notice(){
  info = "I'm in function";
}
notice();
document.write(info);

Funkcje mają określony zasięg. Zmienne w funkcji nie są widoczne w kodzie po za funkcją.

Stos wywołań

miejsce przechowywania kontekstu (kontekst w którym nastąpiło wywołanie funkcji). Przy każdym wywołaniu funkcji na górę stosu jest umieszczany aktualny kontekst.

Po zakończeniu działania funkcji – zdjęcie wcześniejszego kontekstu z góry stosu i dalsze wykonanie programu.

 

Za mało pamięci dla dużego stosu – komunikat – brak miejsca dla stosu, za dużo rekurencji.

Argumenty

funkcja może przyjąć argumenty opcjonalne (więcej niż jest zadeklarowanych w funkcji). Nadmiarowe argumenty są pomijane, brakujące zastępowane wartością undefined. Funkcja console.log() wyświetla wszystkie przesłane jej wartości.

Funkcja rekurencyjna

wywołanie funkcji przez samą siebie bez przepełnienia stosu.

przydatna przy przetwarzaniu wielu gałęzi z których każda może mieć wiele odgałęzień.

Funkcja 'czysta’

nie wczytuje zmiennych globalnych, dla tych samych argumentów zwraca zawsze tą samą wartość (i nic więcej dodatkowego nie robi).

Czas wywołania

wywołanie prostej pętli jest znacznie szybsze niż wywołanie funkcji wiele razy.

funkcja anonimowa – bez nazwy, zapisana jako literał funkcyjny. Czesto uzywana jako argument innych funkcji, tzw callback (funkcje zwrotne) – funkcja która będzie wywołana w przyszłości w określonych warunkach.

Funkcja addEventListener

funkcja definiuje odbiornik (ang. listener) dla określonego zdarzenia i obiektu. Można dodać wiele funkcji listener.

Funkcja obsługi błędu – onerror

przypisanie funkcji do właściwości onerror obiektu window.

    function errorMessage(message, url, line) {
      alert("wystąpił błąd JS. \n" + "komunikat błędu: " + message + '\n' + "url: " + url + '\n' + "nr wiersza: " + line);
      return true;
    }
    window.onerror=errorMessage;

przy użyciu return: false; – otrzymamy również standardowy komunikat błędu.

 

Użycie try/catch

Różne sposoby zapisu funkcji

Deklaracja funkcji (function declaration)

• klasyczny sposób definiowania funkcji
• funkcja jest hoistowana, czyli można ją wywołać przed jej deklaracją w kodzie
• ma przypisane swoje własne słowo kluczowe this (zachowanie zależy od kontekstu, w którym jest wywoływana)
• stosowana w obiektach lub klasach

console.log(hello('Aga')); // Działa, mimo że funkcja jest zadeklarowana później
function hello(name) {
    return 'hello ' + name;
}

Funkcja strzałkowa (arrow function)

• nowszy sposób tworzenia funkcji, wprowadzonym w ES6
• nie jest hoistowana, więc trzeba ją zdefiniować przed użyciem
• nie ma swojego własnego this. Zamiast tego dziedziczy this z otaczającego zakresu, co czyni ją bardziej przydatną w pewnych kontekstach (np. w programowaniu funkcyjnym czy przy użyciu metod takich jak .map, .filter)
• stosowana w programowaniu funkcyjnym i callbackach

console.log(hello('Aga')); // Błąd: Cannot access 'hello' before initialization
const hello = (name) => {
    return 'hello ' + name;
}

odwołanie do funkcji

• • z () – odwołanie do wyniku funkcji

• bez () – odwołanie do samej funkcji