Funkcja jest jednym z podstawowych elementów składowych każdego języka programowania. Funkcja to blok kodu zaprojektowany do wykonywania określonego zadania lub wykonywania określonych obliczeń. Zaletą funkcji jest to, że można ją napisać raz i wywołać wiele razy w dowolnym momencie bez powielania tego samego kodu. Może pobierać dane wejściowe i generować dane wyjściowe. Korzystając z funkcji, można użyć różnych argumentów, aby uzyskać różne wyniki. Wszystkie języki programowania umożliwiają pisanie i używanie własnych funkcji.

Funkcje w JavaScript dodatkowo mogą być zagnieżdżone (funkcja może mieć jedną lub więcej funkcji wewnętrznych).

Predefiniowane funkcje w JavaScript

JavaScript dostarcza wiele predefiniowanych funkcji, które pozwalają osiągnąć określony wynik. Pewnie już widziałeś niektóre często używane funkcje w JavaScript, takie jak alert(), prompt(), confirm() lub parseInt().

parseInt(5.34); //5

Tworzenie funkcji w JavaScript

Istnieje kilka sposobów definiowania funkcji w JavaScript: deklaracja funkcji, wyrażenie funkcji i funkcja strzałkowa. Zacznijmy od deklaracji funkcji. Aby zdefiniować funkcję w JavaScript za pomocą deklaracji funkcji, użyj słowa kluczowego function, następnie nazwy, nawiasów okrągłych i na końcu kodu funkcji, zwanego także ciałem funkcji. Ciało funkcji jest otoczone przez nawiasy klamrowe.

function print() {
    console.log('Hello World');
}

Dodatkowo nazwa funkcji powinna być unikalna. Jeśli utworzymy dwie funkcje w JavaScript o tych samych nazwach, druga nadpisze pierwszą.

function print() {
    console.log('abc');
}
function print() {
    console.log('xyz');
}
console.log(print()); // 'xyz'

Korzystanie z funkcji w JavaScript

Samo zdefiniowanie funkcji nie wywołuje jej. Definiowanie po prostu tworzy funkcję o określonej nazwie, określa, jakich argumentów oczekuje oraz co zrobi, gdy funkcja zostanie wywołana. Aby wykonać funkcję w JavaScript, musisz wywołać ją z nawiasami okrągłymi.

function get() {
    return 100;
}
get(); // 100

Odwołanie się do funkcji bez nawiasów okrągłych zwraca tylko jej definicję.

function get() {
    return 100;
}
console.log(get); // ƒ () {return 100;}
get(); // 100

Pamiętaj, że funkcja, którą chcesz wywołać, musi znajdować się w zakresie, w jakim zostanie wywołana, w przeciwnym razie nie będzie dostępna.

Parametry i argumenty

Parametry

Funkcja w JavaScript może mieć zero lub więcej parametrów. Wiele parametrów jest oddzielonych przecinkami. Parametry są zdeklarowane w okrągłych nawiasach w definicji funkcji.

function welcome(firstName, lastName) {
    return 'Hello ' + firstName + ' ' + lastName;
}
welcome('John', 'Smith'); //"Hello John Smith"

Możesz przekazać mniej lub więcej argumentów niż zostało zdefiniowanych. Jeśli przekażesz mniej argumentów, reszta parametrów zwróci undefined.

function welcome(firstName, lastName) {
    return 'Hello ' + firstName + ' ' + lastName;
}
welcome('John'); //"Hello John undefined"

Jeśli przekażesz więcej argumentów, dodatkowe argumenty zostaną zignorowane.

function welcome(firstName, lastName) {
    return 'Hello ' + firstName + ' ' + lastName;
}
welcome('John', 'Smith', 40); //"Hello John Smith"

Możesz przekazać dowolną wartość, nie tylko wartości prymitywne (n.p. array, object, function).

function getSize(arr) {
    return arr.length;
}
getSize([5,9,4]); // 3

Niektóre osoby mają problemy z odróżnieniem parametrów od argumentów. Parametry są używane podczas definiowania funkcji, a argumentami są wartościami otrzymanymi przez funkcję z każdego parametru, gdy funkcja jest wywoływana.

