[Javascript] – Phần 50: JavaScript Arrow Function

Arrow Function được giới thiệu trong ES6 và là một cách viết hàm ngắn gọn hơn so với Regular Function.

Ví dụ:

Regular Function:

let myFunction = function(a, b) {
  return a * b;
};

Arrow Function:

let myFunction = (a, b) => a * b;

Những điểm khác biệt giữa Regular Function và Arrow Function:

• Cú pháp ngắn gọn hơn: Arrow Function có cú pháp ngắn gọn hơn so với Regular Function, đặc biệt là khi hàm chỉ có một biểu thức.
• Trực tiếp trả về giá trị: Nếu hàm chỉ có một biểu thức, bạn có thể bỏ qua dấu ngoặc và từ khóa return.
• Xử lý từ khóa this khác: Trong Arrow Function, từ khóa this luôn tham chiếu đến đối tượng đã định nghĩa hàm, không giống như Regular Function có thể thay đổi tùy thuộc vào cách gọi hàm.

Ví dụ về this:

Regular Function:

const person = {
  name: "John Doe",
  sayHello: function() {
    console.log(this.name);
  }
};

person.sayHello(); // Output: John Doe

const btn = document.getElementById("myBtn");
btn.addEventListener("click", person.sayHello); // Output: Window

Arrow Function:

const person = {
  name: "John Doe",
  sayHello: () => console.log(this.name)
};

person.sayHello(); // Output: John Doe

const btn = document.getElementById("myBtn");
btn.addEventListener("click", person.sayHello); // Output: John Doe

Ưu điểm của Arrow Function:

• Code ngắn gọn và dễ đọc hơn.
• Giúp code cleaner và dễ maintain hơn.
• Thích hợp khi truyền hàm callback.

Nhược điểm của Arrow Function:

• Không thể sử dụng từ khóa arguments.
• Không thể dùng làm constructor.
• Không thể bind this.

Hỗ trợ trình duyệt:

Hầu hết các trình duyệt hiện tại đều hỗ trợ Arrow Function. Bạn có thể tham khảo bảng dưới đây để biết chi tiết:

Kết luận.

Arrow Function là một tính năng hữu ích giúp code JavaScript cleaner và dễ đọc hơn. Tuy nhiên, bạn cần lưu ý những điểm khác biệt giữa Arrow Function và Regular Function để sử dụng chúng một cách hiệu quả.