javascript - Arrow functions vs Fat arrow functions

Question

I've found on the internet about both names, arrow functions and fat arrow functions but no information about what is different between them.

Are there any differences?

Answer 1

Such a question requires a bit of explanation...

ECMAScript 5

In ES5 specification, there were no arrow functions at all. It was then common to use traditional function expressions like so:

// Example n°1
var myFunction = function () {
  return 'Hello!';
};

// Example n°2
var obj = {
  myFunction: function () {
    return 'Hello!';
  }
};

// Example n°3
var arr = ['foo', 'bar'];
arr.map(function (item) {
  return 'Hello, ' + item + '!';
};

CoffeeScript

When CoffeeScript was introduced by Jeremy Ashkenas, it brought a new terminology, especially thin arrow functions (->) and fat arrow functions (=>).

On the one hand, the thin arrow function is a CoffeeScript equivalent of the ES5 (anonymous) function expression. In CoffeeScript, we could write the previous examples like so:

# Example n°1
myFunction = -> 'Hello!'

# Example n°2
obj =
  myFunction: -> 'Hello!'

# Example n°3
arr = ['foo', 'bar']
arr.map((item) -> "Hello, #{item}!")

On the other hand, the fat arrow function is a nice utility provided by CoffeeScript which has no equivalent syntax in ES5. Its aim is to play more easily with lexical scoping, especially when you want to keep the outer this in a callback. Let's take a universal example with CoffeeScript and the legendary jQuery callback. Suppose we are in the global scope:

// Here "this" is "window"
console.log(this);

$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});

If we want to manipulate the outer "this" in the callback, here is the ES5 code:

var that = this;

$(document).ready(function () {
  console.log(that);
});

With CoffeeScript, it is possible to use a fat arrow function instead:

// "this" is "window"!
$(document).ready => console.log this

Of course, it would not work with a thin arrow function:

// "this" is "document"
$(document).ready -> console.log this

ECMAScript 6 (2015)

ES2015 specification introduced arrow functions. They are an alternative to fat arrow functions in CoffeeScript. But since there are no thin arrow functions in ES6, there is no reason to talk about fat arrow functions when you do not use CoffeeScript. In ES6, you would do this:

// Here "this" is "window"
$(document).ready(() => console.log(this));

Now if you want to preserve the normal behavior of lexical scoping, just use the ES5 syntax:

$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});