---
description: https://viblo.asia/p/es6-arrow-functions-QpmleLr9Zrd
---

# ES6 Arrow Functions (ok)



## ES6 Arrow Functions

[es6](https://viblo.asia/tags/es6)[JavaScript](https://viblo.asia/tags/javascript)

## Mở đầu <a href="#mo-dau-0" id="mo-dau-0"></a>

Trong ES6, arrow functions là một cú pháp mới 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 function (function scope). Trong bài viết này, mình sẽ giới thiệu chi tiết về arrow function, cách sử dụng chúng, các cú pháp phổ biến, trường hợp sử dụng phổ biến, cũng như ưu/nhược điểm của việc sử dụng chúng.

### Arrow function là gì <a href="#arrow-function-la-gi-1" id="arrow-function-la-gi-1"></a>

Arrow function - còn được gọi là "fat arrow", là 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 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 ngôn ngữ khác như C # hay Python. Bằng cách sử dụng arrow function, chúng ta tránh được việc phải gõ từ khoá `function`, `return` và dấu ngoặc nhọn.

### Cách dùng arrow function <a href="#cach-dung-arrow-function-2" id="cach-dung-arrow-function-2"></a>

Có khá nhiều cú pháp có thể dùng với arrow function. [EcmaScript.org](http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax), [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) có liệt kê một danh sách đầy đủ các cú pháp có thể được dùng. Ở đây tôi sẽ đề cập đến những cú pháp phổ biến nhất.

#### Trong trường hợp nhiều tham số <a href="#trong-truong-hop-nhieu-tham-so-3" id="trong-truong-hop-nhieu-tham-so-3"></a>

```
// (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 tham số <a href="#trong-truong-hop-1-tham-so-4" id="trong-truong-hop-1-tham-so-4"></a>

Dấu ngoặc đơn là optional khi chỉ có một tham 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ó tham số <a href="#trong-truong-hop-khong-co-tham-so-5" id="trong-truong-hop-khong-co-tham-so-5"></a>

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

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

#### Cú pháp với Object literal <a href="#cu-phap-voi-object-literal-6" id="cu-phap-voi-object-literal-6"></a>

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 body của function cần được bao bọc 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 <a href="#khi-nao-thi-nen-su-dung-arrow-function-7" id="khi-nao-thi-nen-su-dung-arrow-function-7"></a>

Một usecase phổ biến áp dung arrow function là thao tác mảng, thông thường là khi dùng `map` hoặc `reduce`. Có 1 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

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

#### Promises và Callbacks <a href="#promises-va-callbacks-8" id="promises-va-callbacks-8"></a>

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 <a href="#luu-y-trong-viec-su-dung-arrow-function-9" id="luu-y-trong-viec-su-dung-arrow-function-9"></a>

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 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. Dưới đây là những lưu ý

#### `this` <a href="#this-10" id="this-10"></a>

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 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 cần bind đến một giá trị khác, cần sử dụng function expression như bình thường.

#### Constructors <a href="#constructors-11" id="constructors-11"></a>

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ó thuộc tính `prototype` hay internal methods. Trong trường hợp đó nên dùng cú pháp tạo class của ES6.

#### Generators <a href="#generators-12" id="generators-12"></a>

Arrow function được thiết kế không thể sử dụng như là 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ố còn lại

#### Nguồn tham khảo <a href="#nguon-tham-khao-13" id="nguon-tham-khao-13"></a>

1. [Sitepoint](https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/)
