Quartz 🪬

Arrow Function

2 min read

Definition

Arrow Function (hàm mũi tên) là cách viết khác của expression function (xem thêm JS Functions). Giữa chúng không có quá nhiều điểm khác biệt.

const add = (a, b) => {
  return a + b
}
console.log(add(10, 1)) // 11

Nếu có một tham số, có thể không cần dùng dấu ngoặc.

const double = (n) => {
  return n * 2
}
console.log(double(3)) // 6

Nếu khối lệnh trong hàm chỉ có một dòng return, có thể viết là

const double = (n) => n * 2
 
console.log(double(8)) // 16

Để return về object thì bọc object trong dấu ngoặc đơn ():

const sum = (a, b) => ({ a: a, b: b })

Unlimited Number of Parameters

Hàm mũi tên (arrow function) không cung cấp mảng các đối số arguments (xem thêm Unlimited Number of Parameters).

Thay vào đó ta sử dụng toán tử rest: ... (Rest Operator) trước tên một tham số bất kỳ để gom các tham số lại thành một mảng.

Bất cứ thứ gì ta truyền vào hàm đều được truy cập dưới dạng mảng.

const sumAllNums = (...args) => {
  // `arguments` object not found in arrow function
  // Instead, we use an a parameter followed by spread operator
  console.log(args)
}
 
sumAllNums(1, 2, 3, 4) // [1, 2, 3, 4]

Summary

Dùng arrow function khi:

  • Thân hàm ngắn, có thể rút gọn lại thành một dòng.
  • Đảm bảo từ khóa this không bị thay đổi đối tượng tham chiếu khi gọi nhiều hàm lồng nhau. Thường áp dụng cho các callback truyền vào event listener1.

Resources

Footnotes

  1. xem thêm JS Event và JS this Keyword ↩