5 kinh nghiệm khi viết arrow function

Gán tên cho arrow function

arrow function trong javascript là một anonymous (hàm không có tên), nếu gọi vào name của nó chúng ta sẽ nhận được một chuỗi rỗng

(number => number + 1).name; // => ''

Trong lúc debug hoặc phân tích call stack, hàm dạng anonymous rất khó chịu vì không biết đang chạy cái gì

Bên cột call stack có 2 function anonymous, không có bất kỳ thông tin nào được trích xuất ra cho chúng ta ở đây.

Nhưng nếu chúng ta khai báo một biến nắm giữ arrow function, Javascript lúc này lại ngầm hiểu nó là tên cho function đó (các đặc tính khác của arrow function không đổi)

const increaseNumber = number => number + 1;

increaseNumber.name; // => 'increaseNumber'

Lúc debug, nó đã hiện nguyên hình

Inline khi nào có thể

Thay vì phải viết một cách dài dòng

const array = [1, 2, 3];

array.map(number => {
  return number * 2;
});

Chúng ta có thể bỏ hẳn {} và return, ở dạng một expression

const array = [1, 2, 3];

array.map(number => number * 2);

Sử dụng với phép so sánh

Các phép so sánh <=, >= nhiều khi dễ gây nhầm lẫn khi đứng chung với =>

const negativeToZero = number => (number <= 0 ? 0 : number);

Để không đánh đố người đọc, bọc nó lại trong dấu ngoặc đơn ()

const negativeToZero = number => (number <= 0 ? 0 : number);

//hoặc một cách tường minh
const negativeToZero = number => {
  return number <= 0 ? 0 : number;
};

Sử dụng với object literal

Nếu viết object literal như bên dưới chắc chắn bạn bị báo lỗi

const array = [1, 2, 3];

// throws SyntaxError!
array.map(number => { 'number': number });

Đừng quên thêm ngoặc đơn cho nó

const array = [1, 2, 3];

// Works!
array.map(number => ({ 'number': number }));

// có nhiều property
array.map(number => ({
  'number': number
  'propA': 'value A',
  'propB': 'value B'
}));

Hạn chế lồng nhiều arrow function

Thí dụ có một button, sau khi click chúng ta request lên server, sau khi nhận được giá trị, log xuống trình duyệt

myButton.addEventListener('click', () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(json => {
      json.forEach(item => {
        console.log(item.name);
      });
    });
});

Viết vậy, thiên hạ chê khó đọc. Cân nhắc cách viết sau

const readItemsJson = json => {
  json.forEach(item => console.log(item.name));
};

const handleButtonClick = () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(readItemsJson);
};

myButton.addEventListener('click', handleButtonClick);

Muốn ngon hơn là dùng async/await

const handleButtonClick = async () => {
  const response = await fetch("/items.json");
  const json = await response.json();
  json.forEach(item => console.log(item.name));
};

myButton.addEventListener("click", handleButtonClick);