Practice
Resources
Contests
Online IDE
New
Free Mock
Events New Scaler
Practice
Improve your coding skills with our resources
Contests
Compete in popular contests with top coders
logo
Events
Attend free live masterclass hosted by top tech professionals
New
Scaler
Explore Offerings by SCALER

Regular vs Arrow Functions

We can create Javascript functions in many ways.

function hello() {
    console.log("Hello world");
}

const hi = function hi() {
console.log("Hi world");
}

const bye = function() { //using anonymous function
    console.log("Bye world");
}

The above three methods of declaration are refered as regular function declaration.

The only difference in the above declarations is in the stack trace that appears when there is an error.

Arrow functions were introduced in ES6.

Arrow functions allow us to write shorter function syntax.

const hello = () => {
    console.log("Hello world");
}

If the function has only one statement, and the statement returns a value, we can remove the brackets and the return keyword.

For e.g.

Regular Function

function helloName(name) {
    return "Hello " + name;
}

Arrow function

const helloName = (name) => "Hello " + name;

So, Arrow functions lets us write functions even in a single line!

If we have one parameter, we can even omit the parentheses that enclose the parameter

const helloName = name => "Hello " + name;

 

Both arrow functions and regular functions can be used as object methods.

 

Now, lets see where the differences emerge between the different function declaring and defining methods.

1) this binding

  • Regular functions have their own dynamic this binding, while arrow functions do not have their own this.

    The value of this inside a regular function depends on how the function is invoked.

    During a simple invocation the value of this equals to the global object (or undefined if the function runs in strict mode)

     function fun() {
           console.log(this);
     }
     fun(); // prints global object (window) 

    During a method invocation the value of this is the object owning the method:

     const obj = {
      fun() {
        console.log(this);
      }
    };
    obj.fun(); // prints obj 
  • The value of this inside an 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.

    In the following example, fun1() is an outer regular function of fun2() arrow function:

    const obj = {
      fun1(items) {
        console.log(this); // prints obj
        const fun2 = () => {
          console.log(this); // prints obj
       };
      }
    };

    this value inside the arrow function fun2() equals to this value of the outer function fun1().

 2) arguments object

  • Inside the body of a regular function, arguments is a special array-like object containing the list of arguments with which the function has been invoked.

    function fun() {
      console.log(arguments);
    }
    
    myFunction('a', 'b'); // prints { 0: 'a', 1: 'b'}
  • No arguments object is defined inside an arrow function.

    The arguments object is resolved lexically: the arrow function accesses arguments from the closest outer non-arrow function.

    function fun1() {
      const fun2 = () => {
        console.log(arguments);
      }
    
      fun2('c', 'd');
    }
    
    fun1('a', 'b'); // prints { 0: 'a', 1: 'b' }

 3) new keyword

  • Regular functions created using function declarations or expressions are constructible (means that we can use regular functions as constructors) and callable. And since regular functions are constructible, they can be called using the new keyword.

    function fun(){
        console.log("hello");
    }
    const obj = new fun(); //valid code
  • The arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Hence, they can never be called with the new keyword.

    let fun = () => {
       console.log("hello);
    }
    const obj = new fun(): // Gives error

Find the output for the given code below.

let obj = {
    a: 100,
    fun1() {
        let a = 20;
        let fun2 = () => {
            console.log(this.a);
        }
        fun2();
    }
}

obj.fun1();
Hints
  • Hints are not available for this problem

Discussion


Loading...
Click here to start solving coding interview questions
Free Mock Assessment
Fill up the details for personalised experience.
Phone Number *
OTP will be sent to this number for verification
+1 *
+1
Change Number
Graduation Year *
Graduation Year *
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
*Enter the expected year of graduation if you're student
Current Employer
Company Name
College you graduated from
College/University Name
Job Title
Job Title
Engineering Leadership
Software Development Engineer (Backend)
Software Development Engineer (Frontend)
Software Development Engineer (Full Stack)
Data Scientist
Android Engineer
iOS Engineer
Devops Engineer
Support Engineer
Research Engineer
Engineering Intern
QA Engineer
Co-founder
SDET
Product Manager
Product Designer
Backend Architect
Program Manager
Release Engineer
Security Leadership
Database Administrator
Data Analyst
Data Engineer
Non Coder
Other
Please verify your phone number
Edit
Resend OTP
By clicking on Start Test, I agree to be contacted by Scaler in the future.
Already have an account? Log in
Free Mock Assessment
Instructions from Interviewbit
Start Test