Arrow Functions Trong Javascript

Javascript Lập Trình
28/03/2025
13 minutes read

Table of Contents

Arrow Functions Là Gì?

Như chúng ta đã biết thìJavaScript là ngôn ngữ được sử dụng rộng rãi trong lập trình web. Từ khi ra đời ES6 (ECMAScript 2015), JavaScript đã được nâng cấp với các tính năng mới nhằm giúp chúng ta code trở nên ngắn gọn và hiệu quả hơn. Trong số đó, arrow functions với cú pháp “mũi tên” (=>) là một trong những tính năng giúp thực hiện các tính năng phức tạp trở nên đơn giản hơn.

Bài viết này sẽ hướng dẫn bạn từ bước cơ bản nhất đến những ứng dụng nâng cao của arrow functions, giúp bạn tự tin sử dụng tính năng này trong dự án của mình nhé.

Arrow Functions và Normal Functions

Hàm thông thường (Normal Functions)

Hàm thông thường được định nghĩa với từ khóa function. Chúng có thể có tên hoặc là hàm ẩn danh (anonymous function). Ví dụ:

// Hàm thông thường có tên
function sum(a, b) {
  return a + b;
}

// Hàm thông thường ẩn danh được gán cho biến
const multiply = function(a, b) {
  return a * b;
};

Đặc điểm của hàm thông thường:

Sử dụng từ khóa function khi khai báo.
Tạo ra ngữ cảnh riêng cho từ khóa this khi hàm được gọi.
Có thể được gọi trước khi định nghĩa nếu được khai báo bằng function declaration (hoisting).

Arrow Functions

Arrow functions được giới thiệu trong ES6 với cú pháp mới, loại bỏ từ khóa function và sử dụng dấu mũi tên => để phân cách danh sách tham số và thân hàm. Ví dụ:

// Arrow function với nhiều tham số
const sum = (a, b) => {
  return a + b;
};

// Arrow function rút gọn khi chỉ có một dòng lệnh trả về
const multiply = (a, b) => a * b;

Điểm khác biệt quan trọng:

Arrow functions không có từ khóa function mà dùng dấu =>.
Nếu chỉ có một tham số, có thể bỏ ngoặc đơn.
Nếu thân hàm chỉ có một dòng lệnh, có thể bỏ dấu ngoặc nhọn và từ khóa return (giá trị sau dấu arrow được tự động trả về).

Cú Pháp Arrow Functions

Arrow functions có cú pháp ngắn gọn, giúp code trở nên sạch sẽ và dễ hiểu. Dưới đây là một số điểm cần nắm rõ:

Chuyển đổi từ hàm thông thường sang Arrow Function

Giả sử bạn có hàm thông thường tính tổng:

function sum(a, b) {
  return a + b;
}

Để chuyển sang arrow function, ta loại bỏ từ khóa function và gán cho một biến:

const sum = (a, b) => {
  return a + b;
};

Nếu hàm chỉ có một dòng lệnh trả về, ta có thể rút gọn thêm:

const sum = (a, b) => a + b;

Lợi ích của Arrow Functions

Một trong những điểm mạnh của arrow functions chính là cách chúng xử lý từ khóa this. Trong các hàm thông thường, this được xác định bởi cách hàm được gọi, điều này có thể dẫn đến lỗi khó hiểu khi làm việc với các hàm callback.

Vấn đề với từ khóa `this` trong hàm thông thường

Hãy xem ví dụ sau:

javascriptSao chépChỉnh sửafunction Person(name) {
  this.name = name;
  this.printName = function() {
    setTimeout(function() {
      console.log("Tên của tôi là:", this.name);
    }, 100);
  };
}

const person1 = new Person("Trần Văn Hòa");
person1.printName(); // Kết quả không như mong đợi vì this không trỏ tới đối tượng person1.

Trong ví dụ trên, hàm callback trong setTimeout là một hàm thông thường nên có ngữ cảnh this khác – thường trỏ về đối tượng toàn cục (window trong trình duyệt). Kết quả in ra sẽ là undefined thay vì “Trần Văn Hòa”.

Arrow Functions và cách xử lý `this`

Khi dùng arrow function, this sẽ được kế thừa từ ngữ cảnh bao quanh, giúp tránh được lỗi trên:

function Person(name) {
  this.name = name;
  this.printName = function() {
    setTimeout(() => {
      console.log("Tên của tôi là:", this.name);
    }, 100);
  };
}

const person1 = new Person("Trần Văn Hòa");
person1.printName(); // In ra: Tên của tôi là: Trần Văn Hòa

Ở đây, arrow function không tạo ra binding mới cho this, vì vậy this trong callback sẽ chính là this của hàm printName, tức là đối tượng person1.

Những Lưu Ý Khi Sử Dụng Arrow Functions

Không phải mọi hàm đều thích hợp được chuyển thành arrow function. Một số trường hợp cần dùng hàm thông thường:

Khi bạn cần khai báo hàm có binding riêng cho this (ví dụ: khi làm việc với object prototype hoặc class mà cần thay đổi ngữ cảnh).
Khi bạn cần sử dụng từ khóa arguments (arrow functions không có đối tượng arguments riêng).
Khi bạn muốn sử dụng hàm như một constructor (arrow functions không thể dùng với từ khóa new).

Kết Luận

Arrow functions là một trong những tính năng quan trọng nhất được giới thiệu trong ES6, giúp JavaScript trở nên hiện đại, ngắn gọn và trực quan hơn. Qua bài viết này, mong bài viết sẽ cung cấp các kiến thức hữu ích trong việc lập trình web!