Parametry funkcji

4.1 Parametry funkcji

Parametry funkcji w JavaScript pozwalają przekazywać wartości do funkcji w celu ich przetworzenia. To sprawia, że funkcje są bardziej elastyczne i adaptacyjne. W tym temacie omówimy podstawowe aspekty pracy z parametrami funkcji w JavaScript, bez uwzględniania parametrów domyślnych i parametrów reszty.

Parametry umieszcza się w nawiasach okrągłych po nazwie funkcji. W momencie wywołania funkcji, wartości tych parametrów są przekazywane do odpowiednich zmiennych wewnątrz funkcji.

Przykład:

W funkcji greet() zdefiniowano dwa parametry: name i age. Przy wywołaniu funkcji wartości Alice i 30 są przekazywane do tych parametrów.

    
      function greet(name, age) {
        return `Hello, ${name}! You are ${age} years old.`;
      }
      console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
    
  

Obsługa niezdefiniowanych parametrów

Jeśli parametr nie został przekazany podczas wywołania funkcji, jego wartość będzie undefined. To może prowadzić do błędów, jeśli wykonywane są operacje, które nie obsługują undefined.

Przykład:

W funkcji greet() sprawdzane jest, czy parametr name został przekazany. Jeśli nie, używana jest wartość Guest.

    
      function greet(name) {
        if (name === undefined) {
          return 'Hello, Guest!';
        }
        return `Hello, ${name}!`;
      }

      console.log(greet()); // "Hello, Guest!"
      console.log(greet('Bob')); // "Hello, Bob!"
    
  

4.2 Parametry domyślne

Parametry domyślne pozwalają ustawić wartości, które będą używane, jeśli argument nie został przekazany podczas wywołania funkcji lub został przekazany jako undefined. Jest to szczególnie przydatne do tworzenia funkcji z opcjonalnymi parametrami.

Składnia:

    
      function name (arg1 = value1, arg2 = value2) {
        // ciało funkcji
      }
    
  

Przykład 1: Prosta funkcja z parametrami domyślnymi

W tym przykładzie funkcja greet() ma parametr name z wartością domyślną Guest. Jeśli argument nie zostanie przekazany, używana będzie wartość domyślna.

    
      function greet(name = 'Guest') {
        return `Hello, ${name}!`;
      }

      console.log(greet('Alice')); // Wyświetli: Hello, Alice!
      console.log(greet());        // Wyświetli: Hello, Guest!
    
  

Przykład 2: Parametry domyślne z wyrażeniami

W tym przykładzie parametr tax domyślnie oblicza się jako 20% od price, jeśli nie został przekazany inny argument.

    
      function calculatePrice(price, tax = price * 0.2) {
        return price + tax;
      }

      console.log(calculatePrice(100));  // Wyświetli: 120
      console.log(calculatePrice(100, 15)); // Wyświetli: 115
    
  

Przykład 3: Parametry domyślne zależące od innych parametrów

W tym przykładzie parametry domyślne pozwalają utworzyć użytkownika z predefiniowanymi rolami i statusami.

    
      function createUser(name, role = 'user', isActive = true) {
        return { name, role, isActive };
      }

      console.log(createUser('Alice')); // Wyświetli: { name: 'Alice', role: 'user', isActive: true }
      console.log(createUser('Bob', 'admin')); // Wyświetli: { name: 'Bob', role: 'admin', isActive: true }
      console.log(createUser('Charlie', 'moderator', false)); // Wyświetli: { name: 'Charlie', role: 'moderator', isActive: false }
    
  

4.3 Parametry reszty

Parametry reszty pozwalają funkcji przyjąć dowolną liczbę argumentów i zgromadzić je w tablicy. To przydatne do tworzenia funkcji, które mogą pracować z dowolną liczbą argumentów.

Składnia:

    
      function name (arg1, arg2, ...argArray) {
        // ciało funkcji
      }
    
  

Przykład 1: Sumowanie wszystkich przekazanych argumentów

W tym przykładzie funkcja sumAll() używa parametrów reszty do sumowania wszystkich przekazanych argumentów.

    
      function sumAll(...numbers) {
        return numbers.reduce((sum, num) => sum + num, 0);
      }

      console.log(sumAll(1, 2, 3));       // Wyświetli: 6
      console.log(sumAll(4, 5, 6, 7, 8)); // Wyświetli: 30
    
  

Przykład 2: Funkcja z parametrami stałymi i resztą

W tym przykładzie funkcja showItems() przyjmuje stały parametr firstItem i nieokreśloną liczbę pozostałych argumentów zebranych w tablicy otherItems.

    
      function showItems(firstItem, ...otherItems) {
        console.log(`Pierwszy element: ${firstItem}`);
        console.log(`Inne elementy: ${otherItems.join(', ')}`);
      }

      showItems('apple', 'banana', 'cherry', 'date');

      // Wyświetli:
      // Pierwszy element: apple
      // Inne elementy: banana, cherry, date
    
  

Przykład 3: Funkcja z dynamicznymi argumentami

W tym przykładzie funkcja createMessage() przyjmuje pierwszy argument messageType i zbiera wszystkie pozostałe parametry w tablicy messages, aby stworzyć wiadomość.

    
      function createMessage(messageType, ...messages) {
        return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
      }

      console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
      // Wyświetli: [INFO]: This is an informational message

      console.log(createMessage('error', 'An', 'error', 'occurred'));
      // Wyświetli: [ERROR]: An error occurred