newPaths.sort((a, b) => a.Id - b.Id);

These are functionally equivalent

Screen Shot 2017-08-29 at 6.39.46 AM.png

Screen Shot 2017-08-29 at 6.39.51 AM.png

Note the difference: In arrow functions the stuff put in the () are the method arguments and the stuff that comes after ({ // }) is the return statement. That’s it.

The first method uses the new JavaScript arrow function. And it was created to do two things.

  1. Shorter functions.
  2. The non-binding of this.

Shorter functions

Normally in JS you pass functions as parameters using a function expression. Something that looks like this on i.e. Array.prototype.map() (which returns a new array with the results of calling the provide method on every element in the calling array).

Screen Shot 2017-08-29 at 6.45.19 AM.png

This is called a function expression and it’s how you can define functions that can be passed as arguments to methods.

ES2015 defined a shorter way of doing this. Something called arrow functions.

Screen Shot 2017-08-29 at 6.50.09 AM.png

With arrow functions, instead of defining everything with the keyword function, you can just create a lambda like expression like this.

Screen Shot 2017-08-29 at 6.51.09 AM.png

The way to read this is (parameters) => { // code }

i.e. you declare the parameters you need passed in in the () and then you use them in your code. This leads to some nicer more terse code.

No binding of this

Until arrow functions, every new function define its own ‘this’ value. This proved to be annoying in OO style programming.

Screen Shot 2017-08-29 at 6.59.24 AM.png

In ECMAScript 3/5, this issue was fixable by assigning another value to ‘this’ that could be closed over.

Screen Shot 2017-08-29 at 7.01.30 AM.png

Alternatively, a bound function could be created so that a preassigned ‘this’ value would be passed to the bound target function.

An arrow function does not create its own ‘this’, the ‘this’ value of the enclosing execution context is used instead. Thus the ‘this’ value in ‘setInternal’ has the same value as ‘this’ in the enclosing function.

Screen Shot 2017-08-29 at 7.18.16 AM.png

No binding of arguments

Arrow functions do not bind an arguments object. Thus, in this example, arguments is simple a reference to the same name in the enclosing scope.

Screen Shot 2017-08-29 at 7.24.00 AM.png

Here we define a variable 42, create a method out of it using () => arrow function, and then execute the method.

Screen Shot 2017-08-29 at 7.25.03 AM.png

Here we define a function foo(), define a variable method f (using the args rest parameters) and then simply return the first argument.

Arrow functions used as methods

As mentioned previously, arrow functions should not be used as methods, but rather only passed as non-method functions. Here’s what happens when used as method.

Screen Shot 2017-08-29 at 7.28.01 AM.png

Because the method ‘b’ does not bind ‘this’, ‘this’ is undefined.

You also can’t use arrow functions as constructors or access their prototype property.

Screen Shot 2017-08-29 at 7.29.52 AM.png

Misc

These are functionally equivalent.

Screen Shot 2017-08-31 at 6.10.14 AM.png

Arrow functions for beginners

Screen Shot 2017-08-31 at 7.21.13 AM.png

Screen Shot 2017-08-31 at 7.21.45 AM.png

Screen Shot 2017-08-31 at 7.21.51 AM.png

Screen Shot 2017-08-31 at 7.21.58 AM.png

Screen Shot 2017-08-31 at 7.22.05 AM.png

Screen Shot 2017-08-31 at 7.22.12 AM.png

Screen Shot 2017-08-31 at 7.22.25 AM.png

Screen Shot 2017-08-31 at 7.23.51 AM.png

Mawr…

http://wesbos.com/arrow-functions/

Screen Shot 2017-08-31 at 7.28.33 AM

Screen Shot 2017-08-31 at 7.28.48 AM

Screen Shot 2017-08-31 at 7.29.10 AM

Screen Shot 2017-08-31 at 7.29.43 AM

Screen Shot 2017-08-31 at 7.30.14 AM

Screen Shot 2017-08-31 at 7.31.33 AM

Screen Shot 2017-08-31 at 7.26.21 AM.png

Links that help
Arrow functions
Function expression
Function.prototype.bind
Arrow functions for beginners

Advertisements