Hàm Mũi Tên Arrow Function Trong JavaScript

Hàm mũi tên (arrow function) là một cú pháp ngắn gọn để viết hàm trong JavaScript, được giới thiệu trong ES6 (ECMAScript 2015). Hàm mũi tên không có this, arguments, super, hoặc new.target của riêng nó. Thay vào đó, nó kế thừa this từ phạm vi bao quanh tại thời điểm nó được định nghĩa.

Cú Pháp Cơ Bản

const functionName = (parameters) => {
  // function body
};

Ví Dụ Cụ Thể

• Hàm mũi tên đơn giản:

  const add = (a, b) => {
    return a + b;
  };
  
  console.log(add(2, 3)); // Output: 5
  

• Nếu hàm chỉ có một biểu thức, bạn có thể bỏ return và dấu ngoặc nhọn:

  const add = (a, b) => a + b;
  
  console.log(add(2, 3)); // Output: 5
  

• Nếu hàm chỉ có một tham số, bạn có thể bỏ dấu ngoặc đơn quanh tham số:

  const square = x => x * x;
  
  console.log(square(4)); // Output: 16
  

• Nếu hàm không có tham số, bạn sử dụng dấu ngoặc đơn trống:

  const greet = () => console.log("Hello!");
  
  greet(); // Output: Hello!
  

Đặc Điểm Của Hàm Mũi Tên

1. Không Có this Riêng:

   Hàm mũi tên không có this riêng. Thay vào đó, this bên trong hàm mũi tên là this của phạm vi bao quanh tại thời điểm hàm được định nghĩa. Điều này khác với các hàm thông thường, nơi this phụ thuộc vào cách hàm được gọi.

   function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++; // `this` trỏ đến đối tượng Person
     }, 1000);
   }
   
   const p = new Person();
   setTimeout(() => console.log(p.age), 3100); // Output: 3 (sau 3 giây)
   

2. Không Có arguments:

   Hàm mũi tên không có đối tượng arguments riêng. Thay vào đó, bạn có thể sử dụng cú pháp rest (...) để truy cập các tham số.

   const add = (...args) => {
     return args.reduce((sum, current) => sum + current, 0);
   };
   
   console.log(add(1, 2, 3, 4)); // Output: 10
   

3. Không Dùng Làm Hàm Tạo (Constructor):

   Hàm mũi tên không thể được sử dụng như hàm tạo (constructor) và sẽ ném lỗi nếu bạn cố gắng sử dụng new với chúng.

   const Foo = () => {};
   // const foo = new Foo(); // Error: Foo is not a constructor
   

4. Không Có prototype:

   Hàm mũi tên không có thuộc tính prototype.

So Sánh Với Hàm Thông Thường

• Hàm thông thường:

  function multiply(a, b) {
    return a * b;
  }
  
  console.log(multiply(2, 3)); // Output: 6
  

• Hàm mũi tên:

  const multiply = (a, b) => a * b;
  
  console.log(multiply(2, 3)); // Output: 6
  

Tổng Kết

Hàm mũi tên là một cú pháp ngắn gọn và tiện lợi để định nghĩa các hàm trong JavaScript, đặc biệt khi làm việc với các hàm nhỏ, hàm ẩn danh, và các hàm callback. Tuy nhiên, chúng có các đặc điểm riêng về this, arguments, và không thể sử dụng như hàm tạo (constructor). Hiểu rõ những đặc điểm này sẽ giúp bạn sử dụng hàm mũi tên một cách hiệu quả và tránh các lỗi phổ biến.