Wartości domyślne

Jeśli chcesz, aby argumenty miały ustawione wartości domyślne, w przypadku gdy nie zostały podana żadna wartość, można to osiągnąć na dwa sposoby.

Nowym sposobem jest użycie parametrów domyślnych z ES2015 (ES6).

function multiple(x, y = 1) {
    return x * y;
}
console.log(multiple(5)); // 5

Stary sposób jest alternatywnym sposobem ustawiania wartości domyślnych i jest bardzo przydatny, gdy chcemy wspierać stare przeglądarki, które nie obsługują parametrów domyślnych z ES6.

function multiple(x, y) {
    y = y || 1;
    return x * y;
}
console.log(multiple(5)); // 5

Obiekt arguments

Wewnątrz każdej funkcji (oprócz funkcji strzałkowej), JavaScript zapewnia tablicowy obiekt zwany arguments. Obiekt arguments przechowuje wartości każdego argumentu przekazanego do funkcji.

function foo() {
    console.log(arguments); // [1,3,5]
}
foo(1,3, 5);

Możesz uzyskać dostęp do jego wartości za pomocą indeksu tak jak w przypadku tablicy, jednak obiekt ten nie obsługuje metod tablicowych, takich jak join(), push(), forEach() itp.

function foo() {
    arguments.forEach(function (el) {
        console.log(el);
    });
}
foo(1,3, 5);

Powyższy kod zwróci błąd podobny do tego poniżej:

Uncaught TypeError: arguments.forEach is not a function

Chociaż obiekt arguments nie ma metod, można po nim iterować za pomocą pętli oraz ma właściwość length.

