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);
});

Answer 2

Are there any differences?

No.

Except that the term "fat arrow function" is deprecated and obsolete.

This answer does not apply to CoffeeScript, in case anybody is still using that.

Answer 3

In CoffeeScript fat arrow functions pass in the encapsulating scope whilst normal arrow don't.

Answer 4

From the Tag wiki: (Since amended)

A function syntax in CoffeeScript and new in JavaScript with EcmaScript6 that syntactically resembles the lambda functions of other languages but is not just syntactic sugar. CoffeeScript has both "->" and "=>" while JavaScript has only the latter, which are also known as "fat arrow functions".

So when used with reference to JS, they are the same.