Arrow Function ES6

Arrow Function trong ES6 là một cú pháp được sử dụng để viết các hàm trong JavaScript. Nó giúp tiết kiệm thời gian phát triển và đơn giản hóa phạm vi của function (function scope). Vậy nên trong bài viết này chúng ta hãy cùng tìm hiểu cách sử dụng loại function này nhé.

Arrow Function là gì ?

• Trước tiên để có thể sử dụng được nó thì chúng ta cần phải biết nó là gì.
• Arrow function – hay vẫn được gọi là “fat arrow”, là một cú pháp được mượn từ CoffeeScript (một ngôn ngữ chuyển tiếp), cú pháp này là cách ngắn gọn hơn dùng để viết function.
• Ở đây chúng ta sử dụng kí tự =>, vì vậy trông nó giống như một mũi tên “béo”. Arrow Function.
• Là một hàm vô danh.
• Giúp code trở nên ngắn gọn hơn, đơn giản hơn.
• Tương tự như hàm lambda bên Java.

Làm thế nào để sử dụng được Arrow Function ?

Có khá nhiều cú pháp để sử dụng Arrow Fucntion và dưới đây là một số cách.

Sử dung với nhiều tham số

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

Trường hợp có 1 tham số

Khi chỉ có 1 tham số chúng ta thể thêm dấu ngoặc đơn hoặc là không.

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

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

Với trường hợp không có tham số thì chúng ta bắt buộc phải có ngoặc đơn

//ES5
var docLogEs5 = function docLog() {
console.log(document);
};
//ES6
var docLogEs6 = () => { console.log(document); }
docLogEs6();

Khi nào nên sử dụng nó ?

• Chúng ta nên sử dụng nó khi thao tác với mảng, khi sử dụng map và reduce.
  • Giả sử ta có 1 mảng như sau:

var smartPhones = [
{ name: 'iphone 12', price: 6490000 },
{ name: 'SamSung Galaxy S10', price: 10000076 },
];

• • Để lấy ra giá trị của mảng trên chúng ta sử dụng câu lệnh như sau:

console.log(smartPhones.map(smartPhone => smartPhone.price));

• Khi sử dụng Promise: 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();
});
// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Đọc thêm bài viết khác: Tại sao nên sử dụng WordPress ?