Arrow Function trong ES6 – khi nào nên và không nên dùng?

Arrow Function là một trong những tính năng đặc biệt của ES6, nhưng vẫn chưa phổ biến với nhiều người. Bài viết này sẽ trình bày một số đặc điểm của Arrow Function và khi nào bạn nên hoặc không nên sử dụng nó.

Arrow Function trong ES6 có gì hay?

Arrow Function nghĩa là “hàm mũi tên”, hay còn gọi là “hàm mũi tên béo”. Đây được xem là một cách mới để viết hàm súc tích hơn.

Chẳng hạn, dưới đây là một hàm được viết theo cú pháp của ES5:

Minh họa về hàm thông thường trong ES5.
Minh họa về hàm thông thường trong ES5.

Bây giờ, vẫn là hàm tương tự nhưng được viết theo dạng hàm mũi tên của ES6:

Arrow Function trong ES6 khiến hàm trở nên ngắn gọn hơn.
Arrow Function trong ES6 khiến hàm trở nên ngắn gọn hơn.

So sánh giữa hai hàm thì ta thấy hàm của ES6 ngắn hơn hẳn. Trong trường hợp này, ta có thể bỏ các dấu ngoặc nhọn “{}” và câu lệnh “return” mà nội dung hàm không đổi.

Đặc điểm của Arrow Function

Hàm mũi tên có những đặc điểm khác với các hàm ES5 thông thường, chẳng hạn như:

1. Cú pháp đa dạng

Có rất nhiều cách để thể hiện hàm mũi tên. Chẳng hạn, bạn có thể viết hàm mà không cần tham số, có một hoặc nhiều tham số, nhưng nội dung không đổi.

Ví dụ, với cách viết hàm mũi tên thì “() => 42” và “_ => 42” đều có ý nghĩa như nhau.

2. Cú pháp ẩn danh

Đặc điểm quan trọng của các hàm mũi tên là chúng ẩn danh, nghĩa là ta không cần đặt tên cho chúng. Tuy nhiên, sự ẩn danh này có thể tạo ra một số vấn đề sau:

  • Khó gỡ lỗi hơn. Khi gặp lỗi, bạn khó thể tìm dấu vết với hàm mũi tên hoặc số dòng chính xác xảy ra lỗi.
  • Không tự tham chiếu (self-referencing). Điều này sẽ gây bất lợi nếu bạn muốn hàm tự tham chiếu (chẳng hạn như trong trường hợp đệ quy).

3. Không bị ràng buộc bởi “this”

Trong các cách viết hàm truyền thống, “this” là một từ khóa rất quen thuộc. Tùy vào ngữ cảnh (context), ta sẽ dùng “this” để liên kết với các giá trị khác nhau của một hàm.

Trong ES5, bạn cần phải dùng “.bind(this)” để truyền “this” vào ngữ cảnh của hàm. Tuy nhiên, trong ES6 bạn không thể ràng buộc hàm mũi tên với từ khóa “this”. Chính vì vậy, từ khóa “this” chỉ có giá trị sử dụng trong phạm vi mà nó được xác định.

Arrow Function đại diện cho cách viết hàm thế hệ mới (Nguồn: Unsplash.com).
Arrow Function đại diện cho cách viết hàm thế hệ mới (Nguồn: Unsplash.com).

Khi nào bạn nên và không nên dùng Arrow Function?

Bạn cần phải hiểu rằng trong một vài trường hợp Hàm mũi tên không thể thay thế các hàm thông thường. Dưới đây là một số trường hợp mà bạn không nên dùng chúng:

1. Phương pháp lập trình hướng đối tượng

Bạn cần chú ý khi dùng hàm mũi tên với phương pháp lập trình hướng đối tượng. Lý do là vì cách sử dụng từ khóa “this” đã bị thay đổi. “This” không ràng buộc với hàm mũi tên như những hàm thông thường.

2. Hàm gọi lại với ngữ cảnh động

Nếu bạn muốn ngữ cảnh của mình là động, thì hàm mũi tên không phải là lựa chọn tốt.

Chúng ta hãy xem ví dụ ở dưới đây:

Trong ví dụ trên, nếu ta nhấp vào nút thì sẽ nhận được lỗi TypeError. Lý do là vì “this” không ràng buộc với nút. Nó chỉ ràng buộc trong phạm vi mà nó được định nghĩa.

3. Khi nó làm cho mã khó đọc hơn

