Default Parameter trong JavaScript

Chào các bạn, lại là mình đây. Để tiếp tục các bài viết về học JavaScript cơ bản trong blog homiedev này. Hôm nay chúng ta sẽ tìm hiểu về Default Parameter trong JavaScript nhé. Cùng học JavaScript thôi nào ^^.

JavaScript Default Parameter

Default Parameter trong JavaScript là một tính năng mới của phiên bản JavaScript ES6. Nó cho phép chúng ta đặt các giá trị mặc định cho các tham số của hàm.

Ví dụ:

function displayName(name = 'homiedev.com') {
    return name;
}

console.log(displayName('homiedev'));  // homiedev
console.log(displayName());            // homiedev.com

Ở trên, mình truyền Default Parameter cho hàm displayName là homiedev.com. Khi execute hàm:

1. Nếu không truyền đối số vào hàm thì hàm sẽ trả về giá trị mặc định là homiedev.com
2. Nếu truyền đối số vào thì JavaScript sẽ ưu tiên sử dụng đối số ta truyền vào thay vì lấy giá trị mặc định.

Chúng ta có thể thêm nhiều giá trị mặc định vào các tham số của hàm:

function sum(x = 3, y = 4) {
    return x + y;
}

console.log(sum());       // 7
console.log(sum(5, 10));  // 15
console.log(sum(7));      // 11

Trường hợp chúng ta truyền vào một giá trị như ví dụ trên thì JavaScript sẽ lấy đối số đầu tiên là giá trị đã truyền vào, và sử dụng giá trị mặc định cho đối số thứ 2. Lúc này kết quả của sum(7) sẽ là 7 + 4 = 11.

JavaScript cung cấp một tính năng khác khá hay, đó là chúng ta có thể truyền biểu thức (expression) vào tham số (parameter) như sau:

function sum(x = 2, y = x,  z = x + y) {
    console.log(x + y + z);
}

sum(); // 8

Nếu chúng ta sử dụng một tham số chưa được khởi tạo thì sẽ gặp lỗi.

Ví dụ:

function sum( x = y, y = 1 ) {
    console.log(x + y);
}

sum();
// lỗi: ReferenceError: Cannot access 'y' before initialization

Chúng ta cũng có thể truyền một giá trị từ function vào làm default value.

const text = (name = 'homiedev.com') => name;

const nameBlog = function(name = text()) {
    return name;
}

const result = nameBlog();
console.log(result); // homiedev.com

Khi chúng ta truyền undefined cho hàm thì JavaScript sẽ sử dụng giá trị mặc định thay vì giá trị undefined.

function test(x = 'front-end') {
  console.log(x);
}
// hiện default value thay vì undefined
test(undefined); // 'front-end'

Như vậy là chúng ta đã tìm hiểu xong về Default Parameter trong JavaScript. Các bạn có thể trao đổi nội dung liên quan bên dưới phần bình luận 👇 nhé. Chúc các bạn học tốt!

Các bài viết hay khác:

1. Arrow Function JavaScript có gì hay?
2. Constructor Function trong JavaScript
3. Higher order functions trong Javascript là gì?