Arrow function là cách viết function ngắn gọn trong JavaScript và TypeScript.
Từ function thông thường sang arrow function
function add(a: number, b: number): number {
return a + b;
}
//Phiên bản arrow function ngắn gọn
const add = (a: number, b: number): number => {
return a + b;
};
//Phiên bản ngắn nhất, dễ hình dung, nhưng ko recommend vì không clear về kiểu dữ liệu
const add = (a, b) => {
return a + b;
};
//hoặc
const add = (a, b) => a + b;def add(a: int, b: int) -> int:
return a + b
add_lambda = lambda a, b: a + bVí dụ
const add = (a, b) => a + b;const: lưu giá trị trả về theo kiểu const
add: tên function
(a, b): tham số đầu vào
=> a + b: giá trị mà hàm sẽ trả về
Viết gọn khi chỉ có một biểu thức
const add = (a: number, b: number): number => a + b;
const isPassed = (score: number): boolean => score >= 5;
console.log(add(2, 3)); // 5
console.log(isPassed(8)); // trueLưu ý
Khi bỏ cặp ngoặc nhọn, giá trị của biểu thức được return tự động. Nếu dùng ngoặc nhọn, bạn phải viết
return khi muốn trả giá trị.Một tham số và không có tham số
const greet = (name: string): string => "Xin chào " + name;
const getEnvironment = (): string => "QA";
console.log(greet("An"));
console.log(getEnvironment());Có thể bỏ ngoặc quanh một tham số trong JavaScript, nhưng giữ ngoặc thường dễ đọc hơn và cần thiết khi ghi kiểu TypeScript.
Dùng với map và filter (hay dùng)
const scores = [4, 8, 6, 3];
//filter trong mảng bên trên, những phần tử score có giá trị >=5
const passedScores = scores.filter(score => score >= 5);
//trong mảng bên trên, với mỗi phần tử score, thêm chữ "Điểm: " vào trước nó, sau đó lưu vào biến labels
const labels = passedScores.map(score => "Điểm: " + score);
console.log(passedScores); // [8, 6]
console.log(labels); // ["Điểm: 8", "Điểm: 6"]scores = [4, 8, 6, 3]
passed_scores = list(filter(lambda score: score >= 5, scores))
labels = list(map(lambda score: "Điểm: " + str(score), passed_scores))
print(passed_scores)
print(labels)Trả về object: cần cặp ngoặc tròn
const makeResult = (name: string, passed: boolean) => ({
name,
passed,
});
console.log(makeResult("Login", true));Nếu viết => { name, passed }, JavaScript hiểu dấu ngoặc nhọn là thân hàm chứ không phải object. Cặp ngoặc tròn giúp biểu thức object được nhận đúng.
Bài tập thực hành
Bài 1
Viết 1 arrow function tên là isEmpty để kiểm tra chuỗi rỗng.
Bài 2
Cho mảng sau:
const bugs = [{name: "bug1", severity: "high"}, {name: "bug2", severity: "critical"},
{name: "bug3", severity: "low"} , {name: "bug4", severity: "critical"}]- Dùng
filter()lấy các bug có severity là Critical. - Dùng
map()lấy name của từng bug.
