What is the difference between arrow and regular functions?

The syntax difference is obvious. The behavioural differences matter more, especially around this, object methods and callbacks.

• Arrow functions do not bind their own this; they use the enclosing scope's this
• Arrow functions do not have their own arguments object
• Arrow functions cannot be used with new and have no prototype property
• Arrow functions cannot be generators
• Regular functions can be constructors and can have their this set by the call site, call, apply or bind

const team = {
  name: "Platform",
  regular() {
    return this.name;
  },
  arrow: () => this?.name,
};

console.log(team.regular()); // "Platform"
console.log(team.arrow()); // undefined in modules

Where arrows help

Arrows are a good fit for short callbacks that need the surrounding this, such as array methods inside a method or class. They are a poor fit for object methods, class methods that need the instance, and functions that need to be constructors.

const counter = {
  count: 0,
  start() {
    setInterval(() => {
      this.count += 1;
    }, 1000);
  },
};