JavaScript -iParametry domyślne

Witajcie, przyszli magowie JavaScript! Dziś我们将深入探索JavaScript魔法世界中的默认参数。 Jako wasz przyjacielski sąsiad nauczyciel komputerowy, cieszę się, że mogę poprowadzić was przez tę podróż. Więc weźcie swoje wirtualne różdżki (klawiatury) i wyczarujmy trochę kodu!

Składnia domyślnych parametrów

W dawnych czasach JavaScript (przed ES6), ustawianie domyślnych wartości dla parametrów funkcji było trochę jak próba nauczenia kota przynoszenia - możliwe, ale nie bardzo eleganckie. Musieliśmy używać sztuczek takich jak:

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

Ale teraz, z ES6 i nowszymi wersjami, mamy o wiele ładniejszy sposób na to:

function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Anonymous!
greet('Alice'); // Output: Hello, Alice!

W tym przykładzie, jeśli nie przekazujemy argumentu do greet(), używa on domyślnej wartości 'Anonymous'. To jakby mieć uprzejmego dozorcy, który używa ogólnego powitania, jeśli nie zna twojego imienia!

Przekazywanie wyrażenia jako wartości domyślnej parametru

Domyślne parametry nie ograniczają się do prostych wartości. Mogą być også wyrażeniami! Spójrzmy na przykład:

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // Output: 25
console.log(calculateArea(5, 3)); // Output: 15

Tutaj, jeśli nie podamy szerokości, użyje wartości długości. To jak leniwy kreator kwadratów - jeśli podasz tylko jedną stronę, zakłada, że chcesz kwadrat!

Możemy zrobić jeszcze bardziej zaawansowane rzeczy:

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // Output: Hello, Bob! The lucky number is 42. (lub dowolna liczba losowa)

Ta funkcja generuje losową szczęśliwą liczbę za każdym razem, gdy jest wywoływana bez niestandardowego powitania. To jakby fortunna ciasteczka, ale bardziej przyjazna!

Przekazywanie argumentu undefined

Oto niezwykłe zachowanie, które warto zapamiętać:

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // Output: Default message
showMessage(null); // Output: null

Przekazywanie undefined jest takie samo jak nie przekazywanie niczego, więc wywołuje domyślną wartość. Ale null jest uważane za ważną wartość, więc nadpisuje domyślną wartość. Jakby undefined mówił "Nie wiem, ty zdecyduj", a null mówił "Zrobiłem swój wybór, a mój wybór to nic!"

Wyrażenie funkcji jako domyślnej wartości parametru

Możemy nawet używać wyrażeń funkcji jako domyślnych parametrów. Sprawdź to:

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // Output: Hello Alice!
greet('Bob', () => 'Hi there'); // Output: Hi there Bob!

To pozwala nam dostosować nie tylko wartość, ale også zachowanie naszego domyślnego parametru. To jakby mieć robot powitalny, który można dostosować!

Parametry opcjonalne

Teraz porozmawiajmy o parametrach opcjonalnych. W JavaScript, wszystkie parametry są domyślnie opcjonalne. Jeśli ich nie podasz, stają się undefined. Ale z domyślnymi parametrami, możemy dać im wartości awaryjne:

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // Output: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // Output: { name: 'Bob', age: 25, country: 'USA' }

W ten sposób możemy uczynić niektóre parametry obowiązkowe (jak imię i wiek), a inne opcjonalne (jak kraj). Jak wypełnianie formularza, gdzie niektóre pola są oznaczone czerwoną gwiazdką, a inne są tylko miłe do mieć!

Oto tabela podsumowująca metody, które omówiliśmy:

Metoda	Opis	Przykład
Basic Default Parameter	Podaje wartość domyślną, jeśli nie przekazano argumentu	function greet(name = 'Anonymous')
Expression as Default	Używa wyrażenia do obliczenia wartości domyślnej	function calcArea(length, width = length)
Undefined Behavior	undefined wywołuje domyślną wartość, null nie	showMessage(undefined) vs showMessage(null)
Function as Default	Używa funkcji do obliczenia wartości domyślnej	function greet(name, getGreeting = () => 'Hello')
Optional Parameters	Uczynia niektóre parametry opcjonalnymi z wartościami domyślnymi	function createUser(name, age, country = 'Unknown')

Pamiętajcie, młodzi padowanie, domyślne parametry są jak siatki bezpieczeństwa w waszym kodzie. Ratują was, gdy upadacie (lub zapominacie przekazać argument), zapewniając, że wasze funkcje zawsze mają coś do roboty. Używajcie ich mądrze, a niech kod będzie z wami!

Credits: Image by storyset