What is the difference between a function and an arrow function in JavaScript?

An important difference between the regular and the Arrow functions also involves the "arguments" object:

In JavaScript, the "arguments" object is a special object that is automatically available within the scope of a regular function, allowing you to access the arguments passed to that function, even if they are not explicitly defined as named parameters.

Arrow functions do not have their own "arguments" object. Instead, they inherit the "arguments" object from their containing (surrounding) function or lexical scope.

function regularFunction() {
  console.log(arguments); // This works
}

const arrowFunction = () => {
  console.log(arguments); // This will not work as expected
};

regularFunction(1, 2, 3); // // Arguments(3) [1, 2, 3, ...]
arrowFunction(1, 2, 3); // Uncaught ReferenceError

In the above example, the "arguments" are not defined in the scope of the "arrowFunction", which leads to the ReferenceError.

function regularFunction() {
  const arrowFunction = () => {
    console.log(arguments); // Accesses the "arguments" object of the regularFunction
  };

  arrowFunction();
}

regularFunction(1, 2, 3); // Arguments(3) [1, 2, 3, ...]

In this example, the "arrowFunction" has access to the "arguments" object defined in the scope of the surrounding "regularFunction".

The most important difference ist the "this" binding:

Regular functions have their own this binding, which is determined by how they are called. The value of this inside a regular function depends on the context in which the function is invoked (e.g., the object calling it). For a typical function, the value of `this` refers to the object that the function is called on or associated with.

Arrow functions do not have their own this binding. Instead, they inherit the this value from the enclosing scope.

const arrowFunc = () => console.log(this)
function regularFunc () { 
    console.log(this) 
}

const foobar = {
    arrowFunc: () => console.log(this),
    regularFunc: function() { console.log(this) }
}

arrowFunc()
// Window { ... }
regularFunc()
// Window { ... }

foobar.arrowFunc()
// Window { ... }
foobar.regularFunc()
// {arrowFunc: ƒ, regularFunc: ƒ}

As you can see in the above example, for a regular function the "this" binding changes depending on the context. For the arrow function is always the enclosing scope, which is the Window-object in this case. For this reason the arrow function should not be used as methods.