Rethinking JavaScript Part I - The if Statement (Translated)

Tư duy về hàm đã giúp tôi mở mang đầu óc về lập trình. Nó đã cho tôi một cái nhìn sâu rộng về code. Nó cũng mang lại cho tôi một nhiệm vụ mà ở đó tôi đã tự vấn rất nhiều về các đặc tính cốt lõi của ngôn ngữ.

Gần đây tôi xem xét rất kỹ về câu lệnh if.

Do đã viết cả một ứng dụng mà không cần tới một câu lệnh if nào nên tôi thấy if bây giờ là một lựa chọn, chứ không còn là bắt buộc nữa.

Nếu bạn chưa quen với lập trình hàm (functional programming), bài viết này giống như những lời huyên thuyên của một gã điên. Nhưng hãy kiên nhẫn với tôi một chút và để cho tôi được giải thích.

        Learning multiple ways to solve the same problem amplifies your mental toolkit by magnitudes.

Đầu tiên, hãy gặp gỡ kẻ thay thế câu lệnh if - toán tử tam nguyên (ternary operator):

condition ? expr1 : expr2

Lập trình hàm đã dạy tôi viết các hàm nhỏ như này:

const add = (x, y) => x + y

Câu lệnh if không phù hợp với kiểu hàm này nhưng toán tử tam nguyên lại rất phù hợp!

const isGreaterThan5 = x => x > 5 ? 'Yep' : 'Nope'

Chẳng mấy chốc, tôi bắt đầu nhận ra rằng hầu hết trong mọi trường hợp thì câu lệnh if có thể bị thay thế bởi một phép toán tam nguyên tương đương:

// typical code you might stumble upon
function saveCustomer(customer) {
    if (isCustomerValid(customer)) {
        database.save(customer)
    } else {
        alert('customer is invalid')
    }
}

// ternary equivalent
function saveCustomer(customer) {
    return isCustomerValid(customer)
        ? database.save(customer)
        : alert('customer is invalid')
}

// ES6 style
const saveCustomer = customer =>
    isCustomerValid(customer)
        ? database.save(customer)
        : alert('customer is invalid')

Sau đó tôi bắt đầu nghĩ làm cách nào để thay thế câu lệnh else if bằng toán tử tam nguyên. Tôi đã có thể làm điều này với toán tử tam nguyên lồng (nested ternary) nhưng thực sự thì trông nó rất rối rắm và khó hiểu.

Cho đến khi tôi format lại đoạn code:

// old school else-if
function customerValidation(customer) {
    if (!customer.email) {
        return error('email is require')
    } else if (!customer.login) {
        return error('login is required')
    } else if (!customer.name) {
        return error('name is required')
    } else {
        return customer
    }
}

// ES6 style custom formatted ternary magic
const customerValidation = customer =>
    !customer.email   ? error('email is required')
    : !customer.login ? error('login is required')
    : !customer.name  ? error('name is required')
                      : customer

Bây giờ thì bạn có thể thấy rõ ràng là tất cả các điều kiện được xác định bên tay trái và giá trị trả về bên tay phải.

Mặc dù có thể thay thế câu lệnh if với toán tử tam nguyên, tôi không nói là bạn nên làm như vậy. Đây chỉ là một công cụ khác cho bạn cân nhắc và sử dụng.

Bài viết này là bài mở màn cho series "Rethinking JavaScript". Sẽ còn nhiều điều hay ho ở phía trước