Arrow function javascript là gì
Arrow function là một trong những tính năng mới rất hay của ES6. Việc sử dụng đúng cách arrow function giúp code trở nên ngắn gọn và dễ hiểu hơn. Tuy nhiên, arrow function không thể thay thế hoàn toàn function được. Show
Vì vậy, bài viết này sẽ giúp bạn phân biệt arrow function và function trong JavaScript. Qua đó, bạn biết cách sử dụng chúng sao cho phù hợp nhất với từng hoàn cảnh. Giống nhauArrow function và function đều là function. Khác nhau cơ bảnCú phápArrow function sử dụng kí tự
Function sử
dụng từ khoá
Arrow function thường ngắn gọn hơn functionVới hàm có 1 tham số, arrow function có thể bỏ qua cặp dấu ngoặc đơn.
Tương đương với function:
Ngoài ra, arrow function cũng có thể bỏ qua từ khoá return.
Tương đương với function:
Ví dụ sử dụng arrow function với các higher-order functions như: forEach, map, filter,... ► Sử dụng
► Sử dụng
Arrow function không bind thisArrow function không định nghĩa giá trị Ví dụ sử dụng function:
Trong chế độ none-strict, function Để đoạn code trên hoạt động theo đúng mong muốn thì bạn phải sửa lại như sau:
Ví dụ sử dụng arrow function:
Ngược lại với function, arrow function không định nghĩa lại Do đó, giá trị của Arrow function không bind argumentsTương tự như đối với Đối tượng arguments đặc biệt hữu ích đối với những function không xác định trước số lượng tham số. Ví dụ hàm tính tổng tất cả giá trị các tham số truyền vào:
Đối với arrow function, việc sử dụng
Tuy nhiên, bạn vẫn có thể sử dụng rest parameters để thay thế cho
Arrow function không phù hợp làm phương thức cho objectChính vì arrow function không định nghĩa giá trị
Vì vậy, nếu muốn định nghĩa phương thức cho object thì bạn nên sử dụng function. Arrow function không thể sử dụng làm hàm constructorTrước khi ES6 ra đời, bạn có thể sử dụng function làm hàm khởi tạo cho object.
Nếu thay đoạn code trên bằng arrow function, bạn sẽ bị lỗi: TypeError: Dog is not a constructor.
Arrow function không có thuộc tính prototypeMọi đối tượng trong JavaScript đều có thuộc tính Tuy nhiên, nếu arrow function đã không thể làm constructor cho object thì điều này cũng hoàn toàn hợp lý.
Arrow function không được hoistedĐể hiểu thêm về hoisting bạn có thể tham khảo thêm tại bài viết: Understanding Hoisting in JavaScript. Về cơ bản, hoisting được hiểu là biến và hàm được đưa lên đầu của phạm vi biến, hàm trước khi đoạn code đó được thực hiện. Arrow function không được hoisted. Nghĩa là bạn phải định nghĩa arrow function trước khi sử dụng nó.
Ngược lại, function declaration được hoisted nên bạn có thể gọi hàm trước khi định nghĩa nó.
Tổng kếtTrên đây là một số điểm giúp bạn phân biệt arrow function và function trong JavaScript. Để tiện theo dõi, mình tóm tắt lại các đặc điểm khác nhau của chúng như sau:
Tham khảo:
★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: |