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);