What if Underscore was written in ES6 – Problem #1 – Solution to problem #1: Generators



What if Underscore was written in ES6 – Problem #1 – Solution to problem #1: Generators

0 0


if-underscore-was-written-in-es6

how would underscore (or lodash) change externally if it was written in es6 javascript?

On Github aaronj1335 / if-underscore-was-written-in-es6

What if Underscore was written in ES6

Would ES6 have changed Underscore externally?

(I think so.)

Problem #1

var activeUsers = _.filter(users,    function(user) { return user.isActive });
var ages        = _.map(activeUsers, function(user) { return user.age });
var maxAge      = _.reduce(ages, max, 0);
            

Problem #1: Wasteful intermediate arrays

var activeUsers = _.filter(users,    function(user) { return user.isActive });
var ages        = _.map(activeUsers, function(user) { return user.age });
var maxAge      = _.reduce(ages, max, 0);
            

Solution to problem #1: Generators

function* map(items, transform) {
  for (item of items)
    yield transform(item);
}










Notice how similiar this is to the previous code.

Solution to problem #1: Generators

function* map(items, transform) {
  for (item of items)
    yield transform(item);
}

function* filter(items, predicate) {
  for (item of items)
    if (predicate(item))
      yield item;
}




Notice how similiar this is to the previous code.

Solution to problem #1: Generators

function* map(items, transform) {
  for (item of items)
    yield transform(item);
}

function* filter(items, predicate) {
  for (item of items)
    if (predicate(item))
      yield item;
}

var activeUsers = filter(users,    function(user) { return user.isActive });
var ages        = map(activeUsers, function(user) { return user.age });
var maxAge      = reduce(ages, max, 0);

Notice how similiar this is to the previous code.

Problem #2

Problem #2

Problem #2

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };






  

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };
  var iter8tor = iterable[iterator]();





  

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };
  var iter8tor = iterable[iterator]();

  iter8tor.next()  // -> {value: 'item 1', done: false}



  

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };
  var iter8tor = iterable[iterator]();

  iter8tor.next()  // -> {value: 'item 1', done: false}
  iter8tor.next()  // -> {value: 'item 2', done: false}


  

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };
  var iter8tor = iterable[iterator]();

  iter8tor.next()  // -> {value: 'item 1', done: false}
  iter8tor.next()  // -> {value: 'item 2', done: false}
  iter8tor.next()  // -> {value: 'item 3', done: false}

  

Solution to problem #2: Iterators

  var iterable = {};
  iterable[iterator] = function() { /* ... */ };
  var iter8tor = iterable[iterator]();

  iter8tor.next()  // -> {value: 'item 1', done: false}
  iter8tor.next()  // -> {value: 'item 2', done: false}
  iter8tor.next()  // -> {value: 'item 3', done: false}
  iter8tor.next()  // -> {value: undefined, done: true}
  

Solution to problem #2: Iterators

Solution to problem #2: Iterators

Solution to problem #2: Iterators

But there's more…

Generators combine with iterators to allow us to extend the built-in for…of syntax in powerful ways:

  jQuery.prototype[iterator] = function* iterator() {
    for (var i = 0; i < this.length; i++)
      yield $(this.get(i));
  }

  for (var p of $('p'))
    p.fadeOut();
  

From @littlecalculist's wiki.

Thanks!

These slides are online at: aaronj1335 / if-underscore-was-written-in-es6