20

I was reading the source for ScrollListView and in several places I see the use of () => {}.

Such as on line 25,

this.cellReorderThreshold = () => {
    var ratio = (this.CELLHEIGHT*this.cellsWithinViewportCount)/4;
    return ratio < this.CELLHEIGHT ? 0 : ratio;
};

line 31,

this.container.addEventListener('scroll', () => this.onScroll(), false);

line 88.

resizeTimer = setTimeout(() => {
    this.containerHeight = this.container.offsetHeight;
}, 250);

Is this a shorthand for function and if it differs in any way, how so?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
cnotethegr8
  • 7,342
  • 8
  • 68
  • 104
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Sirko Mar 13 '15 at 11:13

2 Answers2

29

This is the new arrow syntax of ES6. It differs by the treatment of this: function gets a this according to the calling context (traditional semantics), but the arrow functions keep the this of the context of definition.

see http://tc39wiki.calculist.org/es6/arrow-functions/

thriqon
  • 2,458
  • 17
  • 23
  • 2
    Please note browsers compatibility https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – user3455363 Mar 13 '15 at 11:14
  • 1
    Mozilla compat tables don't seem to be updated often. Check our table for up-to-date support — https://kangax.github.io/compat-table/es6/#arrow_functions – kangax Mar 13 '15 at 16:22
6

ECMAScript 6 arrow function introduce, Arrow (=>) part of the arrow function syntax.

Arrow functions work differently from traditional JavaScript functions. I'm found this article explain how is different from traditional function: http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/

Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76