Use generators to return lists of things

[mjethani]

Background

Sometimes we have code like this:

function getURLsFromElement(element)
{
  let urls = [];

  if (element.src)
    urls.push(element.src);

  if (element.srcset)
  {
    for (let url of element.srcset.split(","))
      urls.push(url.trim());
  }

  for (let child of element.children)
    urls.push(...getURLsFromElement(child));

  return urls;
}

This is a function that takes an input and returns a list, in this case a list of URLs from the given element.

ES6 has support for generators, which makes it possible to write the same code in a cleaner and possibly more efficient way.

For example:

function* getURLsFromElement(element)
{
  if (element.src)
    yield element.src;

  if (element.srcset)
  {
    for (let url of element.srcset.split(","))
      yield url.trim();
  }

  for (let child of element.children)
    yield* getURLsFromElement(child);
}

On the calling side the only change required is to iterate over the result, for example:

  let urls = [...getURLsFromElement(element)];

There is often a for...of loop on the calling side, which already works with generators, so there's no need for any change. If the caller terminates the iteration, the entire generator chain returns, which has the added benefit of improving performance.

For example, in the following code:

for (let url of getURLsFromElement(element))
{
  if (url)
  {
    doSomething(url);
    break;
  }
}

The loop terminates if the first URL returned is truthy, and in that case the function getURLsFromElement does not bother checking the value of the srcset attribute and the attribute values of the children. Without generators, the callee would need to know the requirements of the caller up front in order to do this kind of optimization, but with generators the caller decides when to terminate the callee.

This is already an improvement, but we can go further in terms of code readability. For example, by adopting a functional style:

function* getURLsFromElement(element)
{
  if (element.src)
    yield element.src;

  if (element.srcset)
    yield* element.srcset.split(",").map(url => url.trim());

  for (let urls of [...element.children].map(getURLsFromElement))
    yield* urls;
}

Note that this does negate some of the aforementioned performance benefits, since now we're trimming every URL before it's even needed.

Further, if yielding falsy values is not a concern, this can be combined with object destructuring in the parameter list to make the code even more succinct:

function* getURLsFromElement({children: [...children], src, srcset = ""})
{
  yield src;
  yield* srcset.split(",").map(url => url.trim());

  for (let urls of children.map(getURLsFromElement))
    yield* urls;
}

With each change we may degrade the performance slightly in exchange for better readability.

Also note that this only works transparently with pure functions, i.e. functions that have no side effects, or where the side effects and the order in which they occur do not matter.

Also see #6434.

What to change

Find functions that return arrays that might be suitable candidates to be replaced with generators and make the appropriate changes.

Whether or not a specific change of this type is warranted, and to what extent, should be evaluated on a case-by-case basis.

[sebastian]

Sorry, but we switched to GitLab. If this issue is still relevant, please file it again in the ​new issue tracker.