Mở đầu
Nếu bạn đã từng vọc vạch về js chắc hẳn các bạ cũng đã từng thấy qua về arrow function kiểu như thế này => () và bạn tự hỏi nó là cái gì?
Nhưng thực sự thì arrow function hoạt động như thế nào? Nó có tác dụng gì? Tại sao phải thay đổi từ function bình thường qua sử dụng nó? Và điều quan trọng hơn là chúng ta có thể bắt đầu sử dụng nó như thế nào?
Để trả lời những câu hỏi trên, hãy khoan nói về nó, chúng ta sẽ coi nó như là một cái gì đó mới mà chúng ta chưa từng sử dụng trong js.
Arrow function là gì?
Một arrow function là một hàm biểu diễn chính xác của anonymous function (hàm không tên). Nó là một function không được khai báo độc lập và không phụ thuộc vào chính nó (this). Có nhiều hàm biểu thức áp dụng tốt cho hàm không tên ( không có tên phương thức), nhưng chúng lại không thể sử dụng như một hàm khởi tạo. Arrow function có biểu thức ngắn gọn hơn, đơn giản hơn và từ khóa this. Khi sử dụng arrow function chúng ta sẽ giảm bớt được viết thêm từ khóa funtion và từ khóa return và dấu ngoặc nhọn.
Cú pháp
Cách hàm ẩn danh được sử dụng phổ biến nhất khi một phương thức chấp nhận một hàm là một tham số và hàm đó không được sử dụng nhiều lần.
Cú pháp căn bản:
1 2 3 4 5 6 7 | <span class="token keyword">function</span> <span class="token function">showFullname</span><span class="token punctuation">(</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">showFullName</span><span class="token punctuation">(</span><span class="token string">'Nguyen'</span><span class="token punctuation">,</span> <span class="token string">'Hai'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Nguyen Hai</span> |
Dùng arrow function:
1 2 3 4 5 6 7 | <span class="token keyword">let</span> <span class="token function-variable function">fullname</span> <span class="token operator">=</span> <span class="token punctuation">(</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span> <span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fullname</span><span class="token punctuation">(</span><span class="token string">'Nguyen'</span><span class="token punctuation">,</span> <span class="token string">'Hai'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Nguyen Hai</span> |
So sánh 2 đoạn code trên thì chúng ta có thể thấy cùng ra 1 kết quả nhưng cách thứ 2 sẽ ngắn hơn.
- Nếu trong trường hợp có 1 tham số ta sử dụng như sau:
1 2 3 4 5 | <span class="token keyword">let</span> <span class="token function-variable function">fullname</span> <span class="token operator">=</span> fullname <span class="token operator">=></span> <span class="token punctuation">(</span>fullname<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fullname</span><span class="token punctuation">(</span><span class="token string">'Nguyen Van A'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Nguyen Van A</span> |
- Nếu không có tham số ta ko cần truyền vào gì cả.
1 2 3 4 5 | <span class="token keyword">let</span> <span class="token function-variable function">fullname</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token string">'Nguyen Van A'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fullname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Nguyen Van A</span> |
- Chú ý nếu ta cần return ngay thì ta sẽ dùng cặp ngoặc đơn () luôn. Còn khi nào chúng ta cần sử lý logic xong mới return thì ta sẽ cần sử dụng cặp dấu ngoặc nhọn {}.Ví dụ:
1 2 3 4 5 6 7 | <span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token punctuation">(</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> firstName<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">hello</span><span class="token punctuation">(</span><span class="token string">'Nguyen'</span><span class="token punctuation">,</span> <span class="token string">'VAN A'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// nguyen van a</span> |
Cặp dấu ngoặc đơn sẽ cần chúng ta return luôn, không được xử lý gì trước đó cả.
1 2 3 4 5 6 | <span class="token comment">// Cú pháp sai</span> <span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token punctuation">(</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> firstName<span class="token punctuation">.</span><span class="token function">toLowercase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">.</span><span class="token function">toLowercase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">)</span> |
- Một vài lưu ý khá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.123console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Cú pháp sai</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Cú pháp đúng</span>
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à.123<span class="token keyword">var</span> <span class="token function-variable function">x</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span> - 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.1234567891011121314151617181920<span class="token keyword">const</span> func1 <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token comment">// Sai</span><span class="token operator">=></span> <span class="token punctuation">{</span><span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token function-variable function">func2</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token comment">// Đúng</span><span class="token punctuation">{</span><span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token function-variable function">func3</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// OK</span><span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">const</span> func4 <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token comment">// Sai</span><span class="token operator">=></span> x <span class="token operator">+</span> y<span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token function-variable function">func5</span> <span class="token operator">=</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token comment">// Đúng</span>x <span class="token operator">+</span> y<span class="token punctuation">;</span> - 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:1234567<span class="token keyword">const</span> func6 <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token comment">// Đúng</span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
- Đóng arrow function
- Khắc phục nhược điểm với this trong closure function:
Nếu bạn đã từng đọc qua bài viết hàm bind trong javascript thì từ version ES5 trở về trước sẽ có nhược điểm với đối tượng this đó là phạm vi hoạt động, và trong ES5 có sử dụng hàm bind để khắc phục. Vấn đề này được khắc phục hoàn toàn trong ES6 bằng cách sử dụng hàm arrow function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">:</span> <span class="token string">"Nguyen"</span><span class="token punctuation">,</span> lastName<span class="token punctuation">:</span> <span class="token string">"Van"</span><span class="token punctuation">,</span> showFullName <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>callbackFunction<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">callbackFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> render <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showFullName</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this chính là person</span> <span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// phải sử dụng hàm bind thì đối tượng this mới chính là person</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> person<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Nguyen Van</span> |
Còn trong ES6 sẽ được viết như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">:</span> <span class="token string">"Nguyen"</span><span class="token punctuation">,</span> lastName<span class="token punctuation">:</span> <span class="token string">"Van"</span><span class="token punctuation">,</span> showFullName <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>callbackFunction<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">callbackFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> render <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">showFullName</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this chính là person</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> person<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Nguyen Van</span> |
Cú pháp này sẽ được sử dụng nhiều khi bạn học reactjs. Chú ý nhé.
Lưu ý:
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.