Funkcje w JavaScript są nie tylko blokami kodu wykonywanymi po wywołaniu; to wszechstronne narzędzia, które można dostosować i używać na wiele sposobów.

Modyfikacja argumentów w funkcji

Przekazywanie przez wartość

Gdy przekazywane są typy proste (takie jak liczby, stringi czy wartości logiczne), JavaScript tworzy ich kopie w momencie przekazania do funkcji. Oznacza to, że każda modyfikacja takiego argumentu wewnątrz funkcji nie wpłynie na oryginalną zmienną zdefiniowaną poza funkcją.

function modify(num) {
    num = 10;
    console.log("Inside function:", num);
}

let myNum = 5;
modify(myNum);
console.log("Outside function:", myNum);

//Inside function: 10
//Outside function: 5

W tym przypadku, pomimo zmiany wartości wewnątrz funkcji, zmienna myValue pozostaje niezmieniona poza nią, co ilustruje koncepcję przekazywania przez wartość.

Przekazywanie przez referencję

Dla typów złożonych, takich jak obiekty, tablice i funkcje, JavaScript przekazuje referencje do oryginalnego obiektu. To oznacza, że zmiany dokonane na obiekcie wewnątrz funkcji odzwierciedlają się na obiekcie zewnętrznym.

function modifyObject(person) {
    person.name = "Alice";
    console.log("Inside function:", person);
}

let myPerson = { name: "Bob" };
modifyObject(myPerson);
console.log("Outside function:", myPerson);

//Inside function: { name: "Alice" }
//Outside function: { name: "Alice" }

Argumenty opcjonalne i domyślne

W JavaScript można zdefiniować argumenty domyślne dla funkcji, co jest przydatne, gdy funkcja może być wywoływana bez określenia wszystkich argumentów. To zwiększa elastyczność funkcji i pozwala uniknąć błędów wynikających z braku argumentów.

function createGreeting(message, name = "Stranger") {
    console.log(`${message}, ${name}!`);
}

createGreeting("Hello");  // Output: "Hello, Stranger!"
createGreeting("Hello", "Alice");  // Output: "Hello, Alice!"

Jeżeli nie przypiszemy wartości domyślnej, zostanie dopisana wartość undefined

Parametr resztowy jako argument funkcji

Parametr resztowy (rest parameter) w JavaScript umożliwia funkcji przyjęcie nieokreślonej liczby argumentów jako tablicę. Dzięki temu, zamiast określać każdy argument osobno, można wykorzystać składnię ... (trzy kropki), która zbierze wszystkie przekazane argumenty w jedną tablicę.

function configureChart(title, ...options) {
    console.log(`Configuring chart: ${title}`);
    console.log("Options:", options);
}

configureChart("Sales Data", { type: 'bar' }, { responsive: true }, { color: 'blue' });

W powyższym przykładzie, funkcja configureChart przyjmuje tytuł wykresu jako pierwszy argument, a następnie dowolną liczbę dodatkowych opcji konfiguracyjnych. Każda z opcji jest przekazywana jako osobny obiekt, co ułatwia zarządzanie konfiguracją.

Parametr resztowy przy wywoływaniu funkcji

Parametr resztowy można również używać w odwrotny sposób, używany przy wywoływaniu funkcji pozwala na łatwe przekazywanie elementów z tablicy jako pojedynczych argumentów do funkcji. Dzięki operatorowi rozproszenia (spread operator) możemy przekształcić tablicę w serię argumentów

function plotGraph(x, y, style) {
    console.log(`Plotting graph at X: ${x}, Y: ${y} with style: ${style}`);
}

let graphData = [15, 10, 'dashed'];
plotGraph(...graphData);  // Wywołanie funkcji, gdzie dane są przekazywane jako oddzielne argumenty

W tym przykładzie, elementy graphData są przekazane do funkcji plotGraph jako trzy niezależne argumenty, co jest możliwe dzięki użyciu operatora rozproszenia.

Destrukturyzacja argumentów funkcji

Destrukturyzacja argumentów w JavaScript to elegancka metoda wyciągania danych z obiektów i tablic bezpośrednio w nagłówku funkcji.

Destrukturyzacja Obiektów

Gdy funkcja przyjmuje obiekt jako argument, można bezpośrednio wyciągnąć potrzebne właściwości:

function greet({ name, age }) {
    console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

const person = {
    name: "John",
    age: 30
};

greet(person); // Hello, my name is John and I am 30 years old.

Destrukturyzacja Tablic

Podobnie jak w przypadku obiektów, możemy zdestrukturyzować tablice. Jest to szczególnie przydatne, gdy funkcja przyjmuje tablicę jako argument.

function sum([a, b, c]) {
    return a + b + c;
}

const numbers = [1, 2, 3];

console.log(sum(numbers)); // 6

Domyślne wartości

Możemy również ustawić domyślne wartości dla parametrów, które mogą być niezdefiniowane.

function greet({ name = "Guest", age = 18 } = {}) {
    console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

greet(); // Hello, my name is Guest and I am 18 years old.

Destrukturyzacja z resztą

Możemy użyć operatora rest (...), aby zebrać pozostałe elementy do jednego argumentu.

function sum([first, second, ...rest]) {
    const initialSum = first + second;
    const restSum = rest.reduce((acc, num) => acc + num, 0);
    return initialSum + restSum;
}

console.log(sum([1, 2, 3, 4, 5])); // 15

Własne właściwości Funkcji

W JavaScript funkcje są obiektami, co oznacza, że mogą mieć własne właściwości tak jak inne obiekty. Można dodawać do funkcji własne właściwości, aby przechowywać dodatkowe informacje związane z daną funkcją.

function greet(name) {
    console.log(`Hello, ${name}!`);
    greet.callCount++;
}

// Inicjalizacja właściwości
greet.callCount = 0;

// Wywołania funkcji
greet('Alice');
greet('Bob');
greet('Charlie');

console.log(`Function was called ${greet.callCount} times.`); 

//Hello, Alice!
//Hello, Bob!
//Hello, Charlie!
//Function was called 3 times.

// Function was called 3 times.

Inny przykład:

function fetchData() {
    console.log(`Fetching data from ${fetchData.url}`);
    // tutaj może być kod do pobierania danych
}

// Ustawienie właściwości konfiguracyjnej
fetchData.url = 'https://api.example.com/data';

// Wywołanie funkcji
fetchData(); // Fetching data from https://api.example.com/data