Arrow Functions

arrow-functions.md

Use them to avoid doing this:

this.list = [];
const self = this;
function callback() {
  self.list;
}
someAsyncFunction(callback);

so you can do

this.list = [];
someAsyncFunction(() => {
  this.list;
});

Short syntax is not always good

Not as amazing as functional programming zealots will want you to think.

return fetch.then(l => l.map(e => process(e))).then(l => doSomething(l));

Sometimes you do not want to retain the context of the parent function.

const someObj = {
  list: [1, 2, 3],
  someFunction: () => {
    // means window.list instead of someObj.list
    this.list;
  }
};

// `this` is pointing to window again
SomeObject.prototype.someFunction = () => {  
};

someElement.addEventListener(() => {
  this.textContent = ''; // `this` is pointing to window
});

// yeah, contrived example, still valid JS
let SomeClass = () => {};
new SomeClass(); // won't work, it isn't a constructor

Ember

Ember.computed('someProperty', () => {
  // you guessed right, `this` is the window object
  this.get('someProperty');
})