Difference between arrow function and normal function javascript | JavaScript Interview Question

Difference between arrow function and normal function javascript | JavaScript Interview Question

See to this video on youtube click here

In this Article you will learn everything about Difference Between Regular Functions and Arrow Functions basic + advanced javascript.

In this Article we cover everything you need to know about the Regular Functions and Arrow Functions .

Concepts Covered:-

1. Syntax (How to write function in ES5 and ES6)

How to write syntax in normal javascript and fat arrow function .

ES5 Syntax Regular function in javaScript

const myFun = function(name){
    return 'My name is '+ name;
}

console.log(myFun('Rohit')) // My name is Rohit
        

ES6 Syntax fat arrow function in javaScript like this

if you have only single arguments or single parameter like this.

const myArrowFun = (name) =>{
   return  'My name is '+ name;
 }

console.log(myArrowFun('Rohit Azad')) // My name is Rohit Azad
        

or you may be write to this like in single line without return statement.

const myArrowFun = name => 'My name is '+ name;

console.log(myArrowFun('Rohit Azad')) // My name is Rohit Azad
        

if you have two argument (two parameter) single line without return statement.

const myArrowFun = (name, age) => 'My name is '+ name + ' and i m '+ age + ' years old';

console.log(myArrowFun('Rohit Azad Malik', 34)) // My name is Rohit Azad and i m 34 years old
        

you just write within brackets only two paragraph like above example.

with out argument write code in es6 in single line.

const myArrowFun = _ => 'Hi i m fat arrow function';

console.log(myArrowFun()) // Hi i m fat arrow function
        

2. Arguments binding in ES5 and ES6 in JavaScript

Pass the argument in ES5 Regular function and check in console like this.

const  myFun = function(name,age){
   return (arguments);
}
console.log(myFun('Rohit', 35)) 
        

you will see to console output like this about image

Pass the argument in ES6 fat arrow function and check in console like this.

const myArrowFun = (name, age)=>{
    return (arguments)
}
console.log(myArrowFun('Rohit', 35))
        

you see to this result we got an error in console arguments is not defines because we ES6 fat arrow is not understand arguments Here we used to ES6 spread operator method like this in below example.

const myArrowFun = (...args)=>{
    return (args)
}
console.log(myArrowFun('Rohit', 35))
        

we got an array with index of in arguments like about image result.

so that we learn here ES5 Regular function and ES6 Fat Arrow function arguments.

3. this used in ES5 Regular function and ES6 Fat Arrow Function

now first we check to this in a simple function with Regular function and fat arrow function.

const myFun = function(){
    console.log(this);
}
const myArrowFun = ()=>{
    console.log(this);
}
myFun();
myArrowFun();
        

now you can check to above example both are trigger to window.

Now we used to a object and function and then check to this property in below example.

var name = 'Rohit Azad'
const myObjFun = {
    name:'Rohit',
    age:34,
    getName: function(){
        console.log(this.name)
    },
    getArrowName: ()=>{
        console.log('fat arrow  ',this.name);
    }
}
myObjFun.getName();
myObjFun.getArrowName();
        

here we create a variable with var keyword name and assign to value is string 'Rohit Azad' and we also create a const variable myObjFun and property is object key and value in this myObjFun we write name, age, getName and getArrowName as a function here we used to getArrowName function as a ES6 fat Arrow function and call to this.name keyword and getName ES5 Regular function and same as here we call to this.name keyword .

We see to this in Results in ES5 Regular function this.name is print to Rohit because this function this reference to myObjFun.

in ES6 fat arrow function getArrwName return to fat arrow Rohit Azad because this function reference to parents window trigger.

4. new keyword (constructors)

new keyword is not working with ES6 fat arrow function let see to this example in below code and screenshot.

let myFun = function(name, age){
    console.log('My name is '+ name + ' i m '+ age  + ' years old')
}


const myFun_2 = new myFun('Rohit', 34)
const myFun_3 = new myFun('Rohit Azad', 36)
const myFun_4 = new myFun('Rohit Azad Malik', 42)


let myArrowFun = (name, age)=>{
    console.log('My name is '+ name + ' i m '+ age  + ' years old')
}


const myArrowFun_2 = new myArrowFun('Rakesh', 23)
        

in this example above we check to ES6 fat arrow function is not working with new keyword (as a constructor) given error is not a constructor.

But it's working with ES5 Regular function.

5. Duplicate arguments

in ES6 fat arrow function is not working with duplicate arguments now let see to this example in below.

const myFun = function(a,a){
    console.log(a,'____',a)
}
myFun(2,5)


const myArrowFun = (b,b)=>{
    console.log(b, '___', b);
}
myArrowFun(3,6)
        

in this example above you see if we pass the duplicate arguments in ES6 fat arrow function then it's give us error Duplicate parameter name not allowed in this context

6. Function Hoisting with ES5 Regular function and ES6 fat arrow function.

now let's check with hoisting with ES5 and ES6 fat arrow function.

in ES6 fat arrow function is not working with hoisting.

myFun();

function myFun(){
    console.log('my function hoisting example')
}

myfatArrow();

let  myfatArrow = ()=>{
    console.log('my function hoisting example fat arrow')
}
        

in this about example you call a function myFun and after that you declare to this function in ES5 Regular function it's working with hosting .

but if we used to fat arrow function with let then it's give us error Uncaught ReferenceError: myfatArrow is not defined means ES6 fat arrow function is not working with Hoisting.

7. Methods with ES5 and ES6 function

class PeopleInfo {

    constructor(peopleName){

        this.peopleName = peopleName;
    }

    getPeopleName (){

        console.log(this.peopleName); 
    }
}

const anotherPeople = new PeopleInfo('Rohit Azad')

anotherPeople.getPeopleName();// Rohit Azad

// now if you have any callback function like this 

setTimeout(anotherPeople.getPeopleName, 1000) // give to undefined after 1 seconds

setTimeout(anotherPeople.getPeopleName.bind(anotherPeople), 1000) // Rohit Azad

        

Now we check see to this above example if we used to class and used to callback function and wait for result and then call to our function then we used to bind method otherwise this value is show to undefined.

but if we used to ES6 fat arrow function then we don't used to bind method.

like this

class PeopleInfo {

    constructor(peopleName){
        this.peopleName = peopleName;
    }

    getPeopleName = ()=>{
        console.log(this.peopleName); 
    }
}


const anotherPeople = new PeopleInfo('Rohit Azad')

anotherPeople.getPeopleName();


setTimeout(anotherPeople.getPeopleName, 1000)
        

Now you can watch to my video in youtube click here

More video you can check out to my channel in youtube

you can follow me on :-

Twitter

Facebook

Stackoverflow

Github