- Gán tên cho arrow function
- Inline khi nào có thể
- Sử dụng với phép so sánh
- Sử dụng với object literal
- Hạn chế lồng nhiều 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);
Initializing...