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ục
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:
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:
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.
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
