Difference between Regular function and Arrow function.

There are many ways to define functions in JavaScript.
The usual way is by using the function keyword

First way

// Function Declaration
function greeting(name){
 return `Hi, ${name}!`;
}
// Function Expression
const greeting = function(name) {
  return `Hi, ${name}`;
}

The function declaration and function expression This will be referred as a regular function. Available from ES2015, is the arrow function syntax:

The second way

const greeting = (name) => {
  return `Hi, ${name}!`;
}

While both the above defines a function, now the question comes when will you choose one over the other.

Let's discuss the difference between the two which will help us to write the right syntax for your needs.

Regular Function

Inside a regular function in JavaScript this is dynamic. That means the value of this depends on how the function is invoked. We have 4 different ways to invoke a function in JavaScript.A simple invocation the value of this is equal to the global object or undefined if the function runs in strict mode

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

// Simple invocation
newFunction(); // logs global object (window)

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

const newObject = {
  method() {
    console.log(this);
  }
};
// Method invocation
newObject.method(); // logs "newObject"

While using an indirect invocation by using newFunc.call(context, arg1, …, argN) or newFunc.apply(context, [arg1, …, argN]) the value of this equals to the first argument:

function newFunction() {
 console.log(this);
}
const newContext = { value: ‘Cat’ };
newFunction.call(newContext); // logs { value: ‘Cat’ }
newFunction.apply(newContext); // logs { value: ‘Cat’ }

Another way of invoking a function is, constructor invocation using the new keyword this equals to the newly created instance:

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

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

The behavior of this inside of an arrow function differs majorly from the regular function’s behavior of this . How or where being executed, this value inside of an array function always equals this value from the outer function. Technically the arrow function resolves this lexically. That means, the arrow function doesn’t define its own execution context.

Small example, checkMethod() is an outer function of callback() arrow function:

const newObject = {
  checkMethod(items) {
    console.log(this); // logs "Object"    const callback = () => {
      console.log(this); // logs "Object"    };
    items.forEach(callback);
  }
};

newObject.newMethod([1, 2, 3]);

this value inside the arrow function callback() equals to this of the outer function newMethod().

this resolved lexically is one of the great features of arrow functions. When using callbacks inside methods it is sure the arrow function doesn’t define its own this: no more const self = this or callback.bind(this) workarounds.

Constructors — Regular function

As seen in the previous section, the regular function can easily construct objects.

For example, the Cat() the function creates instances of a cat:

function Car(color) {
  this.color = color;
}
const redCar = new Cat('black');
redCar instanceof Cat; // => true

Cat is a regular function, and when invoked with new keyword, it creates new instances of Cat type.

Arrow function

A consequence of this resolved lexically is that an arrow function cannot be used as a constructor. If you try to invoke an arrow function prefixed with new keyword, JavaScrip throws an error:

const Cat = (color) => {
  this.color = color;
};
const redCar = new Cat('black'); // TypeError: Cat is not a constructor

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

arguments object in Regular function

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.

Let’s invoke newFunction function with 3 arguments:

function newFunction() {
  console.log(arguments);}
newFunction('a', 'b'); // logs { 0: 'a', 1: 'b'}

arguments array-like object contains the invocation arguments: 'a' and 'b'.

Arrow function

in Arrow functions, no arguments special keyword is defined inside an arrow function. Again (same as with this value), the arguments object is resolved lexically: the arrow function accesses arguments from the outer function.

Let’s try to access arguments inside of an arrow function:

function newRegularFunction() {
  const newArrowFunction = () => {    console.log(arguments);  }
  newArrowFunction('c', 'd');
}
newRegularFunction('a', 'b'); // logs { 0: 'a', 1: 'b' }

The arrow function newArrowFunction() is invoked with the arguments 'c', 'd'. Still, inside of its body, arguments object equals to the arguments of newRegularFunction() invocation: 'a', 'b'.

If you’d like to access the direct arguments of the arrow function, then you can use the rest parameters feature:

function newRegularFunction() {
  const newArrowFunction = (...args) => {    console.log(args);  }
  newArrowFunction('c', 'd');
}
newRegularFunction('a', 'b'); // logs { 0: 'c', 1: 'd' }

...args rest parameter collects the execution arguments of the arrow function: { 0: 'c', 1: 'd' }.

Implicit return — Regular function

Just use return expression statement to return a result from a function:

function newFunction() {
  return 42;
}
newFunction(); // => 42

If the return statement is missing, or there’s no expression after return statement, the regular function implicitely returns undefined:

function newEmptyFunction() {
  42;
}
function newEmptyFunction2() {
  42;
  return;
}
newEmptyFunction();  // => undefined
newEmptyFunction2(); // => undefined

Arrow function

we can return values from the arrow function the same way as from a regular function, but with one useful exception.

If the arrow function contains one expression, and you omit the function’s curly braces, then the expression is explicitly returned. These are the inline arrows function.

const increment = (num) => num + 1;
increment(41); // => 42

The increment() arrow consists of only one expression: num + 1. This expression is implicitly returned by the arrow function without the use of return keyword.

Methods — Regular function

To define methods on classes we usually use regular function In the below class Hero, the method recordName() is defined using a regular function:

class Hero {
  constructor(heroName) {
    this.heroName = heroName;
  }
  recordName() {    console.log(this.heroName);  }}
const spiderman = new Hero('Spiderman');

Sometimes you’d need to supply the method as a callback, for example to setTimeout() or an event listener. In such cases, you might encounter difficulties to access this value.

For example, let’s use use recordName() method as a callback to setTimeout():

setTimeout(spiderman.recordName, 1000);
// after 1 second logs "undefined"

After 1 second, undefined is logged to console. setTimeout() performs a simple invocation of logName (where this is the global object). That’s when the method is separated from the object.

Let’s bind this value manually to the right context:

setTimeout(spiderman.recordName.bind(spiderman), 1000);
// after 1 second logs "Spiderman"

batman.recordName.bind(spiderman) binds this value to spiderman instance. Now you’re sure that the method doesn’t lose the context.

Binding this manually requires boilerplate code, especially if you have lots of methods. There’s a better way: the arrow functions as a class field.

Arrow function

Thanks to Class fields proposal (at this moment at stage 3) you can use the arrow function as methods inside classes.

Now, in contrast with regular functions, the method defined using an arrow binds this lexically to the class instance.

Let’s use the arrow function as a field:

class Hero {
  constructor(heroName) {
    this.heroName = heroName;
  }
  logName = () => {    console.log(this.heroName);  }}
const spiderman = new Hero('Spiderman');

Now you can use batman.recordName as a callback without any manual binding of this. The value of this inside recordName() method is always the class instance:

setTimeout(batman.recordName, 1000);
// after 1 second logs "Spiderman"