Arrow Function Trong JavaScript: Cú Pháp, Cách Sử Dụng và Lưu Ý Quan Trọng

Arrow Function (hay còn gọi là hàm mũi tên) là một tính năng quan trọng được giới thiệu trong ES6, giúp đơn giản hóa cú pháp viết hàm trong JavaScript. Tuy nhiên, Arrow Function không chỉ là một cách viết ngắn gọn hơn, mà còn có những khác biệt quan trọng so với function thông thường, đặc biệt là về cách xử lý this. Bài viết này sẽ đi sâu vào cú pháp, cách sử dụng và những lưu ý quan trọng khi sử dụng Arrow Function.

Cú Pháp Của Arrow Function

Arrow Function sử dụng ký tự => để định nghĩa hàm. Dưới đây là một số ví dụ so sánh cú pháp giữa Arrow Function và function thông thường:

  • Không tham số:

    // Arrow Function
const hello = () => { console.log('hello'); }
hello();

// Function thông thường
function hello() { console.log('hello'); }
hello();

  • Một tham số:

    // Arrow Function
const hello = name => { console.log('hello ', name); }
hello('Sen Tây Hồ');

// Function thông thường
function hello(name) { console.log('hello ', name); }
hello('Sen Tây Hồ');

    Khi chỉ có một tham số, bạn có thể bỏ qua dấu ngoặc đơn ().

  • Nhiều tham số:

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

// Function thông thường
function add(a, b) { return a + b; }
console.log(add(5, 3));

  • Không cần return (implicit return):

    // Arrow Function
const double = x => x * 2;
console.log(double(4));

// Function thông thường
function double(x) { return x * 2; }
console.log(double(4));

    Khi thân hàm chỉ có một biểu thức, bạn có thể bỏ qua từ khóa return và dấu ngoặc nhọn {}. Kết quả của biểu thức sẽ được trả về một cách ngầm định (implicit return).

Ứng Dụng Của Arrow Function

Arrow Function thường được sử dụng trong các trường hợp như:

  • map, filter, forEach, reduce:

    const numbers = [1, 2, 3, 4];
const newArray = numbers.map(item => item * 2);
console.log(newArray); // [2, 4, 6, 8]

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

    Sử dụng Arrow Function giúp code ngắn gọn và dễ đọc hơn so với việc sử dụng function thông thường.

  • Callback functions:

    Arrow functions are often used as callback functions in asynchronous operations or event handlers.

“this” Trong JavaScript và Arrow Function

this là một từ khóa quan trọng trong JavaScript, nó tham chiếu đến đối tượng mà hàm được gọi trên đó. Giá trị của this có thể thay đổi tùy thuộc vào cách hàm được gọi.

this Trong Function Thông Thường

Trong function thông thường, giá trị của this được xác định bởi ngữ cảnh gọi hàm.

const person = {
  name_person: 'Sen',
  getNamePerson: function() {
    return this.name_person;
  }
};

console.log(person.getNamePerson()); // Sen

const getNamePerson = person.getNamePerson;
console.log(getNamePerson()); // undefined (hoặc lỗi nếu strict mode)

Trong ví dụ trên, khi getNamePerson được gọi như một method của object person, this tham chiếu đến person. Tuy nhiên, khi getNamePerson được gán cho một biến và gọi độc lập, this tham chiếu đến global object (window trong trình duyệt, global trong Node.js) hoặc undefined nếu ở strict mode.

Vấn đề này thường gặp khi sử dụng callback functions:

const person = {
  name_person: 'Sen',
  getNamePerson: function() {
    console.log(this.name_person);
  }
};

person.getNamePerson(); // Sen

const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', person.getNamePerson);
document.body.appendChild(button);

Trong trường hợp này, khi button được click, getNamePerson được gọi, nhưng this lại tham chiếu đến button thay vì person. Điều này gây ra lỗi vì button không có thuộc tính name_person.

Để giải quyết vấn đề này, chúng ta có thể sử dụng bind:

button.addEventListener('click', person.getNamePerson.bind(person));

bind tạo ra một hàm mới với this được ràng buộc (bind) với person.

this Trong Arrow Function

Arrow Function không có this riêng. Thay vào đó, nó kế thừa this từ ngữ cảnh bao quanh (lexical scope). Điều này có nghĩa là this trong Arrow Function luôn tham chiếu đến this của hàm cha gần nhất.

const person = {
  name_person: 'Sen',
  getNamePerson: () => {
    console.log(this.name_person);
  }
};

person.getNamePerson(); // undefined (hoặc lỗi nếu strict mode)

Trong ví dụ trên, this trong Arrow Function getNamePerson tham chiếu đến global object (window trong trình duyệt, global trong Node.js) hoặc undefined nếu ở strict mode, vì đó là this của ngữ cảnh bao quanh.

Arrow Function rất hữu ích trong các trường hợp callback:

const person = {
  name_person: 'Sen',
  getNameLater: function() {
    setTimeout(() => {
      console.log(this.name_person);
    }, 1000);
  }
};

person.getNameLater(); // Sen (sau 1 giây)

Trong trường hợp này, this trong Arrow Function tham chiếu đến person vì nó kế thừa từ getNameLater.

Khi Nào Không Nên Sử Dụng Arrow Function

Mặc dù Arrow Function rất tiện lợi, nhưng có một số trường hợp không nên sử dụng:

  • Method của object: Vì Arrow Function không có this riêng, nó không phù hợp để làm method của object.

    const person = {
  name_person: 'Sen',
  getNamePerson: () => { // Không nên dùng Arrow Function ở đây
    console.log(this.name_person);
  }
};

  • Khi cần sử dụng arguments: Arrow Function không có đối tượng arguments. Nếu bạn cần truy cập vào các đối số được truyền vào hàm, hãy sử dụng function thông thường hoặc rest parameters.

Kết Luận

Arrow Function là một công cụ mạnh mẽ giúp viết code JavaScript ngắn gọn và dễ đọc hơn. Tuy nhiên, cần hiểu rõ cách this hoạt động trong Arrow Function để tránh những lỗi không mong muốn. Hãy sử dụng Arrow Function một cách hợp lý để tận dụng tối đa lợi ích mà nó mang lại.