Differences between arrow function and regular function in JavaScript.

Functions are the bread and butter of JavaScript programming.

JavaScript functions can be defined in many ways. One can use the right syntax for specific needs by understanding the differences.

One of the usual way of defining a function is by using function keyword.

// Function declaration
function double(x){
    return x*2;
}

// Function expression
const double = function(x){
    return x*2;
}

In this blog, I will refer to these types as regular functions.

A second way of defining a function, introduced in ES2015, is the arrow function syntax.

const double = (x) => x*2

In this blog, I will discuss some main differences between regular functions and arrow functions.

1. this value

1.1 regular function

Inside a regular function, this value (i.e. the context of execution) is dynamic, depends on how the function is invoked.

During simple invocation, the value of this is equal to the global object.

function demo(){
   console.log(this)
}

demo();             // logs global window object

During method invocation, the value of this is equal to the object owning it.

const myDemo = {
   greet(){
        console.log(this);
   }
}

myDemo.greet();         // logs myDemo Object

During constructor invocation, the value of this refers to the newly created instance.

function Demo() {
  console.log(this);
}

new Demo();      // logs an instance of Demo

1.2 Arrow function

The value of this in case of arrow function is considerably different from that of regular function. Arrow function doesn't define it's own context of execution.

The value of this inside an arrow function is the same as that of it's outer function. In other words, arrow function resolve the value of this lexically and this behavior is independent of how and where the function is executed.

const myDemo = {
   greet(){
         console.log(this);                // logs myDemo Object
         const inner = () => {
                   console.log(this);              // logs myDemo Object
            }
         inner();
      }
}

myDemo.greet();

This great feature of arrow function make sure that when you use arrow function as callbacks, it doesn't define it's own execution context.

2. Constructors

2.1 regular function

function Meal(name){
    this.name = name;
}

const oatMeal= new Meal("oats");
console.log(oatMeal instanceOf Meal)      // logs   true

Meal is a regular function, when invoked with new keyword create an instance of type Meal.

2.2 Arrow function

Arrow function cannot be used as a constructor. If you try to invoke an arrow function prefixed with new keyword, JavaScript throws an error:

const  Meal = (name) => {
    this.name = name;
}

const oatMeal= new Meal("oats");   // error : Meal is not a constructor

Invoking new Meal('oats'), where Meal is an arrow function, throws TypeError: Meal is not a constructor.

3. Implicit return

3.1 regular function

return expression statement returns the result from a function:

function demo() {
  return 100;
}

demo();  //  return 100

If the return is missing or there is no statement after return, then regular function implicitly return undefined.

3.2 Arrow function

Arrow functions return values the same way as regular functions, but with one useful exception.

You can implicitly return an expression from the arrow function if its curly braces are omitted. These are the inline arrows function.

const increment = (num) => num + 1;
increment(401);        //  402

num + 1 is the only expression in increment() arrow. The arrow function implicitly returns this expression without the use of the return keyword.

Regular and arrow functions differ in important ways that allow you to choose the right syntax based on your needs.

What other differences do you know between arrow functions and regular functions ?

Differences between arrow function and regular function in JavaScript