176

Say we have a Map: let m = new Map();, using m.values() returns a map iterator.

But I can't use forEach() or map() on that iterator and implementing a while loop on that iterator seems like an anti-pattern since ES6 offer functions like map().

So is there a way to use map() on an iterator?

7
  • Not out of the box, but you can use third party libraries like lodash map function which supports Map as well.
    – hazardous
    May 10, 2017 at 6:56
  • 1
    Map itself has a forEach for iterating over its key-value pairs.
    – hazardous
    May 10, 2017 at 6:57
  • Converting the iterator to an array and map on it like Array.from(m.values()).map(...) works, but I think it's not the best way to do this.
    – JiminP
    May 10, 2017 at 6:58
  • which problem like you to solve with using an iterator while an array would fit better for using Array#map? May 10, 2017 at 7:27
  • 1
    @NinaScholz I'm using a general set like here: stackoverflow.com/a/29783624/4279201
    – shinzou
    May 10, 2017 at 9:27

10 Answers 10

149

The simplest and least performant way to do this is:

Array.from(m).map(([key,value]) => /* whatever */)

Better yet

Array.from(m, ([key, value]) => /* whatever */))

Array.from takes any iterable or array-like thing and converts it into an array! As Daniel points out in the comments, we can add a mapping function to the conversion to remove an iteration and subsequently an intermediate array.

Using Array.from will move your performance from O(1) to O(n) as @hraban points out in the comments. Since m is a Map, and they can't be infinite, we don't have to worry about an infinite sequence. For most instances, this will suffice.

There are a couple of other ways to loop through a map.

Using forEach

m.forEach((value,key) => /* stuff */ )

Using for..of

var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one
8
  • Can maps have an infinite length?
    – ktilcu
    Nov 12, 2017 at 21:33
  • 2
    @ktilcu for an iterator: yes. a .map on an iterator can be thought of as a transform on the generator, which returns an iterator itself. popping one element calls the underlying iterator, transforms the element, and returns that.
    – hraban
    Nov 14, 2017 at 14:46
  • 22
    The problem with this answer is it turns what could be an O(1) memory algorithm into an O(n) one, which is quite serious for larger datasets. Aside from, of course, requiring finite, non-streamable iterators. The title of the question is "Using map() on an iterator", I disagree that lazy and infinite sequences are not part of the question. That's precisely how people use iterators. The "map" was only an example ("Say.."). The good thing about this answer is its simplicity, which is very important.
    – hraban
    Nov 16, 2017 at 15:53
  • 2
    @hraban Thanks for adding to this discussion. I can update the answer to include a few caveats just so future travelers have the info front and center. When it comes down to it we will often have to make the decision between simple and optimal performance. I will usually side with simpler (to debug, maintain, explain) over performance.
    – ktilcu
    Nov 16, 2017 at 17:22
  • 5
    @ktilcu You can instead call Array.from(m, ([key,value]) => /* whatever */) (notice the mapping function is inside the from) and then no intermediate array is created (source). It still moves from O(1) to O(n), but at least iteration and mapping happen in just one full iteration.
    – Daniel
    Apr 15, 2019 at 5:38
32

Other answers here are... Weird. They seem to be re-implementing parts of the iteration protocol. You can just do this:

function* mapIter(iterable, callback) {
  for (let x of iterable) {
    yield callback(x);
  }
}

and if you want a concrete result just use the spread operator ....

[...mapIter([1, 2, 3], x => x**2)]
1
  • nice! is there an iterable prototype to which i could this as a "." function so that i can use it as [1, 2, 3].mapIter(x => x**2)? (not just for arrays but any iterable) May 29 at 9:23
30

This simplest and most performant way is to use the second argument to Array.from to achieve this:

const map = new Map()
map.set('a', 1)
map.set('b', 2)

Array.from(map, ([key, value]) => `${key}:${value}`)
// ['a:1', 'b:2']

This approach works for any non-infinite iterable. And it avoids having to use a separate call to Array.from(map).map(...) which would iterate through the iterable twice and be worse for performance.

0
29

You could define another iterator function to loop over this:

function* generator() {
    for (let i = 0; i < 10; i++) {
        console.log(i);
        yield i;
    }
}

function* mapIterator(iterator, mapping) {
    for (let i of iterator) {
        yield mapping(i);
    }
}

