Fat Arrow Notation in JavaScript

One of the most underrated features of later iterations of JavaScript, is the Fat Arrow Notation.

The Fat Arrow is your friend.

The Fat Arrow Notation typically looks like this. Not just an arrow, but a thick arrow.

() => {}

What it's commonly used to do, is provide a shorthand for function declarations. This is the classic declaration...

function f(x, y) { return x + y; }

...and this is the Fat Arrow Notation.

let f = (x, y) => { return x + y; };

How is this shorthand? Well, aside from the obvious dropping of the function keyword, there are some other aspects of the Fat Arrow Notation that would make the shorthand more apparent if we tried using it on anonymous functions.

function (x) { return x * x; }

This would be the shorthand version. The difference is... dramatic.

x => x * x;

However, omitting the brackets only works if there is exactly one parameter in the function. If there are more parameters or no parameters, the brackets are required.

() => 1 * 1;

(x, y) => x * y;

The return statement is also implied, along with the curly brackets, if there is only one statement in the function body. Thus, if there were two lines in the function body, these would be required. The first example below uses a temporary variable, z, to store the value of x multiplied by x before returning the value of z multiplied by y.

(x, y) => { var z = x * x; return z * y};

This example uses the more direct method of returning the value of x multiplied by x multiplied by y. Thus, the return statement and the curly brackets are not required.

(x, y) => x * x * y;

Using Fat Arrow Notation in callbacks

The code below, using the map() method, returns all elements from arr that are greater than 200. This would net us an array containing the values 500, 1000 and 400.

var arr = [100, 200, 500, 1000, 400];

var moreThan200 = arr.map((x) => x > 200);

Here, we use the setTimeout() function. Passing in a callback using the Fat Arrow Notation, we ensure that this will appear in your console after 5 seconds have passed.

setTimeout
(
  () =>
  {
    console.log("This occurred after 5000 milliseconds");
  },
  5000
)

Scope

If you use the this keyword within a callback, it leads to scope problems.

Consider this code. The this keyword below does not refer to the obj object. If you run the code, you're not going to be seeing "This is a test!" in the console.

let obj =
{
  a: "This is a test!",
  f: function()
  {
    setTimeout
    (
      function()  
      {
        console.log(this.a);
      },
      5000
    )
  }
}

You typically have to do a bit of reassignment first in order for it to work. And it does work, it's just a pain in the ass to remember. And clumsy as heck.

let obj =
{
  a: "This is a test!",
  f: function()
  {
    var x = this.a;
    setTimeout
    (
      function()
      {
        console.log(x);
      },
      5000
    )
  }
}

So we do this instead! Good old Fat Arrow to the rescue! That's because the arrow function does not have its own scope, so this is going to refer to obj, which is the next entity within reach further up the hierarchy.

let obj =
{
  a: "This is a test!",
  f: function()
  {
    setTimeout
    (
      () =>
      {
        console.log(this.a);
      },
      5000
    )
  }
}

How much do I love this?

I love this a whole lot. It solves so many problems. I probably didn't explain all that very well, but here's what you need to know:

One, it reduces the amount of code you have to write in JavaScript.
Two, it solves scope problems.

What's not to love?

(Good) => {bye};
T___T