Sự đa dạng trong cú pháp của hàm mũi tên cũng có thể là một điểm bất lợi. Với những hàm thông thường, người dùng dễ nhận ra mục đích của hàm. Với hàm mũi tên, bạn khó có thể giải mã và hiểu được hàm ngay lập tức. Lý do là vì có quá nhiều cách viết hàm khác nhau.

Khi nào bạn nên dùng Arrow Function?

Thực tế cho thấy, hàm mũi tên dùng tốt nhất trong những trường hợp từ khóa “this” chỉ ràng buộc với ngữ cảnh, chứ không ràng buộc vào hàm.

Mặc dù hàm mũi tên là ẩn danh, nhưng chúng nên được sử dụng trong những phương thức như là “map” và “reduce”. Lý do là vì chúng sẽ làm cho mã của bạn dễ đọc hơn. Chỉ cần mỗi ưu điểm này của hàm mũi tên cũng đã đủ đánh bật các hạn chế còn lại.

Tóm lại, giống như hàm thông thường, hàm mũi tên cũng có ưu và nhược điểm riêng. Hy vọng qua bài viết này các bạn có thể hiểu thêm được về Arrow Function trong ES6.


Tham khảo: Freecodecamp.org

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

Son Phuoc
Son Phuoc
February 06, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Callback Function là gì? Tổng quan về Callback Function

Callback Function là gì? Tổng quan về Callback Function

Nếu bạn đã học lập trình, chắc hẳn bạn biết thế nào là function. Nhưng bạn đã nghe đến Callback Function bao giờ chưa? Callback Function là một phần quan trọng của JavaScript. Một khi bạn hiểu rõ về , bạn sẽ thành thạo JavaScript hơn rất nhiều.  Mục lục1. Callback Function là gì?2. Tại […]
Softmax Function là gì? Tổng quan về Softmax Function

Softmax Function là gì? Tổng quan về Softmax Function

Softmax Function là một khái niệm toán học. Nó được sử dụng phổ biến trong lĩnh vực công nghệ thông tin, cụ thể là Machine Learning (Học máy). Hãy cùng Got It tìm hiểu về Softmax Function nhé. Mục lục1. Khái niệm Softmax Function2. Lịch sử hàm Softmax3. Tính chất của hàm Softmax4. Lợi ích […]
Tìm hiểu Sigmoid Function và lịch sử hình thành của nó

Tìm hiểu Sigmoid Function và lịch sử hình thành của nó

Sigmoid Function là một khái niệm quen thuộc trong Deep Learning. Bài viết sẽ trình bày sơ bộ về Sigmoid Function và lịch sử hình thành của nó. Mục lụcSigmoid Function là gì?Sigmoid Function dùng để làm gì?Lịch sử của Sigmoid FunctionHàm Sigmoid trước năm 1975Hàm Sigmoid sau năm 1975 Sigmoid Function là gì? Sigmoid […]
Function là gì? Những kiến thức cơ bản về Function trong lập trình

Function là gì? Những kiến thức cơ bản về Function trong lập trình

Bước vào thế giới lập trình, hẳn ai cũng sẽ thắc mắc Function là gì? Bài viết này sẽ giúp bạn làm rõ khái niệm này, đồng thời trình bày một số loại hàm cơ bản. Mục lụcFunction là gì?Các loại hàm trong lập trình1. Hàm Void2. Hàm yêu cầu giá trị đầu vào3. Hàm […]
Arrow Function trong ES6 – khi nào nên và không nên dùng?

Arrow Function trong ES6 – khi nào nên và không nên dùng?

Arrow Function là một trong những tính năng đặc biệt của ES6, nhưng vẫn chưa phổ biến với nhiều người. Bài viết này sẽ trình bày một số đặc điểm của Arrow Function và khi nào bạn nên hoặc không nên sử dụng nó. Mục lụcArrow Function trong ES6 có gì hay?Đặc điểm của Arrow […]
Inverse Function là gì? Tổng quan về hàm ngược

Inverse Function là gì? Tổng quan về hàm ngược

Inverse Function là một khái niệm trong toán học. Nó được sử dụng khá phổ biến trong lĩnh vực công nghệ thông tin, cụ thể là lập trình. Hôm nay hãy cùng Got It tìm hiểu về Inverse Function nhé. Mục lục1. Khái niệm Inverse Function2. Ví dụ về hàm ngược3. Tính chất của Inverse […]