Trong ES6, arrow functions là một cú pháp mới dùng làm viết các hàm trong JavaScript. Nó giúp tiết kiệm ngân sách và chi phí thời kì phát triển và đơn giản hóa phạm vi function (function scope). Trong nội dung bài viết này, mình sẽ giới thiệu rõ ràng và cụ thể về arrow function, cách sử dụng chúng, các cú pháp phổ quát, trường hợp sử dụng phổ quát, cũng như ưu/nhược điểm của việc sử dụng chúng.

Bạn Đang Xem: ES6 Arrow Functions

Arrow function là gì

Arrow function – còn được gọi là “fat arrow”, là cú pháp được mượn từ CoffeeScript (một tiếng nói chuyển tiếp), cú pháp này là cách ngắn gọn hơn dùng làm viết function. Ở đây sử dụng kí tự =>, trông giống như một mũi tên “béo”. Arrow function là một hàm vô danh và nó thay đổi cách this bind đến function. Arrow function làm code của ta trông ngắn gọn hơn, giúp đơn giản hóa function scoping cũng như từ khóa this. Arrow function hoạt động tương tự như Lambdas trong các tiếng nói khác ví như C # hay Python. Bằng phương pháp sử dụng arrow function, tất cả chúng ta tránh khỏi việc phải gõ từ khoá function, return và dấu ngoặc nhọn.

Cách dùng arrow function

Có nhiều cú pháp có thể dùng với arrow function. EcmaScript.org, MDN có liệt kê một list đầy đủ các cú pháp có thể được sử dụng. Ở đây tôi sẽ đề cập đến những cú pháp phổ quát nhất.

Trong trường hợp nhiều thông số

// (param1, param2, paramN) => expression // ES5 var multiply = function(x, y) { return x * y; }; // ES6 var multiply = (x, y) => { return x * y };

Ví dụ trên cho cùng một kết quả, tuy nhiên cú pháp với arrow function tốn ít dòng mã hơn. Trong trường hợp chỉ có một biểu thức thì không cần tới dấu ngoặc nhọn: Ví dụ trên có thể viết lại như sau:

var multiply = (x, y) => x * y ;

Trong trường hợp 1 thông số

Dấu ngoặc đơn là optional khi chỉ có một thông số

//ES5 var phraseSplitterEs5 = function phraseSplitter(phrase) { return phrase.split(‘ ‘); }; //ES6 var phraseSplitterEs6 = phrase => phrase.split(” “); console.log(phraseSplitterEs6(“ES6 Awesomeness”)); // [“ES6”, “Awesomeness”]

Trong trường hợp không có thông số

Xem Thêm : Mộ số cách để khôi phục dữ liệu bị mã hóa bởi virus tống tiền

Dấu ngoặc đơn là bắt buộc khi không có thông số.

//ES5 var docLogEs5 = function docLog() { console.log(document); }; //ES6 var docLogEs6 = () => { console.log(document); } docLogEs6(); // #document… <htmlvàgt; ….

Cú pháp với Object literal

Arrow function cũng tương tự như biểu thức function, có thể được sử dụng để trả về một object literal. Phần toàn thân của function cần được phủ quanh trong ngoặc tròn, để phân biệt giữa object và function block (cả hai đều sử dụng dấu ngoặc nhọn).

//ES5 var setNameIdsEs5 = function setNameIds(id, name) { return { id: id, name: name }; }; // ES6 var setNameIdsEs6 = (id, name) => ({ id: id, name: name }); (setNameIdsEs6 (4, “Kyle”)); // Object {id: 4, name: “Kyle”}

Khi nào thì nên sử dụng arrow function

Một usecase phổ quát áp dung arrow function là thao tác mảng, thường là khi sử dụng map hoặc reduce. Có một mảng như sau:

var smartPhones = [ { name: ‘iphone’, price: 649 }, { name: ‘Galaxy S6’, price: 576 }, { name: ‘Galaxy Note 5’, price: 489 } ];

Để lấy 1 mảng toàn tên các smart phones, ta thực hiện:

// ES5 console.log(smartPhones.map(function(smartPhone){ return smartPhone.price; }); // [649, 576, 489]

Với arrow function, có thể viết rút gọn lại thành

Xem Thêm : FOMO là gì? Kinh nghiệm đánh bại FOMO trong đầu tư chứng khoán

// ES6 console.log(smartPhones.map(smartPhone => smartPhone.price)); // [649, 576, 489]

Promises và Callbacks

Code mà sử dụng các callback asynchronous hay promise thường chứa nhiều từ khóa function và return do chaining nhiều lần:

// ES5 aAsync().then(function() { returnbAsync(); }).then(function() { returncAsync(); }).done(function() { finish(); });

Sử dụng arrow function:

// ES6 aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Lưu ý trong việc sử dụng arrow function

Cú pháp arrrow function là chức năng khá hữu ích trong ECMAScript, tuy nhiên ngoài những ưu điểm thì nó cũng đều có những hạn chế như việc nó khiến code của bạn tuy ngắn nhưng lại khó hiểu. Ở chỗ này là những lưu ý

this

từ khóa this hoạt động khác hoàn toàn trong arrow function. Các phương thức call (), apply (), và bind () sẽ không còn thay đổi giá trị của this trong arrow function. (Trong thực tế, giá trị của this bên trong một hàm đơn giản là không thể thay đổi – nó sẽ luôn là giá trị tương tự như khi hàm được gọi) Nếu bạn phải bind đến một giá trị khác, cần sử dụng function expression như thông thường.

Constructors

Arrow function không thể được sử dụng làm constructor như function. Nếu khởi tạo new với arrow function, nó sẽ throw ra lỗi. Arrow function không có tính chất prototype hay internal methods. Trong trường hợp đó nên dùng cú pháp tạo class của ES6.

Generators

Arrow function được thiết kế không thể sử dụng như thể generator. Thay vào đó ta có thể sử dụng từ khóa generators trong ES6.

Tốt nhất nên cân đối giữa việc dùng function và dùng arrow function như sau:

• Sử dụng function trong global scope trong Object.prototype properties
• Sử dụng class cho object constructors.
• Sử dụng => ở những chố sót lại

Nguồn tham khảo

1. Sitepoint