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:

Bạn muốn website của mình xuất hiện tại thanh bên phải tại QuangNinhBay.Com đặt liên kết tại bài viết dưới đây.

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