Deklaracja funkcji w JavaScript: składnia, hoisting i return

Funkcja to nazwany blok kroków

Za każdym razem, gdy chcesz nadać kawałkowi logiki nazwę i użyć go ponownie, piszesz funkcję. Najstarszy i najprostszy sposób w JavaScript to deklaracja funkcji: słowo kluczowe function, a po nim nazwa.

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Ada"));
console.log(greet("Boris"));

Czytając to po kolei:

• function to słowo kluczowe, które rozpoczyna deklarację.
• greet to nazwa funkcji.
• (name) to lista parametrów, czyli danych wejściowych funkcji.
• Blok w nawiasach klamrowych to ciało funkcji.
• greet("Ada") to wywołanie. JavaScript uruchamia ciało funkcji z name ustawionym na "Ada".

Zdefiniowanie funkcji jej nie uruchamia. Uruchamia ją dopiero wywołanie.

Parametry i argumenty

Parametr to nazwa w definicji funkcji. Argument to wartość przekazywana przy wywołaniu. Na co dzień używa się tych słów zamiennie, ale różnica ma znaczenie przy czytaniu komunikatów o błędach.

function power(base, exponent) {
    return base ** exponent;
}

console.log(power(2, 10));
console.log(power(5, 3));

Tutaj base i exponent to parametry. 2 i 10 to argumenty. JavaScript wiąże je po kolei: pierwszy argument z pierwszym parametrem i tak dalej.

W przeciwieństwie do niektórych języków JavaScript nie narzeka, gdy przekażesz złą liczbę argumentów. Brakujące stają się undefined, nadmiarowe są po cichu ignorowane. To elastyczne, ale czasem bywa pułapką. Wartości domyślne i parametry rest omawiamy w kolejnych artykułach.

return oddaje wartość

console.log wypisuje coś na wyjście. return oddaje wartość temu, kto wywołał funkcję, żeby mógł jej użyć:

function power(base, exponent) {
    return base ** exponent;
}

const result = power(2, 10);
console.log(result + 1);

Bez return funkcja zwraca undefined:

function greet(name) {
    console.log("Cześć, " + name);
}

const value = greet("Ada");
console.log("zwrócono:", value);

return natychmiast kończy też funkcję. Wczesne zwracanie to standardowy sposób na obsłużenie przypadków brzegowych przed główną logiką:

function discount(price, percent) {
    if (percent < 0 || percent > 100) {
        return null;
    }
    return price * (1 - percent / 100);
}

console.log(discount(50, 20));
console.log(discount(50, 150));

Dzięki wczesnym returnom główne ciało funkcji nie zamienia się w piramidę if/else.

Hoisting: możesz wywołać funkcję przed jej definicją

To naprawdę zaskakuje osoby przychodzące z innych języków. Deklaracje funkcji podlegają hoistingowi: JavaScript przenosi je na początek ich zakresu, zanim uruchomi jakikolwiek kod. Oznacza to, że możesz wywołać funkcję w linii powyżej jej deklaracji:

console.log(square(5));

function square(n) {
    return n * n;
}

Ten kod działa bez problemu. Przed wykonaniem silnik przegląda zakres, rejestruje square jako funkcję i dopiero potem wykonuje instrukcje od góry do dołu.

To realna różnica w zachowaniu między deklaracjami funkcji a innymi sposobami tworzenia funkcji (wyrażeniami funkcyjnymi, funkcjami strzałkowymi). Te drugie są hoistowane jak zmienne: nazwa jest znana, ale wartość zostaje przypisana dopiero wtedy, gdy wykona się dana linia. Więcej o tej różnicy za chwilę.

Większość przewodników stylu i tak zaleca definiowanie funkcji przed ich wywołaniem. Hoisting to siatka bezpieczeństwa, a nie styl, na którym warto polegać.

Deklaracje kontra wyrażenia

Deklaracja funkcji stoi samodzielnie jako instrukcja. Wyrażenie funkcyjne pojawia się tam, gdzie oczekiwana jest wartość, najczęściej po prawej stronie przypisania:

// Declaration - hoisted.
function add(a, b) {
    return a + b;
}

// Expression - assigned to a variable.
const multiply = function (a, b) {
    return a * b;
};

console.log(add(2, 3));
console.log(multiply(2, 3));

Oba sposoby dają funkcje, które da się wywołać. Różnice:

• Deklaracje są hoistowane w całości. Wyrażenia podlegają zasadom hoistingu zmiennej, do której są przypisane (const i let są w temporal dead zone, dopóki nie wykona się ich linia).
• Deklaracje muszą mieć nazwę. Wyrażenia mogą być anonimowe, choć nazwanie ich pomaga w czytaniu stack trace.
• Deklaracje nie mogą stać byle gdzie. W trybie ścisłym function foo() {} wewnątrz bloku if zachowuje się różnie w różnych silnikach, więc tam lepiej użyć wyrażenia.

Dla większości funkcji pomocniczych na najwyższym poziomie pliku deklaracja czyta się dobrze. Dla funkcji przekazywanych jako argumenty lub przypisywanych do właściwości zwykle wybiera się wyrażenie (albo funkcję strzałkową).

Nazewnictwo i styl

Nazwa funkcji to obietnica tego, co funkcja robi. Kilka dodatkowych znaków na opisową nazwę zwraca się już przy pierwszym czytaniu kodu przez kogoś innego.

// Hard to follow:
function p(x, y) {
    return x * (1 + y);
}

// Easy to follow:
function priceWithTax(price, taxRate) {
    return price * (1 + taxRate);
}

console.log(priceWithTax(1200, 0.08));

Kilka konwencji, które warto przyjąć:

• Nazwy funkcji powinny być czasownikami: fetchProfile, computeTotal, sendEmail.
• Używaj camelCase, to norma w JavaScript.
• Funkcje zwracające wartość logiczną często zaczynają się od is, has lub can: isValid, hasAccess, canEdit.

Chodzi o to, żeby miejsce wywołania czytało się jak zdanie.

Mały działający przykład

Wszystko razem: parametry, wczesny return, opisowa nazwa:

function formatAddress(street, city, country, zip) {
    if (!street || !city) {
        return null;
    }
    const parts = [street, city];
    if (zip) parts.push(zip);
    parts.push(country || "US");
    return parts.join(", ");
}

console.log(formatAddress("1 Main St", "Boston"));
console.log(formatAddress("1 Main St", "Boston", "US", "02108"));
console.log(formatAddress("Place Vendôme 1", "Paris", "France"));

Jedna deklaracja, klauzula ochronna, czytelny return. Taki kształt ma większość funkcji, które napiszesz.

Dalej: funkcje strzałkowe

Deklaracje to koń pociągowy, ale nowoczesny JavaScript mocno opiera się na krótszej składni, czyli funkcjach strzałkowych, zwłaszcza w callbackach i jednolinijkowcach. Wyglądają inaczej, inaczej zachowują się wobec this i właśnie o nich jest następna strona.