function foo() {
    for(var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
foo(1,3, 5);

wynikiem powyższego kodu będzie:

1
3
5

Wewnątrz funkcji, obiekt arguments zachowuje się jak zmienna lokalna (nie jest dostępny poza funkcją).

instrukcja return

Każda funkcja może zwrócić jedną wartość za pomocą słowa kluczowego return. Jeśli funkcja nie ma instrukcji return, zwraca wartość undefined.

function getDiscount() {
}
console.log(getDiscount()); // undefined 

Instrukcja return jest opcjonalna, a gdy JavaScript dotrze do instrukcji return, funkcja zakończy swoje działanie. Przeważnie instrukcja return jest ostatnią instrukcją w funkcji. Wartość zwracana przez funkcję jest zwracana do obiektu wywołującego tą funkcję.

function getDiscount() {
    return 10;
}
console.log(getDiscount()); // 10

Istnieje możliwość użycia pustej instrukcji return, która jest równoznaczna z zwróceniem wartości undefined, co powoduje natychmiastowe wyjście z funkcji.

function getDiscount() {
     return;
     console.log('calculate discount'); // won't be executed
 }

Pierwsza instrukcja return natychmiast przerywa wykonywanie funkcji, dlatego console.log w ogóle nie zostanie wykonany.

Nie jesteś ograniczony do zwracania tylko typów pierwotnych. Możesz zwrócić object, array, function i wiele innych.

W jednej funkcji może występować wiele wystąpień instrukcji return.

function getDiscount(count) {
    if (count > 50) {
        return 20;
    }
    if (count > 30) {
        return 10;
    }
    if (count > 20) {
        return 5;
    }
}

Ponadto pamiętaj, aby nigdy nie dodawać nowego wiersza między instrukcją return a wartością zwracaną. Jeśli po instrukcji return nie ma średnika, JavaScript doda go automatycznie.

function getDiscount() {
	return 
	10;
}
console.log(getDiscount()); // undefined

Wyrażenie funkcji

Drugim sposobem utworzenia funkcji jest użycie wyrażenia funkcji. JavaScript pozwala przypisać funkcję do zmiennej, a następnie użyć tej zmiennej jako funkcji.

var divide = function(a, b) {
     return a / b;
 }

Domyślnie funkcja stworzona za pomocą wyrażenia funkcji jest funkcją anonimową. Aczkolwiek może mieć nazwę, która pozwoli na to, aby funkcja mogła odnosić się sama do siebie, a także ułatwi identyfikację funkcji podczas debugowania.

var divide = function divide(a, b) {
     return a / b;
 }

Funkcja strzałkowa

Funkcja strzałkowa ma krótszą składnię niż zwykłe wyrażenie funkcji oraz nie posiada własnego this i obiektu arguments.

var devide = (a,b) => a / b;

Zakres funkcji w JavaScript

Za każdym razem, gdy tworzysz nową funkcję w JavaScript, wszystkie zmienne zadeklarowane w tej funkcji stają się lokalne dla tej funkcji i należą do zakresu tej funkcji. Zmienne zdefiniowane w funkcji nie są dostępne z zewnątrz.

function getUserId() {
    var userId = 2;
    return userId;
}
console.log(getUserId()); // 2
console.log(userId); // ReferenceError: userId is not defined

Dzięki temu możesz używać tej samej nazwy zmiennych w różnych funkcjach.

function getUserId() {
    var userId = 2;
    return userId;
}
function getId() {
    var userId = 5;
    return userId;
}
console.log(getUserId()); // 2
console.log(getId()); // 5

Dodatkowo funkcja może uzyskać dostęp do wszystkich zmiennych zewnętrznych i funkcji zdefiniowanych w zakresie, w którym jest zdefiniowana.

var userId = 2;
function getUserId() {
    return userId;
}
console.log(getUserId()); // 2

Funkcja zdefiniowana w zakresie globalnym może uzyskać dostęp do wszystkich zmiennych zdefiniowanych w zakresie globalnym.

Zmienna zewnętrzna jest używana tylko wtedy, gdy nie ma zmiennej lokalnej. Jeśli w funkcji zadeklarowana jest zmienna o tej samej nazwie, wówczas zaciemnia zewnętrzną.

var userId = 2;
function getUserId() {
    var userId = 5;
    return userId;
}
console.log(getUserId()); // 5

Funkcja zdefiniowana w innej funkcji ma dostęp do wszystkich zmiennych zdefiniowanych w funkcji nadrzędnej i wszelkich innych zmiennych, do których ma dostęp funkcja nadrzędna (np. zakres globalny).

var userId = 2;
function login() {
    var userName = 'Kate';
    function getUserId() {
        return {id: userId, name: userName};
    }
    console.log(getUserId()); // {id: 2, name: "Kate"}
}
login();

Zmienne lokalne są tworzone podczas uruchamiania funkcji i usuwane po zakończeniu funkcji.

Podsumowanie

  • JavaScript dostarcza wiele predefiniowanych funkcji – alert(), confirm(), prompt()
  • istnieje kilka sposobów definiowania funkcji w JavaScript:
    • deklaracja funkcji
    • wyrażenie funkcji – przypisanie funkcji do zmiennej
    • funkcja strzałkowa – nie posiada własnego this i obiektu arguments
  • aby wykonać funkcję w JavaScript, musisz wywołać ją z nawiasami okrągłymi
  • parametry i argumenty
    • funkcja może mieć zero lub więcej parametrów, które definiujemy w nawiasach okrągłych
    • parametry bez wartości przyjmują wartość undefined
    • jeśli przekażemy więcej argumentów, dodatkowe argumenty są ignorowane
    • argumenty mogą mieć wartości domyślne
    • obiekt arguments – zawiera wartości każdego argumentu, nie obsługuje metod tablicowych, można go iterować za pomocą pętli i posiada właściwość length
  • return
    • jeśli funkcja w JavaScript nie ma instrukcji return, zwraca wartość undefined
    • jedna funkcja może zawierać wiele wystąpień instrukcji return
    • można użyć pustej instrukcji return do natychmiastowego zakończenia działania funkcji
  • zakres funkcji w JavaScript
    • zmienne zadeklarowane wewnątrz funkcji stają się lokalne dla tej funkcji i nie są dostępne z zewnątrz
    • funkcja może uzyskać dostęp do zmiennych i funkcji zewnętrznych


0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *