Difference between regular functions and arrow functions in JavaScript

According to MDN, An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

There are 3 subtle differences in regular functions and arrow functions in JavaScript.

No own this bindings

Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.

Example

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

Output

100
150
150

See that the arrow function changed the this object outside its scope. The regular function just made the changes within its own this.

Arrow functions do not have a arguments array

In JS arguments array in functions is a special object that can be used to get all the arguments passed to the function. Similar to this, arrow functions do not have their own binding to a arguments object, they are bound to arguments of enclosing scope.

Arrow functions are callable but not constructable

If a function is constructable, it can be called with new, i.e. new User(). If a function is callable, it can be called without new (i.e. normal function call).

Functions created through function declarations / expressions are both constructable and callable.

Arrow functions (and methods) are only callable. class constructors are only constructable.

If you are trying to call a non-callable function or to construct a non-constructable function, you will get a runtime error.

let arrowFunc = () => {}
new arrowFunc()
This code gives the error:
arrowFunc is not a constructor