Arrow function là gì? Sự khác biệt giữa Arrow function và Function trong Javascript

xuất bản
Thông báo:
Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!
Chào các bạn trong bài này chúng ta cùng tìm hiểu và khái niệm về Arrow function và sự khác biệt giữa Arrow function và Function trong Javascript.
Khái niệm về Arrow function:
Arrow function hay còn gọi là hàm mũi tên là một trong những tính năng hay của Javascript ES6. Nó có cách viết ngắn gọn hơn function.
Sự khác nhau:
// function thường
function quangNinhBay(){
console.log('QuangNinhBay.Com');
}
// Arrow function
const a = () => console.log('QuangNinhBay.Com');
Ngoài ra Arrow function còn có thể bỏ qua từ khóa return
// function thường
function ketQua(a, b){
return a + b;
}
// Arrow function
var ketQua = (a, b) => a + b;
Arrow function còn được sử dụng trong các trường hợp: map, filter, forEach,...
VD:
+ map();
// Map();
const number = [1,3,5,7];
// function thường
const newNumber = number.map(function ($item) {
return $item = $item + 1;
})
// Arrow function
const NewNumber = number.map($item => $item + 1);
// Map(); Object
const number = [
{id: 1, name: 'A', value: 1},
{id: 2, name: 'B', value: 2},
{id: 3, name: 'C', value: 3}
];
// function thường
const newNumber = number.map(function (item) {
return item.id;
});
// Arrow function
const newNumber = number.map(item => item);
console.log(newNumber);
+ filter();
// filter(); Object
const words = [
{ id: 1, name: "Tien" },
{ id: 2, name: "QuangNinh" },
{ id: 3, name: "VN" }
];
// function thường
const result = words.filter(function (word) {
return word.name != "VN";
});
// Arrow function
const result = words.filter(word => word.name != "Tien");
console.log(result);
+ reducer();
// reducer(); Object
const arr = [
{ id: 1, name: "Tien", price: 10 },
{ id: 2, name: "Dinh", price: 15 },
{ id: 3, name: "Dat", price: 5 },
];
// function thường
const result = arr.reduce(function (total, {price}) {
return total + price;
},0);
// Arrow function
const result = arr.reduce((total, {price})=> (total + price),0);
console.log(result);