Difference Between Regular Function Expression and Arrow Function Expression

Before we begin, I would like to acknowledge that this article references the following source:

https://www.freecodecamp.org/news/the-difference-between-arrow-functions-and-normal-functions/

There are two types of functions in JavaScript:

Normal Function

Arrow Function

Arrow Functions were introduced in ES6.

Normal Function example


function multiply(num1, num2) {
  const result = num1 * num2;
  return result;
}

Arrow Function Example


const multiply = (num1, num2) => {
  const result = num1 * num2;
  return result;
}

1. Arrow functions do not have the `arguments` object


function print() {
  console.log(arguments);
}

print("hello", 400, false);

// {
//   '0': 'hello',
//   '1': 400,
//   '2': false
// }

-----------

const print = () => {
  console.log(arguments);
}

print("hello", 400, false);
// Uncaught ReferenceError: arguments is not defined

2. Arrow functions do not create their own `this` binding


const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    console.log(this);
  }
}

obj.print();
// {
//   name: 'deeecode',
//   age: 200,
//   print: [Function: print]
// }

-------

const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    function print2() {
      console.log(this);
    }

    print2();
  }
}

obj.print();
// Window
// print2 is not called by any object, so `this` refers to the Window object

------

const obj = {
  name: 'deeecode',
  age: 200,
  print: () => {
    console.log(this);
  }
}

obj.print();
// Window
// Arrow functions do not automatically bind `this`, so it refers to the Window object

-----

const obj = {
  name: 'deeecode',
  age: 200,
  print: function() {
    const print2 = () => {
      console.log(this);
    }

    print2();
  }
}

obj.print();
// {
//   name: 'deeecode',
//   age: 200,
//   print: [Function: print]
// }

// In the above example, the arrow function `print2` is declared inside the `print` method of `obj`.
// Since `print` is a regular function, its `this` is bound to `obj`, so `print2`'s `this` ultimately refers to `obj`.

3. Arrow functions cannot be used as constructors

As mentioned in point 2, arrow functions do not bind this.

For this reason, they cannot be used as constructors in classes.

Example code:


class Animal {
  constructor = (name, numOfLegs) => {
    this.name = name;
    this.numOfLegs = numOfLegs;
  }

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}
// Uncaught SyntaxError: Classes may not have a field named 'constructor'

In the above code, constructor is declared as a method within the class object, not as a constructor. Therefore, the reserved keyword constructor cannot be overridden.

4. Arrow functions cannot be declared


function printHello() {
  console.log("hello");
}

The above example is a declared function.


const printHello = function() {
  console.log("hello");
}

The above example is a function expression.


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

The above example is not a function declaration.

printHello is a variable assigned with a function expression.

5. Arrow functions cannot be accessed before initialization


printName();

console.log("hello");

function printName() {
  console.log("I am Dillon");
}

// Output:
// I am Dillon
// hello
------

printName();

console.log("hello");

const printName = () => {
  console.log("I am Dillon");
}

// ReferenceError: Cannot access 'printName' before initialization

Blog, COLDSURF

.css-y9kb0y{line-height:1.7;}@media (max-width: 768px){.css-y9kb0y{line-height:1.6;}}Difference Between Regular Function Expression and Arrow Function Expression