Arrow Function là một trong những tính năng rất hữu ích của ES6. Tuy nhiên không phải ai cũng hiểu rõ cách sử dụng hàm này. Vì vậy trong bài viết này, topviecit.vn sẽ chia sẻ tới bạn những thông tin về Arrow Function là gì và cách phân biệt Arrow Function và Function.
Arrow Function là gì?
Để có thể phân biệt rõ ràng Arrow Function và Function, bạn cần hiểu rõ về hai khái niệm Arrow Function là gì và Function là gì. Đây là hai hàm thường xuyên được sử dụng trong quá trình code module của lập trình viên. Tuy nhiên thực tế đây là 2 hàm khác nhau và được sử dụng cho nhiều trường hợp khác nhau. Trong đó:
Function: Hay còn gọi là Regular Function, là việc khai báo hàm thông thường. Hàm thông thường là những hàm bạn chỉ cần khai báo 1 lần và có thể gọi sử dụng ở nhiều nơi khác.
Arrow Function: Hay còn gọi là hàm mũi tên. Arrow Function là tính năng mới xuất hiện trong phiên bản ES6. Sử dụng hàm này sẽ giúp code ngắn gọn và súc tích hơn.
>>>Xem thêm: Function là gì? Bí mật về Function mà dân lập trình cần biết
Phân biệt Arrow Function và Regular Function
Tuy cả 2 đều là funtion nhưng Arrow Function và Regular Function có sự khác biệt nhất định. Những điểm khác biệt giữa Function và Arrow Function là gì cụ thể như sau:
Cú pháp thành lập
Arrow Function sử dụng ký tự => trong cú pháp. Ví dụ:
hero = () => { console.log(‘hero’) } // hero()
Còn Regular Function có cú pháp như sau:
function hero(){ console.log(‘hero’) } // hero()
Cú pháp cho hàm có tham số:
hero = age => { console.log(‘hero ‘, age) }
Từ những ví dụ trên có thể thấy cú pháp của Arrow Function thường ngắn gọn hơn so với Regular Function. Ngoài ra, sự khác biệt trong cú pháp giữa 2 hàm này nằm ở từ khóa return.
Với Arrow Function, ta có thể bỏ qua từ khóa này. Ví dụ:
double = a => a * 2
Còn với Regular Function thì không. Ví dụ:
function double(q){
return a * 2
}
Tìm hiểu thêm: Cost Function Là Gì? Kiến Thức Cho Người Mới Vào Nghề
Giá trị của từ khóa ‘this’
‘This’ là một từ khóa rất quan trọng bởi nó chứa đựng reference. Đây là từ khóa dùng để trỏ tới object gọi hàm đó. Tùy thuộc vào điều kiện lập trình mà reference có thể là bất cứ object nào. Vậy sự khác biệt của ‘this’ giữa Regular Function và Arrow Function là gì?
Đối với Regular Function, giá trị của ‘this’ thay đổi theo ngữ cảnh. Nó có thể là global object hoặc undefeined. Ví dụ:
const myObject = {
method() {
console.log(this);
}
};
myObject.method();
// => “myObject”
Còn với Arrow Function, giá trị của ‘this’ sẽ bằng giá trị của function ở ngoài. Ví dụ:
const myObject = {
myMethod(items) {
console.log(this); // “myObject”
const callback = () => {
console.log(this); // “myObject”
};
items.forEach(callback);
}
};
myObject.myMethod([1, 2, 3]);
>>>Xem thêm: Loss Function Là Gì? Tìm Hiểu Chi Tiết Về Loss Function
Biến argument
Tương tự như giá trị của ‘this’, Arrow Function không bind biến argument. Thông thường, argument thường được dùng cho những Function không thể xác định số lượng tham số. Ví dụ:
function sum() {
return Array.from(arguments).reduce(
(accumulator, currentValue) => accumulator + currentValue
);
}
console.log(sum(0, 2)); // => 2
console.log(sum(0, 2, 4)); // => 6
console.log(sum(0, 2, 4, 6)); // => 12
Còn nếu bạn sử dụng argument cho hàm Arrow Function có thể dẫn tới kết quả lỗi. Bởi vì biến này đã bị blind và không thể định nghĩa. Ví dụ:
let sum = () => {
return Array.from(arguments).reduce(
(accumulator, currentValue) => accumulator + currentValue
);
}
console.log(sum(0, 2));
// Uncaught ReferenceError: arguments is not defined
Hàm constructor
Regular Function tạo ra object theo cách sau:
function Bike(color) {
this.color = color;
}
const yellowBike = new Bike(‘yellow’);
yellowBike instanceof Bike; // => true
Còn Arrow Function do không có vùng tự trị riêng (execution context) nên không thể dùng như một constructor. Ví dụ
const Bike = (color) => {
this.color = color;
};
const yellowBike = new Bike(‘yellow’);
// => TypeError: Bike is not a constructor
Thuộc tính Prototype
Trong Java, tất cả mọi đối tượng đều sở hữu và kế thừa thuộc tính prototype. Tuy nhiên hàm Arrow Function không thể được dùng làm constructor nên hàm này không có thuộc tính prototype. Ví dụ:
let Hi = () => {};
console.log(Hi.prototype); // undefined
Tóm lại, những điểm khác biệt giữa Regular Function và Arrow Function là gì có thể kể tới như sau:
- Arrow Function giúp code trở nên ngắn gọn hơn so với hàm Function thông thường:
- Arrow Function có thể dùng chung với map, filter, reducer,…
- Arrow Function không có bind và không định nghĩa giá trị của từ khóa ‘this’.
- Hàm này không có thuộc tính prototype.
- Không nên sử dụng Arrow Function là method của object. Thay vào đó bạn hãy sử dụng Function thông thường.
Tìm hiểu thêm: Lập Trình Viên Java Là Gì? Mô Tả Công Việc Và Mức Lương Mới Nhất
Khi nào nên sử dụng Regular Function và Arrow Function?
Từ những ví dụ trên có thể thấy 2 hàm Regular Function và Arrow Function có sự khác biệt nhất định. Vậy câu hỏi đặt ra là nên sử dụng những hàm này trong trường hợp nào?
Với Arrow Function, bạn nên sử dụng nó khi làm việc với callback function như map, filter, reducer,… Còn Regular Function lại phát huy hiệu quả tốt hơn khi làm việc với object. Hai hàm này không thể thay thế nhau mà hãy sử dụng chúng hợp lý để phát huy hiệu quả cao nhất.
Trên đây là những thông tin mà bạn nên biết về hàm Arrow Function mới xuất hiện trong ES6. Hy vọng qua bài viết này bạn đã hiểu Arrow Function là gì và biết cách phân biệt hàm này với Function thông thường. Và đừng quên truy cập ngay vào TopCV để cập nhật việc làm IT liến quan đến Arrow function mỗi ngày!
Hình ảnh: Sưu tầm
