Sự Khác Biệt Giữa Hàm Mũi Tên JavaScript: Khi Nào Sử Dụng ()=>{} So Với ()=>()?

Hàm mũi tên (arrow function) đã trở thành một phần không thể thiếu trong JavaScript hiện đại. Tuy nhiên, việc phân biệt giữa cú pháp ()=>{} và ()=>() có thể làm cho nhiều lập trình viên cảm thấy khó khăn. Bài viết này sẽ giúp bạn giải thích từng trường hợp sử dụng và đưa ra ví dụ minh họa rõ ràng.

1. Cú Pháp ()=>{} (Với Dấu Ngoặc Nhọn)

Đặc Điểm:

• Khi bạn sử dụng dấu ngoặc nhọn {} sau dấu mũi tên =>, bạn đang định nghĩa một thân hàm đầy đủ.
• Để trả về một giá trị, bạn phải sử dụng từ khóa return một cách rõ ràng. Nếu không có từ khóa này, hàm sẽ không trả về bất kỳ giá trị nào, mà chỉ trả về undefined.

Ví Dụ:

const add = (a, b) => {
  return a + b; // Trả về giá trị một cách rõ ràng
};

console.log(add(2, 3)); // Kết quả: 5

Những Điểm Chính:

• Dấu ngoặc nhọn thể hiện một cơ thể hàm đầy đủ.
• Từ khóa return bắt buộc phải sử dụng để trả về giá trị.

2. Cú Pháp ()=>() (Có Dấu Ngoặc Đơn)

Đặc Điểm:

• Khi sử dụng dấu ngoặc đơn () sau dấu mũi tên =>, hàm sẽ thực hiện trả về giá trị một cách ngầm định.
• Đây là cách viết gọn để trả về trực tiếp một biểu thức duy nhất.
• Bạn không cần phải sử dụng từ khóa return và cũng không cần dấu ngoặc nhọn.

Ví Dụ:

const add = (a, b) => a + b; // Trả về một cách ngầm định

console.log(add(2, 3)); // Kết quả: 5

Những Điểm Chính:

• Dấu ngoặc đơn tượng trưng cho sự trả về ngầm định của một biểu thức.
• Không cần có từ khóa return.

Khi Nào Thì Nên Sử DỤng ()=>{} và ()=>()?

1. Sử Dụng ()=>{} Khi:

• Hàm có nhiều câu lệnh hoặc cần logic phức tạp hơn.
• Bạn muốn kiểm soát rõ ràng các giá trị trả về.

Ví Dụ:

const processNumbers = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product; // Trả về giá trị một cách rõ ràng
};

console.log(processNumbers(2, 3)); // Kết quả: 11

2. Sử Dụng ()=>() Khi:

• Hàm chỉ đơn giản là một biểu thức duy nhất và cần trả về một giá trị.
• Bạn muốn giữ cho cú pháp ngắn gọn và dễ đọc.

Ví Dụ:

const square = (x) => x * x; // Trả về một cách ngầm định

console.log(square(4)); // Kết quả: 16

Trường Hợp Khó Sử Dụng

Nếu bạn muốn trả về một đối tượng một cách chính xác và sử dụng từ khóa return ngầm định, hãy nhớ bọc đối tượng trong dấu ngoặc đơn (). Nếu không, JavaScript sẽ hiểu {} như một thân hàm.

Ví Dụ:

const getObject = () => ({ key: 'value' }); // Đúng: Bọc trong dấu ngoặc đơn
console.log(getObject()); // Kết quả: { key: 'value' }

const getObjectError = () => { key: 'value' }; // Sai: Hiểu là thân hàm
console.log(getObjectError()); // Kết quả: undefined

Tóm Tắt

Bài viết này hy vọng đã giúp bạn hiểu rõ hơn về sự khác biệt giữa hai cú pháp hàm mũi tên trong JavaScript, giúp bạn dễ dàng lựa chọn cách sử dụng phù hợp tùy vào từng tình huống cụ thể.
source: viblo