Tham số mặc định làm cho việc làm việc với hàm dễ dàng hơn rất nhiều. Sử dụng tham số mặc định, bạn có thể nói cho hàm biết tham số nào nên dùng trong trường hợp bạn chưa chỉ định. Điều này giúp tránh lỗi và làm cho mã dễ đọc hơn.
JavaScript giới thiệu tham số mặc định trong ES2015. Chúng cho phép bạn khởi tạo hàm với các giá trị được định nghĩa trước.
Trong hướng dẫn này, chúng ta sẽ nói về tham số mặc định là gì, cách sử dụng chúng, và những loại biểu thức nào bạn có thể chỉ định làm tham số mặc định. Chúng ta sẽ đi qua vài ví dụ để bạn có tất cả mã cần thiết để bắt đầu.
Tham số vs. Đối số: Cuộc chiến
Trước khi bắt đầu, hãy giải quyết câu hỏi cổ xưa của người mới: khác biệt giữa tham số (parameter) và đối số (argument) là gì? Bạn cần biết sự khác biệt trước khi làm việc với tham số mặc định trong JavaScript.
Tham số là biến được đặt tên mà bạn truyền vào hàm JavaScript. Tham số không bao giờ có giá trị trực tiếp được gán. Nó là chỗ trống cho giá trị bạn sẽ truyền vào hàm. Đây là ví dụ về tham số:
function sayHello(name) { console.log("Xin chào, " + name); }
Trong ví dụ này, "name" là tham số của chúng ta. Nó không có giá trị nào được gán.
Đối số, mặt khác, là giá trị được truyền cho hàm:
sayHello("Brett");
Mã trả về: "Xin chào, Brett". "Brett" là ví dụ của đối số, là giá trị chúng ta truyền qua hàm.
Gọi hàm mà không chỉ định tất cả tham số có thể dẫn đến lỗi:
sayHello()
Mã trả về: Xin chào, undefined. Đó là vì chúng ta chưa truyền giá trị cho hàm.
Tham số mặc định JavaScript
Chúng ta có thể khắc phục vấn đề này bằng cách chỉ định tham số mặc định. Tham số mặc định cho phép bạn chỉ định giá trị sẽ được gán cho tham số trong trường hợp không có giá trị nào được chỉ định.
Gán giá trị mặc định sử dụng toán tử gán:
function sayHello(name="Thế giới") { console.log("Xin chào, " + name); } sayHello();
Mã trả về: Xin chào, Thế giới. Bạn thấy chúng ta không chỉ định đối số trong ví dụ này. Thay vào đó, chúng ta đặt tham số hàm mặc định. Trong trường hợp này, bất cứ khi nào đối số không được chỉ định, giá trị của tham số "name" trong hàm trở thành "Thế giới".
Điều này dễ dàng hơn nhiều so với phải kiểm tra thủ công xem giá trị có được chỉ định hay không.
Một tham số mặc định có thể có bất kỳ giá trị nguyên thủy hoặc đối tượng nào được gán làm giá trị. Dưới đây là vài ví dụ về tham số mặc định hợp lệ:
- Chuỗi: "Latte"
- Số: 2.40
- Boolean: true
- Mảng: ["Steven", false]
- Đối tượng: {name: "Steven", loyaltyCustomer: false }
Chỉ định nhiều tham số mặc định
Không có giới hạn về số lượng tham số mặc định bạn có thể chỉ định trong hàm. Xét mã sau:
function createOrder(coffee="Espresso", price=1.75) { console.log("Đơn hàng: " + coffee); console.log("Giá: $" + price); } createOrder();
Mã trả về:
Đơn hàng: Espresso Giá: $1.75
Trong ví dụ này, chúng ta chỉ định hai tham số mặc định: coffee và price. Bạn cũng có thể trộn lẫn các tham số chỉ định giữa mặc định và thông thường. Khi làm vậy, bạn phải đặt các tham số thông thường trước tham số mặc định. Xét ví dụ này:
function createOrder(coffee, price=1.75) { console.log("Đơn hàng: " + coffee); console.log("Giá: $" + price); } createOrder("Cappuccino");
Mã trả về:
Đơn hàng: Cappuccino Giá: $1.75
Chúng ta chỉ định một đối số: Cappuccino. Đây là tên cà phê chúng ta đặt hàng. Vì chúng ta không chỉ định giá trị mặc định cho tham số này, chúng ta cần chỉ định giá trị đối số; ngược lại, "undefined" sẽ được trả về.
Chúng ta khai báo giá trị mặc định cho "price" nên là "1.75". Vì đặt tham số mặc định này, bất cứ khi nào chúng ta không chỉ định giá, nó sẽ tự động đặt thành "1.75".
Quan trọng là bạn phải chỉ định bất kỳ tham số thông thường nào trước tham số mặc định. Điều này là vì giá trị cho tham số thông thường được gán theo thứ tự xuất hiện trong lời gọi hàm.
Hàm làm tham số mặc định
Một hàm có thể được đặt làm tham số mặc định. Điều này hữu ích nếu giá trị bạn muốn truyền vào hàm được tính bằng một hàm khác.
Trong đoạn mã sau, chúng ta sẽ tạo hàm tạo tên người dùng ngẫu nhiên cho người chơi mới trong trò chơi video:
function getRandomUsername() { var number = Math.floor(Math.random() * 100); var username_list = ['Crash', 'Steve', 'Lucinda', 'Ellie']; var username = username_list[Math.floor(Math.random() * username_list.length)]; var final_username = username + number; return final_username; } function createUser(username = getRandomUsername(), email) { console.log('Tên người dùng của bạn là: ' + username); console.log('Email của bạn là: ' + email); } createUser('test@test.com');
Mã trả về:
Tên người dùng của bạn là: Crash87 Email của bạn là: test@test.com
Hãy phân tích mã của chúng ta.
Chúng ta khai báo hàm getRandomUsername() tạo tên người dùng giả ngẫu nhiên. Điều này hoạt động bằng cách tạo số ngẫu nhiên và chọn ngẫu nhiên một tên người dùng từ danh sách bốn tên. Số ngẫu nhiên sau đó được thêm vào cuối tên. Hàm trả về tên người dùng mới tạo.
Trong hàm createUser, chúng ta đặt giá trị mặc định của tham số "username" bằng hàm getRandomUsername(). Điều này có nghĩa là bất cứ khi nào chúng ta không chỉ định tên người dùng cho người dùng mới, một tên ngẫu nhiên sẽ được tạo.
Mã sau đó in tên người dùng và địa chỉ email của họ ra console.
Kết luận
Tham số mặc định cho phép bạn đặt giá trị sẽ được gán cho tham số nếu không có đối số được chỉ định trong lời gọi hàm. Tham số mặc định giúp hàm dễ đọc hơn và giảm các vấn đề có thể xảy ra khi giá trị không được truyền cho hàm.
Bây giờ bạn đã sẵn sàng làm việc với tham số mặc định JavaScript như một chuyên gia!