ES6 Arrow Function

Arrow functon trong ECMAScript là kiểu cú pháp giúp đơn giản hoá việc việc định nghĩa hàm.

Cú Pháp Arrow Function

Trước khi sử dụng arrow function thì chúng ta hãy cùng xem cách định nghĩa một hàm JavaScript theo cách thông thường trước đây:

var sumNumbers = function (a, b) {
    return a + b;
}

Với tính năng arrow function trong ECMAScript 6 chúng ta có thể viết lại đoạn code trên như sau:

const sumNumbers = (a, b) => {
    return a + b;
}

Có 2 điểm bạn cần lưu ý ở cách viết trên:

  • Từ khoá function được bỏ đi
  • Thêm ký tự => (gần giống với mũi tên) đặt giữa dấu ngoặc kết thúc danh sách tham số ) và dấu ngoặc bắt đầu logic của hàm {

Ngoài ra chúng ta thay từ khoá var bằng const để quy định rằng giá trị của sumNumbers sẽ không thay đổi (tất nhiên bạn có thể dùng let nếu muốn).

Giải Thích Cú Pháp

Rất nhiều lập trình viên cảm thấy cú pháp arrow function khó hiểu và thậm chí phức tạp hơn cú pháp định nghĩa hàm thông thường trong ECMAScript phiên bản trước. Để hiểu ý nghĩa của cú pháp arrow function thì chúng ta cần nhớ lại rằng về bản chất công dụng của một hàm đó là thực hiện các thao tác để biến đổi đầu vào (các tham số) để đưa ra một kết quả mới.

Cùng xem lại ví dụ phía trên:

let sumNumbers = (a, b) => {
    return a + b;
}

Ký tự => (tương tự một dấu mũi tên) mang ý nghĩa rằng chúng ta sẽ biến đối các tham số đầu vào ab ớ phía trước mũi tên và kết quả của sự chuyển đổi này được đặt ở phía sau mũi tên.

Hàm Với Một Tham Số Duy Nhất

Đối với các hàm được định nghĩa chỉ với một tham số thì bạn có thể bỏ qua cặp dấu ngoặc ():

let doubleNumber = a => {
    return a * 2;
}

Tuy nhiên nếu hàm không có đối số nào thì chúng ta vẫn phải sử dụng ():

let sayHello => () {
    console.log("Hello everyone!");
}

Trả Về Giá Trị (Return Value)

Đối với các hàm mà bên trong đó chỉ chứa một câu lệnh duy nhất và câu lệnh này dùng để trả về giá trị cho hàm như ví dụ ở trên:

let sumNumbers = (a, b) => {
    return a + b;
}

Thì chúng ta có thể viết sử dụng cú pháp ngắn hơn sau:

let sumNumbers = (a, b) => a + b;

Hướng Dẫn Liên Quan