Search This Blog

2021/02/06

normal function vs fat arrow function

Fat Arrow function and normal function differ in following aspect

new keyword use:

    Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using the new keyword.

            function add(x,y)
            {
                console.log(x+y)
            }
            new add(5,6)
        output:
             11

    However, the arrow functions are only callable and not constructible.Hence, they can never be invoked with the new keyword.
        sub =(x,y)=>{
            console.log(x-y)
        }


        new sub(5,6)
        
        Output:
            TypeError: sub is not a constructor


    Fat Arrow function can not be used as a constructors.



Duplicate Named function parameter:
    function add(x,x)
    {
        console.log(x);
    }
    add(5,7)
    
    Output:
        7
        
    but
    
    add=(x,x)=>{
       console.log(x);
    }

    add(5,6)        
        
    Output:    
        SyntaxError: Duplicate parameter name not allowed in this context
    
    With arrow functions, duplicate named arguments are always, regardless of strict or non-strict mode, invalid.
    
    
use of this keyword:
    let fruit = {
        name: "Mango",
        FatArrow: () => {
        console.log("My name is " + this.name); // no 'this' binding here
        },
        Regular() {
        console.log("My name is " + this.name); // 'this' binding works here
        }
    };

    fruit.FatArrow();
    fruit.Regular();    
    
    output:
        My name is undefined
        My name is Mango
        
        
    fat arrow functions do not have their own this. The value of this inside an fat arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in         the closest non-arrow parent function
arguments keyword:

   let myFunc = {  
    showArgs(){
     console.log(arguments);
    }
   };
   myFunc.showArgs(1, 2, 3, 4,5);
   
   
   Output:
       [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
    
   but
   
    let myFunc = {  
        showArgs : () => {
        console.log(...arguments);
      }
    };
    myFunc.showArgs(10,30,45,78);    
   
   output:
    [Arguments] {
    '0': {},
    '1': [Function: require] {
    resolve: [Function: resolve] { paths: [Function: paths] },
    main: Module {
    id: '.',
    path: '/home/sangram/projects/test10',
    exports: {},
    filename: '/home/sangram/projects/test10/test.js',
    loaded: false,
    children: [],
    paths: [Array]
    },
    extensions: [Object: null prototype] {
    '.js': [Function (anonymous)],
    '.json': [Function (anonymous)],
    '.node': [Function (anonymous)]
    },
    cache: [Object: null prototype] {
    '/home/sangram/projects/test10/test.js': [Module]
    }
    },
    '2': Module {
    id: '.',
    path: '/home/sangram/projects/test10',
    exports: {},
    filename: '/home/sangram/projects/test10/test.js',
    loaded: false,
    children: [],
    paths: [
    '/home/sangram/projects/test10/node_modules',
    '/home/sangram/projects/node_modules',
    '/home/sangram/node_modules',
    '/home/node_modules',
    '/node_modules'
    ]
    },
    '3': '/home/sangram/projects/test10/test.js',
    '4': '/home/sangram/projects/test10'
    }

   Arrow functions do not have an arguments binding. However, they have access to the arguments object of the closest non-arrow parent function.

How to use arguments in arrow function?

    var bar = (...arguments) => console.log(arguments);

    bar(1,3,6,89,67)   
    Output:
        [ 1, 3, 6, 89, 67 ]

       
Call Apply bind:   
   Arrow function not suitable for call, apply and bind methods, which generally rely on establishing a scope.
   
  

No comments:

Post a Comment