Truyền tham số rỗng (default parameters) cho hàm trong JavaScript

Default Parameters (ES2015)

ES6 cho phép gán **giá trị mặc định** cho tham số hàm. Khi gọi hàm không truyền đối số (hoặc truyền undefined), giá trị mặc định sẽ được dùng.

Cú pháp

function name(param = defaultValue) { ... }

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Default Parameters</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; font-family: monospace; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Truyền tham số rỗng (Default Parameters)</h1>
    <div class="result"></div>
    <button class="btn-demo">GỌI HÀM KHÔNG TRUYỀN THAM SỐ</button>
    <h3>Nhấn nút để gọi multiply() không truyền đối số</h3>

    <script>
        const resEle = document.querySelector(".result");
        const btn = document.querySelector(".btn-demo");

        // a = 2, b = 4 là default parameters
        function multiply(a = 2, b = 4) {
            return a * b;
        }

        btn.addEventListener("click", () => {
            // Gọi không truyền đối số -> dùng mặc định 2 và 4
            resEle.textContent = "Kết quả nhân = " + multiply();
            
            // Demo thêm các trường hợp
            resEle.textContent += "\nmultiply(5) = " + multiply(5);        // 5 * 4 = 20
            resEle.textContent += "\nmultiply(5, 3) = " + multiply(5, 3);  // 5 * 3 = 15
            resEle.textContent += "\nmultiply(undefined, 10) = " + multiply(undefined, 10); // 2 * 10 = 20
        });
    </script>
</body>
</html>

Các trường hợp đặc biệt

1. Chỉ có tham số sau có default

function greet(greeting, name = 'Khách') {
    console.log(greeting + ', ' + name);
}

greet('Xin chào');        // "Xin chào, Khách"
greet('Xin chào', 'John'); // "Xin chào, John"
greet(undefined, 'John'); // "Xin chào, John" (undefined kích hoạt default)
greet(null, 'John');      // "null, John" (null KHÔNG kích hoạt default)

2. Default parameter dùng biểu thức/hàm

function getDefault() {
    console.log('getDefault() được gọi');
    return 10;
}

function demo(a = getDefault()) {
    return a;
}

demo();        // Gọi getDefault(), trả về 10
demo(5);       // Không gọi getDefault(), trả về 5

3. Default parameter tham chiếu tham số trước

function createUser(name, id = generateId(), created = new Date()) {
    return { name, id, created };
}

function generateId() {
    return Math.random().toString(36).substr(2, 9);
}

4. Destructuring với default

function connect({ host = 'localhost', port = 3000, secure = false } = {}) {
    console.log(host, port, secure);
}

connect();                    // localhost 3000 false
connect({ port: 8080 });      // localhost 8080 false
connect({ host: 'api.com' }); // api.com 3000 false

Lưu ý quan trọng

• Chỉ undefined mới kích hoạt default. null, 0, '', false là giá trị hợp lệ.
• Default parameters được đánh giá **mỗi lần gọi hàm** (khác với default value trong Python).
• Parameters không có default nên đặt **trước** parameters có default.