Funkcje

Funkcja to modułowy blok instrukcji wielokrotnego użytku używany do wykonywania zestawu powiązanych zadań, takich jak obliczanie i zwracanie wartości na podstawie argumentów przekazanych funkcji. Tak jak wszystkie wartości inne niż podstawowe, funkcje są obiektami. Są to niepowtarzalne obiekty w tym sensie, że można je wywoływać w celu wykonania kodu, przekazywać dane w postaci argumentów i return wartość.

Funkcje są nazywane obiektami „pierwszej klasy”, co oznacza, że pomimo ich niepowtarzalnego zachowania można ich używać we wszystkich kontekstach, co każdy inny obiekt JavaScript. Na przykład funkcję można przypisać do zmiennej, przekazać jako argument do innych funkcji, a następnie zwrócić przez inne funkcje.

function myFunction() {
   console.log( "This is my function." );
};

Funkcja zdefiniowana jako właściwość obiektu jest zwykle nazywana „metodą”. Tak jak w przypadku zmiennych zadeklarowanych za pomocą var, deklaracje funkcji złożone poza funkcją otaczającą są dodawane do obiektu globalnego jako metody.

Deklaracje funkcji

Deklaracja funkcji (nazywana również „instrukcją funkcji” lub „definicją funkcji”) tworzy funkcję nazwaną, którą można wywołać w innym miejscu w jej zakresie. Deklaracje funkcji składają się ze słowa kluczowego function, po którym następuje identyfikator, listę parametrów rozdzielonych przecinkami ujętych w nawiasy oraz instrukcję bloku nazywaną „treścią funkcji”. Często napotykasz deklaracje funkcji, które nie kończą się średnikiem. Ponieważ deklaracja funkcji jest instrukcją, końcowe średniki można wywnioskować z ASI.

function myFunction() {
   console.log( "This is my function." );
};

myFunction();
> "This is my function."

W zależności od wczesnych decyzji projektowych JavaScript deklaracje funkcji podlegają tym samym starszym mechanizmom podnoszenia co zmienne zadeklarowane za pomocą var. Oznacza to, że deklaracja funkcji jest podnoszona na początek zakresu i może zostać wywołana przed deklaracją niezależnie od tego, czy dany zakres podlega trybie ścisłemu:

"use strict";
{
    myFunction();
    function myFunction() {
        console.log( "This is my function." );
    };
}
> "This is my function."

Poza trybem ścisłym deklaracje funkcji korzystają ze starszego sposobu określania zakresu JavaScriptu, co oznacza, że jest ona ograniczona do najbliższej funkcji zamykającej:

function myFunction() {
    function myNestedFunction() {
        console.log( "This is my nested function." );
    }
    myNestedFunction();
};

myFunction();
> "This is my nested function."

myNestedFunction();
>Uncaught ReferenceError: myNestedFunction is not defined

W trybie ścisłym deklaracje funkcji są ograniczone do najbliższego bloku zamykającego, tak jak w przypadku zmiennych zadeklarowanych za pomocą let lub const:

"use strict";
{
    function myFunction() {
        console.log( "This is my function." );
    };
}

myFunction();
> Uncaught ReferenceError: myFunction is not defined

Wywoływanie funkcji

Podobnie jak w przypadku zmiennych, identyfikator używany podczas deklarowania funkcji działa jako nazwa symboliczna wartości. Odwoływanie się do funkcji tylko za pomocą identyfikatora zwraca tylko obiekt funkcji i nie wykonuje zawartej w niej funkcji:

function myFunction() {
   console.log( "This is my function." );
};

myFunction;
> myFunction() {
   console.log( "This is my function." );
}

Aby wykonać kod w treści funkcji, wywołaj (lub wywołaj) ją, wpisując jej nazwę z dopasowaną parą nawiasów:

function myFunction() {
    console.log( "My function has been executed." );
}

myFunction();
> "My function has been executed."

Parametry w definicji funkcji działają jako zmienne zastępcze dla wartości, które mogą być przekazywane do treści funkcji po jej wywołaniu. Wartości w nawiasach, gdy funkcja jest wywoływana, to „argumenty” (chociaż w pewnej dokumentacji można zobaczyć „argumenty” używane do opisania zarówno argumentów, jak i parametrów):

function myFunction( myParameter ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction( "this string" );
> "The value is: this string."

Jeśli zostanie pominięty oczekiwany argument, wynikowy parametr będzie zawierał wartość undefined, ponieważ jest on zadeklarowany w treści funkcji, ale nie zainicjowany z użyciem wartości:

function myFunction( myParameter ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction();
> "The value is: undefined."

Możesz ustawić domyślne wartości parametrów, inicjując je w taki sam sposób, w jaki inicjujesz zmienną: operator przypisania (=), a następnie wartość. Jeśli później określisz argument dla tej funkcji, nowa wartość zastąpi wartość domyślną:

function myFunction( myParameter = "omitted" ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction( "this string" );
> "The value is: this string."

myFunction();
> "The value is: omitted."

Treść funkcji innej niż strzałka ma też dostęp do obiektu arguments z zerem indeksowania, przypominającego tablica, który zawiera wartości przekazywane jako argumenty niezależnie od tego, czy definicja funkcji określa parametry:

function myFunction() {
   console.log( arguments );
};

myFunction( 3, true, "My string" );
> Arguments { 0: 3, 1: true, 2: "My string", … }

Funkcje variadyczne

Obiekt arguments umożliwia tworzenie podstawowych funkcji wariantów, które mogą przyjmować zmienną liczbę argumentów:

function myFunction() {
    let result = "";
    for (let i = 0; i < arguments.length; i++) {
        result += arguments[i] + " - ";
    }
    console.log( result );
};

myFunction( "My first string", "My second string", "my third string" );\
> "My first string - My second string - my third string - "

Jednak takie podejście do funkcji variadycznych rzadko jest stosowane we współczesnym tworzeniu kodu JavaScript. Częściej stosuje się bardziej nowoczesną i czytelną składnię parametrów spoczynkowych, która tworzy nazwany parametr zainicjowany jako tablica zawierającą dowolne argumenty wykraczające poza te podane:

function myFunction( mySeparator, ...myStrings ) {
  console.log( myStrings.join( mySeparator ) );
};

myFunction( " - ", "My first string", "My second string", "my third string" );
> "My first string - My second string - my third string"

W przeciwieństwie do powiązania parameter składnia parametrów reszty działa zgodnie z oczekiwaniami z parametrami funkcji strzałki:

function myOuterFunction() {
    let myInnerArrowFunction = ( ...myParams ) => {
        console.log( myParams[ 0 ] );
    }
    myInnerArrowFunction( true );
};

myOuterFunction( false );
> true

let myArrowFunction = ( ...myParams ) => {
    console.log( myParams[ 0 ] );
};

myArrowFunction( true );
> true`
``