What is the difference between arrow functions and regular functions?

Understanding arrow function characteristics.

What You'll Learn

Syntax differences
this binding differences
When to use each

Comparison

Feature	Regular Function	Arrow Function
this binding	Dynamic	Lexical
arguments object	Yes	No
Can be constructor	Yes	No
Syntax	function() {}	() => {}

Examples

code.jsJavaScript

// Syntax
function regular(a, b) {
  return a + b;
}

const arrow = (a, b) => a + b;

// this binding
const obj = {
  name: 'John',
  regular: function() {
    console.log(this.name); // 'John'
  },
  arrow: () => {
    console.log(this.name); // undefined
  }
};

// No arguments object
const noArgs = () => {
  console.log(arguments); // ReferenceError
};

// Cannot be constructor
const Person = (name) => {
  this.name = name;
};
new Person('John'); // TypeError

When to Use

Arrow: Callbacks, array methods, short functions
Regular: Object methods, constructors, when you need this or arguments

How does the "this" keyword work in JavaScript?

What are Prototypes in JavaScript?