Cách sử dụng Arrow Function trong JavaScript
Javascript căn bản | by
Arrow Function là một tính năng quan trọng được giới thiệu trong ES6 (ECMAScript 2015), giúp viết các hàm JavaScript ngắn gọn và dễ đọc hơn. So với function thông thường, Arrow Function có cú pháp tối giản hơn, loại bỏ nhu cầu sử dụng từ khóa function, đồng thời tự động kế thừa this từ phạm vi chứa nó. Điều này giúp giải quyết nhiều vấn đề phổ biến khi làm việc với JavaScript, đặc biệt trong các callback function, phương thức mảng (map(), filter(), reduce()), hoặc trong lập trình bất đồng bộ với setTimeout(), setInterval().
Tuy nhiên, Arrow Function cũng có những hạn chế như không thể sử dụng làm constructor, không có đối tượng arguments riêng, và không thích hợp để làm phương thức của object. Vì vậy, để sử dụng hiệu quả, lập trình viên cần hiểu rõ cách hoạt động của Arrow Function và khi nào nên hoặc không nên sử dụng nó.
Trong bài viết này, mình sẽ cùng tìm hiểu cách khai báo và sử dụng Arrow Function, so sánh với function truyền thống, cũng như những tình huống phù hợp để áp dụng nó trong lập trình JavaScript.
Arrow Function trong JavaScript là gì?
.png)
Arrow Function là một kiểu khai báo hàm mới trong JavaScript, được giới thiệu từ ES6 (ECMAScript 2015), giúp viết hàm một cách ngắn gọn hơn. Thay vì sử dụng từ khóa function, Arrow Function sử dụng ký hiệu "=>" (mũi tên) để định nghĩa một hàm.
Cú pháp của Arrow Function:
const tenHam = (thamSo1, thamSo2) => {
// Thân hàm
return thamSo1 + thamSo2;
};
Hoặc nếu hàm chỉ có một biểu thức, ta có thể viết ngắn gọn:
const cong = (a, b) => a + b; console.log(cong(2, 3)); // Output: 5
Lưu ý: Nếu chỉ có một tham số, ta có thể bỏ dấu ngoặc tròn () như sau:
const inTen = ten => console.log("Tên của bạn là: " + ten);
inTen("Kiên"); // Output: Tên của bạn là: Kiên
Lịch sử ra đời của Arrow Function
Trước khi có Arrow Function, JavaScript chỉ có cách khai báo hàm bằng function. Tuy nhiên, việc sử dụng function có một số vấn đề, đặc biệt là về phạm vi của this.
Ví dụ, khi sử dụng setTimeout() hoặc phương thức mảng như map(), filter(), đôi khi this không hoạt động như mong đợi:
function Person(name) {
this.name = name;
setTimeout(function() {
console.log("Tên là: " + this.name);
}, 1000);
}
const p = new Person("Kiên");
// Output: "Tên là: undefined" (do this không trỏ đến Person)
Trong ES6, Arrow Function được giới thiệu nhằm giải quyết vấn đề trên bằng cách kế thừa this từ phạm vi cha thay vì tạo một this mới:
function Person(name) {
this.name = name;
setTimeout(() => {
console.log("Tên là: " + this.name);
}, 1000);
}
const p = new Person("Kiên");
// Output: "Tên là: Kiên" (do Arrow Function kế thừa this từ Person)
Ưu điểm của Arrow Function so với Function thông thường
Arrow Function mang lại nhiều lợi ích khi lập trình với JavaScript, đặc biệt trong các tình huống cần xử lý hàm ngắn gọn và không cần thay đổi phạm vi this.
Cú pháp ngắn gọn hơn
Arrow Function giúp loại bỏ từ khóa function, return (nếu chỉ có một dòng lệnh) và {} (nếu chỉ có một biểu thức).
Ví dụ:
// Hàm thông thường
function binhPhuong(x) {
return x * x;
}
// Viết lại bằng Arrow Function
const binhPhuong = x => x * x;
console.log(binhPhuong(4)); // Output: 16
Không tạo this riêng, kế thừa this từ phạm vi cha
Arrow Function không có this riêng mà sẽ kế thừa this từ phạm vi chứa nó. Điều này giúp tránh lỗi khi this bị thay đổi không mong muốn.
Ví dụ với setTimeout():
// Dùng function thông thường (lỗi this)
function User(name) {
this.name = name;
setTimeout(function() {
console.log(this.name);
}, 1000);
}
const user1 = new User("Nam"); // Output: undefined
// Dùng Arrow Function (hoạt động đúng)
function User(name) {
this.name = name;
setTimeout(() => {
console.log(this.name);
}, 1000);
}
const user2 = new User("Nam"); // Output: "Nam"
Không có đối tượng arguments
Arrow Function không có đối tượng arguments, điều này giúp tránh lỗi không mong muốn khi làm việc với các hàm nhận nhiều tham số.
Ví dụ, trong hàm thông thường:
function showArguments() {
console.log(arguments);
}
showArguments(1, 2, 3);
// Output: [Arguments] { '0': 1, '1': 2, '2': 3 }
Nhưng nếu dùng Arrow Function:
const showArguments = () => {
console.log(arguments);
};
showArguments(1, 2, 3);
// Lỗi: arguments is not defined