let values = generator();
let mapped = mapIterator(values, (i) => {
    let result = i*2;
    console.log(`x2 = ${result}`);
    return result;
});

console.log('The values will be generated right now.');
console.log(Array.from(mapped).join(','));

Now you might ask: why not just use Array.from instead? Because this will run through the entire iterator, save it to a (temporary) array, iterate it again and then do the mapping. If the list is huge (or even potentially infinite) this will lead to unnecessary memory usage.

Of course, if the list of items is fairly small, using Array.from should be more than sufficient.

7
  • How can a finite amount of memory hold an infinite data structure?
    – shinzou
    Nov 13, 2017 at 18:26
  • 5
    it doesn't, that's the point. Using this you can create "data streams" by chaining an iterator source to a bunch of iterator transforms and finally a consumer sink. E.g. for streaming audio processing, working with huge files, aggregators on databases, etc.
    – hraban
    Nov 14, 2017 at 14:42
  • 1
    I like this answer. Can anyone recommend a library that offers Array-like methods on iterables? Aug 24, 2018 at 4:20
  • 1
    mapIterator() does not guarantee that underlying iterator will be properly closed (iterator.return() called) unless the return value's next was called at least once. See: repeater.js.org/docs/safety Apr 26, 2020 at 20:01
  • 1
    Why are you manually using the iterator protocol instead of just a for .. of .. loop?
    – cowlicks
    Nov 16, 2020 at 17:34
9

There is a proposal, that brings multiple helper functions to Iterator: https://github.com/tc39/proposal-iterator-helpers (rendered)

You can use it today by utilizing core-js-pure:

import { from as iterFrom } from "core-js-pure/features/iterator";

// or if it's working for you (it should work according to the docs,
// but hasn't for me for some reason):
// import iterFrom from "core-js-pure/features/iterator/from";

let m = new Map();

m.set("13", 37);
m.set("42", 42);

const arr = iterFrom(m.values())
  .map((val) => val * 2)
  .toArray();

// prints "[74, 84]"
console.log(arr);
3

You could retrieve an iterator over the iterable, then return another iterator that calls the mapping callback function on each iterated element.

const map = (iterable, callback) => {
  return {
    [Symbol.iterator]() {
      const iterator = iterable[Symbol.iterator]();
      return {
        next() {
          const r = iterator.next();
          if (r.done)
            return r;
          else {
            return {
              value: callback(r.value),
              done: false,
            };
          }
        }
      }
    }
  }
};

// Arrays are iterable
console.log(...map([0, 1, 2, 3, 4], (num) => 2 * num)); // 0 2 4 6 8
2
  • How would this look in typescript?
    – Brian
    Aug 20, 2021 at 16:14
  • @Brian the same but just has types: Playground Link
    – VLAZ
    Oct 27 at 6:25
3

In case someone needs the typescript version:

function* mapIter<T1, T2>(iterable: IterableIterator<T1>, callback: (value: T1) => T2) {
  for (let x of iterable) {
    yield callback(x);
  }
}
2

Take a look at https://www.npmjs.com/package/fluent-iterable

Works with all of iterables (Map, generator function, array) and async iterables.

const map = new Map();
...
console.log(fluent(map).filter(..).map(..));
1

You could use itiriri that implements array-like methods for iterables:

import { query } from 'itiriri';

let m = new Map();
// set map ...

query(m).filter([k, v] => k < 10).forEach([k, v] => console.log(v));
let arr = query(m.values()).map(v => v * 10).toArray();
2
-1

Based on the answer from MartyO256 (https://stackoverflow.com/a/53159921/7895659), a refactored typescript approach could be the following one:

function mapIterator<TIn, TOut>(
  iterator: Iterator<TIn>,
  callback: (input: TIn) => TOut,
): Iterator<TOut> {
  return {
    next() {
      const result: IteratorResult<TIn> = iterator.next();

      if (result.done === true) {
        return result;
      } else {
        return {
          done: false,
          value: callback(result.value),
        };
      }
    },
  };
}

export function mapIterable<TIn, TOut>(
  iterable: Iterable<TIn>,
  callback: (input: TIn) => TOut,
): Iterable<TOut> {
  const iterator: Iterator<TIn> = iterable[Symbol.iterator]();
  const mappedIterator: Iterator<TOut> = mapIterator(iterator, callback);

  return {
    [Symbol.iterator]: () => mappedIterator,
  };
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.