Funkcje w JavaScript

Ten artykuł wyjaśnia funkcje w JavaScript.

YouTube Video

Funkcje w JavaScript

Funkcje w JavaScript to bloki wielokrotnego użytku, które służą do wykonywania określonych zadań. Używanie funkcji poprawia czytelność kodu i ułatwia jego utrzymanie. Funkcje można definiować na kilka sposobów i elastycznie nimi manipulować przy użyciu argumentów i wartości zwracanych.

Sposoby definiowania funkcji

Deklaracja funkcji

Funkcje można definiować za pomocą słowa kluczowego function. Deklaracje funkcji są wynoszone (hoisted) przed wykonaniem kodu, dzięki czemu można je wywołać przed ich zdefiniowaniem.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

W tym przykładzie, ponieważ funkcja greet jest wywoływana przed jej deklaracją, zostanie wyświetlone Hello, Everyone oraz Hello, Alice.

Wyrażenie funkcji

Funkcje można również definiować, przypisując je do zmiennej. W tym przypadku funkcja nie jest wynoszona i może zostać wywołana dopiero po jej zdefiniowaniu.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

W tym przykładzie zostanie wyświetlone Hello, Bob.

Funkcja strzałkowa

Funkcje strzałkowe to sposób definiowania funkcji za pomocą krótszej składni. Są szczególnie przydatne przy użyciu funkcji anonimowych (funkcji bez nazwy). Funkcje strzałkowe mają również inne zachowanie w kontekście słowa kluczowego this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Funkcje można zdefiniować jako greet i greetShort w tym przykładzie. Jeśli funkcja zajmuje jedną linię, można pominąć {} (nawiasy klamrowe), jak w przypadku greetShort.

Elementy funkcji

Argumenty

Wartości przekazywane do funkcji nazywane są argumentami. Określając argumenty podczas definiowania funkcji, można przekazać wartości podczas jej wywoływania.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Domyślne argumenty

Możesz określić domyślną wartość, jeśli żadna wartość nie zostanie przekazana do argumentów.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

W tym przykładzie, jeśli wywołano greet(), zostanie użyta domyślna wartość Guest.

Wartość zwracana

Możesz zwrócić wartość zwracaną z funkcji, używając instrukcji return. Jeśli nie ma instrukcji return, funkcja zwraca undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

W tym przykładzie, ponieważ funkcja greet nie zwraca wartości, wartość zwracana to undefined.

Funkcja anonimowa

Funkcja bez nazwy nazywana jest funkcją anonimową. Są często używane jako wyrażenia funkcyjne lub funkcje strzałkowe.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Natychmiastowo wywoływane wyrażenie funkcyjne (IIFE)

Natychmiastowo wywoływane wyrażenie funkcyjne (IIFE) to funkcja, która jest wykonywana natychmiast po jej zdefiniowaniu. Zazwyczaj jest używane do kontrolowania zakresu.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Jest wykonywane natychmiast po zadeklarowaniu.

Funkcja zwrotna

Przekazanie funkcji jako argumentu do innej funkcji w celu późniejszego wykonania nazywa się funkcją zwrotną. Jest często używana w przetwarzaniu asynchronicznym i obsłudze zdarzeń.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

W tym przykładzie funkcja, która wypisuje wartość na konsolę, jest przekazywana jako funkcja zwrotna.

Funkcja rekurencyjna

Wywołanie funkcji przez samą siebie nazywamy rekurencją, a funkcję wykonującą powtarzalne przetwarzanie przy użyciu rekurencji - funkcją rekurencyjną. Na przykład funkcję obliczającą silnię można zaimplementować przy użyciu rekurencji, jak pokazano poniżej.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

W tym przykładzie zostanie wyświetlona silnia z 5, która wynosi 120.

Słowo kluczowe this

this użyte wewnątrz funkcji wskazuje, do którego obiektu odnosi się funkcja. W zwykłej funkcji odnosi się do obiektu wywołującego, ale w funkcjach strzałkowych zachowuje this z zakresu, w którym została zdefiniowana.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

greet zmiennej obj jest zadeklarowane przy użyciu słowa kluczowego function. Dlatego słowo kluczowe this odnosi się do obiektu zmiennej obj. Z drugiej strony, greet zmiennej obj2 jest zadeklarowane przy użyciu funkcji strzałkowej. Dlatego słowo kluczowe this odnosi się do obiektu w zewnętrznym zakresie i jest undefined w tym przykładzie.

Zakres funkcji i domknięcia

Zmienne zdefiniowane wewnątrz funkcji nie mogą być dostępne z zewnątrz funkcji. To nazywa się zakresem funkcji. Istnieje również cecha zwana domknięciem, która zachowuje zakres w momencie definiowania funkcji.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

W tym przykładzie funkcja inner może uzyskać dostęp do zmiennej outerVar, ponieważ zachowuje zakres, w którym została zdefiniowana.

Podsumowanie

• Istnieją różne sposoby definiowania funkcji, w tym deklaracje funkcji, wyrażenia funkcyjne i funkcje strzałkowe.
• Funkcje mogą przyjmować argumenty i zwracać wartości.
• Istnieją specjalne zastosowania, takie jak funkcje zwrotne i funkcje rekurencyjne.
• Należy zachować ostrożność przy obsłudze this, ponieważ funkcje strzałkowe i zwykłe funkcje zachowują się inaczej.
• Domknięcia mogą być używane do uzyskiwania dostępu do wewnętrznych zmiennych spoza zakresu.

Funkcje są jednym z ważnych pojęć w JavaScript, wykorzystując jego elastyczną strukturę.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video