JavaScript - Default Parameters

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của các tham số mặc định trong JavaScript. Là người giáo viên máy tính gần gũi của bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Vậy, hãy cầm lấy những cây phép ảo (bàn phím) của bạn, và chúng ta hãy cùng ném những phép mã!

Cú pháp của Tham số Mặc định

Trong những ngày xưa của JavaScript (trước ES6), việc đặt giá trị mặc định cho các tham số hàm là như tries giáo một con mèo bắt bóng - có thể, nhưng không mấy thanh lịch. Chúng ta phải sử dụng những chiêu trò như này:

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

Nhưng bây giờ, với ES6 và sau này, chúng ta có một cách tốt hơn để làm điều này:

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

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

Trong ví dụ này, nếu chúng ta không truyền một đối số cho greet(), nó sẽ sử dụng giá trị mặc định 'Anonymous'. Đó giống như có một người giữ cửa lịch sự sử dụng lời chào chung nếu anh ta không biết tên của bạn!

Truyền một biểu thức làm giá trị tham số mặc định

Tham số mặc định không chỉ giới hạn ở các giá trị đơn giản. Chúng có thể là các biểu thức! Hãy xem một ví dụ:

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

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

Ở đây, nếu chúng ta không cung cấp chiều rộng, nó sẽ sử dụng giá trị chiều dài. Đó giống như một người làm việc lười biếng tạo hình vuông - nếu bạn chỉ cho một cạnh, anh ta giả sử bạn muốn một hình vuông!

Chúng ta có thể làm cho nó còn thú vị hơn:

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. (hoặc bất kỳ số ngẫu nhiên nào)

Hàm này sinh ra một số may mắn ngẫu nhiên mỗi khi nó được gọi mà không có lời chào tùy chỉnh. Đó giống như một bánh fortune cookie, nhưng thân thiện hơn!

Truyền đối số Undefined

Đây là một hành vi kỳ lạ cần nhớ:

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

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

Truyền undefined giống như không truyền gì cả, vì vậy nó kích hoạt giá trị mặc định. Nhưng null được coi là một giá trị hợp lệ, vì vậy nó thay thế giá trị mặc định. Đó giống như undefined đang nói "Tôi không biết, bạn quyết định," trong khi null đang nói "Tôi đã làm quyết định của mình, và quyết định của tôi là không có gì!"

Biểu thức hàm làm tham số mặc định

Chúng ta thậm chí có thể sử dụng biểu thức hàm làm tham số mặc định. Hãy xem thử:

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

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

Điều này cho phép chúng ta tùy chỉnh không chỉ giá trị, mà còn hành vi của tham số mặc định. Đó giống như có một robot chào hỏi tùy chỉnh!

Tham số Tùy chọn

Bây giờ, hãy nói về các tham số tùy chọn. Trong JavaScript, tất cả các tham số đều là tùy chọn theo mặc định. Nếu bạn không cung cấp chúng, chúng sẽ trở thành undefined. Nhưng với các tham số mặc định, chúng ta có thể cho chúng giá trị dự phòng:

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' }

Bằng cách này, chúng ta có thể làm một số tham số bắt buộc (như tên và tuổi) và một số khác tùy chọn (như quốc gia). Đó giống như điền vào một biểu mẫu mà một số mục được đánh dấu bằng dấu sao đỏ, và một số khác chỉ là tốt để có!

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã thảo luận:

Phương pháp	Mô tả	Ví dụ
Tham số Mặc định Cơ bản	Cung cấp giá trị dự phòng nếu không có đối số được truyền	function greet(name = 'Anonymous')
Biểu thức làm Tham số	Sử dụng biểu thức để tính giá trị mặc định	function calcArea(length, width = length)
Hành vi của Undefined	undefined kích hoạt mặc định, null không	showMessage(undefined) vs showMessage(null)
Biểu thức Hàm làm Tham số	Sử dụng hàm để tính giá trị mặc định	function greet(name, getGreeting = () => 'Hello')
Tham số Tùy chọn	Làm một số tham số tùy chọn với giá trị mặc định	function createUser(name, age, country = 'Unknown')

Nhớ nhé, cácpadawan trẻ, các tham số mặc định giống như những mạng lưới an toàn trong mã của bạn. Chúng cứu bạn khi bạn té ngã (hoặc quên truyền một đối số), đảm bảo rằng các hàm của bạn luôn có thứ để làm việc. Sử dụng chúng một cách khôn ngoan, và mã sẽ mãi với bạn!

Credits: Image by storyset