Default Parameters (Tham Số Mặc Định)

Khái niệm

Tự động dùng giá trị mặc định khi đối số là undefined. Giá trị mặc định được tính lúc gọi hàm, từ trái → phải.

---

Cú pháp

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

---

Ví dụ

Cơ bản

function greet(name = 'friend') {
  return `Hi, ${name}!`;
}

greet();            // "Hi, friend!"   (không truyền → undefined → dùng default)
greet(undefined);   // "Hi, friend!"   (undefined → dùng default)
greet(null);        // "Hi, null!"     (null ≠ undefined → KHÔNG dùng default)
greet('');          // "Hi, !"         ('' ≠ undefined → KHÔNG dùng default)

Tham chiếu tham số trước

Tham số bên phải có thể dùng tham số bên trái:

function createUser(name, role = 'user', greeting = `Welcome, ${name}!`) {
  return { name, role, greeting };
}

createUser('An');
// { name: 'An', role: 'user', greeting: 'Welcome, An!' }

Biểu thức phức tạp

Default có thể là bất kỳ biểu thức nào — được tính mỗi lần gọi:

function log(msg, time = Date.now()) {
  console.log(`[${time}] ${msg}`);
}

log("start"); // [1709474400000] start
// mỗi lần gọi → Date.now() mới

Kết hợp destructuring

function createUser({ name, age = 18, role = 'user' } = {}) {
  return { name, age, role };
}

createUser({ name: 'An' });
// { name: 'An', age: 18, role: 'user' }

createUser(); // không lỗi nhờ = {} ở cuối
// { name: undefined, age: 18, role: 'user' }

---

Quy tắc kích hoạt

Khi nào default được dùng?

Default chỉ kích hoạt khi giá trị là undefined — không phải khi null, 0, "", hay false:

Đối số	Dùng default?	Lý do
Không truyền	✅ Có	Tương đương undefined
undefined	✅ Có	Đúng điều kiện
null	❌ Không	null ≠ undefined
0	❌ Không	0 ≠ undefined
""	❌ Không	"" ≠ undefined
false	❌ Không	false ≠ undefined

---

So sánh cách cũ (ES5)

❌ Cách cũ

// Lỗi khi truyền falsy hợp lệ (0, "", false)
function old(x) {
  x = x || 10;  // 0 cũng bị thay bằng 10!
}

old(0);   // x = 10 ← sai!
old("");  // x = 10 ← sai!

✅ Default parameter

// Chỉ khi undefined
function modern(x = 10) {
  return x;
}

modern(0);   // 0 ← đúng!
modern("");  // "" ← đúng!
modern();    // 10 ← default

---

Temporal Dead Zone (TDZ)

Tham số default nằm trong scope riêng và bị TDZ — không thể tham chiếu tham số phía sau mình:

// ❌ ReferenceError — b chưa khai báo tại thời điểm tính a
function bad(a = b, b = 1) {}
bad(); // ReferenceError

// ✅ OK — a đã khai báo trước b
function ok(a = 1, b = a) {}
ok(); // a = 1, b = 1

---

Best Practices

Default ở cuối

Đặt tham số có default sau tham số bắt buộc:

// ✅ Rõ ràng
function api(url, method = 'GET') {}

// ❌ Khó dùng — phải truyền undefined để skip
function bad(method = 'GET', url) {}
bad(undefined, '/users');

Object cho nhiều tuỳ chọn

Khi có > 2 default → dùng object parameter:

function fetch(url, {
  method = 'GET',
  headers = {},
  body = null,
  timeout = 5000,
} = {}) {
  // ...
}

---

Tóm tắt

Đặc điểm	Chi tiết
Cú pháp	param = defaultValue
Kích hoạt	Chỉ khi undefined
Thứ tự tính	Trái → phải
TDZ	Không thể tham chiếu tham số phía sau
fn.length	Đếm đến default đầu tiên rồi dừng