5 Differences Between Arrow and Regular Functions

In JavaScript, you can define functions in many ways.

// Function declaration
function greet(who) {
return `Hello, ${who}!`;
}
// Function expression
const greet = function(who) {
return `Hello, ${who}`;
}
const greet = (who) => {
return `Hello, ${who}!`;
}

Table of Contents

1. this value

1.1 Regular function

function myFunction() {
console.log(this);
}
// Simple invocation
myFunction(); // logs global object (window)
const myObject = {
method() {
console.log(this);
}
};
// Method invocation
myObject.method(); // logs myObject
function myFunction() {
console.log(this);
}
const myContext = { value: 'A' };myFunction.call(myContext); // logs { value: 'A' }
myFunction.apply(myContext); // logs { value: 'A' }
function MyFunction() {
console.log(this);
}
new MyFunction(); // logs an instance of MyFunction

1.2 Arrow function

const myObject = {
myMethod(items) {
console.log(this); // logs myObject const callback = () => {
console.log(this); // logs myObject };
items.forEach(callback);
}
};
myObject.myMethod([1, 2, 3]);

2. Constructors

2.1 Regular function

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

2.2 Arrow function

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

3. arguments object

3.1 Regular function

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

3.2 Arrow function

function myRegularFunction() {
const myArrowFunction = () => { console.log(arguments); }
myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // logs { 0: 'a', 1: 'b' }
function myRegularFunction() {
const myArrowFunction = (...args) => { console.log(args); }
myArrowFunction('c', 'd');
}
myRegularFunction('a', 'b'); // logs ['c', 'd']

4. Implicit return

4.1 Regular function

function myFunction() {
return 42;
}
myFunction(); // => 42
function myEmptyFunction() {
42;
}
function myEmptyFunction2() {
42;
return;
}
myEmptyFunction(); // => undefined
myEmptyFunction2(); // => undefined

4.2 Arrow function

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

5. Methods

5.1 Regular function

class Hero {
constructor(heroName) {
this.heroName = heroName;
}
logName() { console.log(this.heroName); }}const batman = new Hero('Batman');
setTimeout(batman.logName, 1000);
// after 1 second logs "undefined"
setTimeout(batman.logName.bind(batman), 1000);
// after 1 second logs "Batman"

5.2 Arrow function

class Hero {
constructor(heroName) {
this.heroName = heroName;
}
logName = () => { console.log(this.heroName); }}const batman = new Hero('Batman');
setTimeout(batman.logName, 1000);
// after 1 second logs "Batman"

6. Summary

Dot Net Developer. SQL Server, Visual Studio, IIS, Azure.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store