Arrow Function trong ES6

ES6 có cú pháp định nghĩa function vô cùng mới lạ bằng cách sử dụng dấu mui tên =>. Trong bài hôm nay chúng ta cùng tìm hiểu về cách sử dụng Arrow Function trong ES6 mới này nhé

Arrow Function trong ES6

Thực chất hầu hết các trình duyệt hiện nay đều đã hỗ trợ ES6 nên bạn có thẻ coi như đây là một tính năng mới của Javascript.

Cú pháp căn bản:

Cú pháp căn bản nhất của arrow function es6 như sau:

var functionName = (var1, var2) => {
    // Nội dung function
};

Ví dụ: Viết arrow function in ra câu chào và so sánh với cách tạo function thông thường.

Arrow function:

var hello = (name, message) => {
    console.log("Chào " + name + ", bạn là " + message);
};

Normal function:

function hello(name, message)
{
    console.log("Chào " + name + ", bạn là " + message);
}

So sánh hai các trên thì rõ ràng cách thông thường sẽ đơn giản hơn rất nhiều, và cả hai đoạn code đều cho kết quả như nhau

Nội dung là một câu lệnh đơn:

Trường hợp trong thân của hàm chỉ có một lệnh duy nhất thì bạn có thể sử dụng theo ví dụ dưới đây.

var hello = (name, message) => console.log("Chào " + name + ", bạn là " + message);

Nghĩa là bạn có thể bỏ đi cặp dấu {}, điều này tuân thủ theo nguyên tắc "nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {}".

Trường hợp một tham số:

Trường hợp truyền vào chỉ một tham số thì bạn có thể bỏ cặp ().

var hello = message => {
    console.log(message);
};

hello('Chào mừng bạn đến với hoclaptrinh.vn');

Trường hợp không có tham số:

Trường hợp không có tham số truyền vào thì bạn sử dụng cặp () rỗng, xem ví dụ sau:

var hello = () => {
    console.log('Chào mừng bạn đến với freetuts.net');
};

hello();

Ví dụ với Arrow Function trong ES6

Ví dụ với hàm setTimeout:

Hàm setTimeout cũng có một callback function nên ta sẽ truyền vào callback đó một Arrow Function.

setTimeout(() => {
    console.log('3 giây đã trôi qua');
}, 3000);

Do arrow function không có tham số truyền vào nên mình chỉ để là ().

Lỗi cú pháp với Arrow function

Có một số lôi cú pháp khi sử dụng arrow function mà ta thường ít chú ý tới, nhin rất đơn giản nhưng đôi khi lại gây khó khăn cho những bạn mới học.

Đóng arrow function

Trường hợp bạn sử dụng arrow function bên trong một hàm hoặc sử dụng dạng một biến thì ban phải dùng cặp đóng mở để bao quanh lại.

console.log(typeof () => {}); // Cú pháp sai
console.log(typeof (() => {})); // Cú pháp đúng

Trong ví dụ trên thì ví dụ đầu tiên sai vì arrow function được sử dụng này như một tham số, vì vậy bạn phải đặt nó bên trong cặp đóng mở như ở ví dụ 2. Trường hợp bạn không muốn đặt nó bên trong cặp đóng mở thì ban phải khai báo arrow function thành một biến như ví dụ dưới đây, tuy nhiên nhìn rất rườm rà.

var x = () => {}
console.log(typeof x);

Ràng buộc mũi tên

Đúng với cái tên của nó là hàm mũi tên và mũi tên này rất khó chịu về cú pháp sử dụng, bạn phải đặt mũi tên cùng hàng với tên hàm.

const func1 = (x, y) // Sai
=> {
    return x + y;
};
const func2 = (x, y) => // Đúng
{
    return x + y;
};
const func3 = (x, y) => { // OK
    return x + y;
};

const func4 = (x, y) // Sai
=> x + y;
const func5 = (x, y) => // Đúng
x + y;

Nếu bạn muốn xuống hàng mà không bị lỗi thì phải sử dụng cú pháp sau:

const func6 = ( // Đúng
    x,
    y
) => {
    return x + y;
};

Vậy là chúng ta đã làm quen với cú pháp Arrow Function trong ES6, cũng không quá phức tạp phải không?