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

View Github Repository Open presentation in a new window

aaronj1335

See all presentation from aaronj1335

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