[Javascript] Null Object Design Pattern

Cách thức: Tạo ra một đối tượng với các trường có giá trị mặc định để trả về khi gặp kết quả null.

Mục đích: Giảm thiểu việc kiểm tra null trong code, từ đó giúp code sạch và dễ đọc hơn.

Để hiểu rõ cách hoạt động của design pattern này, chúng ta đi vào giải quyết một bài toán giả định sau.

Bài toán: Viết hàm lấy tên thành phố theo id từ danh sách lstCity. Nếu không tìm thấy kết quả thì trả về giá trị 'Unknown'

var lstCity = [
    {id: 1, name: 'Hà Nội', code: 'HN'},
    {id: 2, name: 'Hồ Chí Minh', code: 'HCM'}
]

Cách 1 (Truyền thống)

function getNameCity(id) {
    let city = lstCity.find(x => x.id == id);
    if(city && city.name) return city.name;
    else return 'Unknown';
}

Đối với cách 1, ta cần bổ sung điều kiện kiểm tra null (city && city.name), chưa kể nếu object nhiều cấp thì ta cần phải bổ sung thêm nhiều điều kiện && để kiểm tra null phía sau nữa, khiến code dài hơn. Hoặc thậm chí có thể anh em quên kiểm tra null, làm gây ra lỗi phần mềm.

Cách 2 (Áp dụng Null Object design pattern)

const NullCity = {
    id: -1,
    name: "Unknown",
    code: null
}
Object.freeze(NullCity);

function getNameCity(id) {
    let city = lstCity.find(x => x.id == id) || NullCity;
    return city.name;
}

Đối với cách này, ta tạo object null (NullCity) để xử lý, giúp hàm cắt ngắn được bước kiểm tra null, ngắn gọn hơn, code cũng tường minh, dễ kiểm soát hơn.

Kết

Qua bài toán trên, ta nhận thấy rõ được Ưu điểm khi áp dụng design pattern này: Giúp code tường minh, dễ kiểm soát hơn.

Tuy nhiên, design pattern này có 1 Nhược điểm: Nếu có nhiều chỗ cần trả về các giá trị mặc định khác nhau, ta cần phải tạo ra nhiều object null hơn. Ví dụ hàm getNameCity có nơi gọi hàm ta cần trả giá trị mặc định là 'None' thay vì 'Unknown', ta sẽ cần phải tạo thêm null object mới. vd: const NullCity2 = { id: -1, name: "None", code: null }

Nguồn tham khảo

1. https://youtu.be/D4Dja5WSZoA?list=PLZlA0Gpn_vH_CthENcPCM0Dww6a5XYC7f