No arguments in Javascript Arrow Functions, why?!

TL;DR

const quirks = () => { return this.arguments === undefined }

Arrow functions introduced a sweet shorthand and compact alternative to the usual function expression but it came with limits and the user should be aware of the choice when handling this usecase.

ES6 allows the user, correctly one might add, to use arguments as an array-like object by means of the spread operator:

const fn = (...arguments) => console.log(arguments)

Javascript Arrow Functions have no arguments array

So we already said that the Arrow functions are a compact shorthand to writing traditional function expressions but I see a lot of users making use of them in all situations without regards to why the alternative was even born at all.

The main differences between regular javascript functions and arrow functions can be listed as:

1. Arrow functions have a different syntax, but you probably already know that

// 'Fat' Arrow Function in Javascript
const fn = () => 'hello world'

// Standard function in Javascript
function standardFn() {
  return 'hello world'
}

// Standard function declared as an expression in Javascript
const standardExpressionFn = function () {
  return 'hello world'
}

2. Arrow functions don't have access to the binding of this or super which means that they are really great at maintaining context but they can't be used as constructors (they will throw a Type Error)

// 'Fat' Arrow Function in Javascript example this keyword
function helloWorld() {
  this.hi = 0

  this.sayHi = function (hi) {
    this.hi += hi
    setTimeout(() => console.log(this.hi), 1000)
  }
}

3. Arrow functions in Javascript do not have their own arguments object

// Arrow Function in Javascript example arguments
const arguments = [1, 2, 3]
const arrowFunction = () => arguments[0] // takes arguments from enclosing context

function standardFn(param) {
  return const fn = () => arguments[0] + param; // takes arguments from internal binding, hence param
}

// You can use the spread operator with rest parameters
// as the de facto standard to using the arguments object with arrow functions in Javascript
const arrowFunctionRest = (...args) => args.map(arg => arg + 1)

4. Arrow functions in Javascript do not have a prototype property

5. The yield keyword cannot be used in an arrow functions so they cannot be used as generators

Want to read the official specification for Arrow Functions in Javascript? Take a look at tc39.es

The goodbye

I hope you found this article useful and to your liking and if you have any requests, drop a message on one of my social media accounts or open an issue/start a discussion on github, on this repository!

As always you can find me on Twitter, listen to my Podcast on Spotify and add me on LinkedIn to talk professionally (yeah, right)

Interesting? You might also like: