current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

I'm trying to use the new Map object from Javascript EC6, since it's already supported in the latest Firefox and Chrome versions.

But I'm finding it very limited in "functional" programming, because it lacks classic map, filter etc. methods that would work nicely with a [key, value] pair. It has a forEach but that does NOT returns the callback result.

If I could transform its map.entries() from a MapIterator into a simple Array I could then use the standard .map, .filter with no additional hacks.

Is there a "good" way to transform a Javascript Iterator into an Array? In python it's as easy as doing list(iterator)... but Array(m.entries()) return an array with the Iterator as its first element!!!

EDIT

I forgot to specify I'm looking for an answer which works wherever Map works, which means at least Chrome and Firefox (Array.from does not work in Chrome).

PS.

I know there's the fantastic wu.js but its dependency on traceur puts me off...

share|improve this question
    
Hadn't managed to find the other question! Thanks for helping ;-) ! –  Stefano Feb 25 at 13:49

3 Answers 3

up vote 2 down vote accepted

You are looking for the new Array.from function which converts arbitrary iterables to array instances:

var arr = Array.from(map.entries());

It's not yet supported on Chrome, but can be shimmed (or you can write your own simple one for Maps).

Of course, it might be worth to define map, filter and similar methods directly on the iterator interface, so that you can avoid allocating the array. You also might want to use a generator function instead of higher-order functions:

function* map(iterable) {
    var i = 0;
    for (var item of iterable)
        yield yourTransformation(item, i++);
}
function* filter(iterable) {
    var i = 0;
    for (var item of iterable)
        if (yourPredicate(item, i++))
             yield item;
}
share|improve this answer
    
I would expect the callback to receive (value, key) pairs and not (value, index) pairs. –  Aadit M Shah Feb 25 at 12:49
1  
@AaditMShah: What is a key of an iterator? Of course, if you'd iterate a map, you could define yourTransformation = function([key, value], index) { … } –  Bergi Feb 25 at 12:53
    
An iterator doesn't have a key but a Map does have key value pairs. Hence, in my humble opinion, it doesn't make any sense to define general map and filter functions for iterators. Instead, each iterable object should have its own map and filter functions. This makes sense because map and filter are structure preserving operations (perhaps not filter but map certainly is) and hence the map and filter functions should know the structure of the iterable objects that they are mapping over or filtering. Think about it, in Haskell we define different instances of Functor. =) –  Aadit M Shah Feb 25 at 13:01
    
@AaditMShah: In Haskell, the functor instance of Map doesn't know about keys at all :-) There are many different traverse functions though. The one that comes closest to default JS's .map() method is probable Sequence's mapWithIndex –  Bergi Feb 25 at 13:05
1  
@Stefano: You can shim it easily… –  Bergi Feb 25 at 16:06
up vote 1 down vote

There's no need to transform a Map into an Array. You could simply create map and filter functions for Map objects:

function map(functor, object, self) {
    var result = new Map;

    object.forEach(function (value, key, object) {
        result.set(key, functor.call(this, value, key, object));
    }, self);

    return result;
}

function filter(predicate, object, self) {
    var result = new Map;

    object.forEach(function (value, key, object) {
        if (predicate.call(this, value, key, object)) result.set(key, value);
    }, self);

    return result;
}

For example, you could append a bang (i.e. ! character) to the value of each entry of a map whose key is a primitive.

var object = new Map;

object.set("", "empty string");
object.set(0,  "number zero");
object.set(object, "itself");

var result = map(appendBang, filter(primitive, object));

alert(result.get(""));     // empty string!
alert(result.get(0));      // number zero!
alert(result.get(object)); // undefined

function primitive(value, key) {
    return isPrimitive(key);
}

function appendBang(value) {
    return value + "!";
}

function isPrimitive(value) {
    var type = typeof value;
    return value === null ||
        type !== "object" &&
        type !== "function";
}
<script>
function map(functor, object, self) {
    var result = new Map;

    object.forEach(function (value, key, object) {
        result.set(key, functor.call(this, value, key, object));
    }, self || null);

    return result;
}

function filter(predicate, object, self) {
    var result = new Map;

    object.forEach(function (value, key, object) {
        if (predicate.call(this, value, key, object)) result.set(key, value);
    }, self || null);

    return result;
}
</script>

You could also add map and filter methods on Map.prototype to make it read better. Although it is generally not advised to modify native prototypes yet I believe that an exception may be made in the case of map and filter for Map.prototype:

var object = new Map;

object.set("", "empty string");
object.set(0,  "number zero");
object.set(object, "itself");

var result = object.filter(primitive).map(appendBang);

alert(result.get(""));     // empty string!
alert(result.get(0));      // number zero!
alert(result.get(object)); // undefined

function primitive(value, key) {
    return isPrimitive(key);
}

function appendBang(value) {
    return value + "!";
}

function isPrimitive(value) {
    var type = typeof value;
    return value === null ||
        type !== "object" &&
        type !== "function";
}
<script>
Map.prototype.map = function (functor, self) {
    var result = new Map;

    this.forEach(function (value, key, object) {
        result.set(key, functor.call(this, value, key, object));
    }, self || null);

    return result;
};

Map.prototype.filter = function (predicate, self) {
    var result = new Map;

    this.forEach(function (value, key, object) {
        if (predicate.call(this, value, key, object)) result.set(key, value);
    }, self || null);

    return result;
};
</script>

Edit: In Bergi's answer, he created generic map and filter generator functions for all iterable objects. The advantage of using them is that since they are generator functions, they don't allocate intermediate iterable objects.

For example, my map and filter functions defined above create new Map objects. Hence calling object.filter(primitive).map(appendBang) creates two new Map objects:

var intermediate = object.filter(primitive);
var result = intermediate.map(appendBang);

Creating intermediate iterable objects is expensive. Bergi's generator functions solve this problem. They do not allocate intermediate objects but allow one iterator to feed its values lazily to the next. This kind of optimization is known as fusion or deforestation in functional programming languages and it can significantly improve program performance.

The only problem I have with Bergi's generator functions is that they are not specific to Map objects. Instead, they are generalized for all iterable objects. Hence instead of calling the callback functions with (value, key) pairs (as I would expect when mapping over a Map), it calls the callback functions with (value, index) pairs. Otherwise, it's an excellent solution and I would definitely recommend using it over the solutions that I provided.

So these are the specific generator functions that I would use for mapping over and filtering Map objects:

function * map(functor, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        yield [key, functor.call(that, value, key, entries)];
    }
}

function * filter(predicate, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key    = entry[0];
        var value  = entry[1];

        if (predicate.call(that, value, key, entries)) yield [key, value];
    }
}

function toMap(entries) {
    var result = new Map;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        result.set(key, value);
    }

    return result;
}

function toArray(entries) {
    var array = [];

    for (var entry of entries) {
        array.push(entry[1]);
    }

    return array;
}

They can be used as follows:

var object = new Map;

object.set("", "empty string");
object.set(0,  "number zero");
object.set(object, "itself");

var result = toMap(map(appendBang, filter(primitive, object.entries())));

alert(result.get(""));     // empty string!
alert(result.get(0));      // number zero!
alert(result.get(object)); // undefined

var array  = toArray(map(appendBang, filter(primitive, object.entries())));

alert(JSON.stringify(array, null, 4));

function primitive(value, key) {
    return isPrimitive(key);
}

function appendBang(value) {
    return value + "!";
}

function isPrimitive(value) {
    var type = typeof value;
    return value === null ||
        type !== "object" &&
        type !== "function";
}
<script>
function * map(functor, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        yield [key, functor.call(that, value, key, entries)];
    }
}

function * filter(predicate, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key    = entry[0];
        var value  = entry[1];

        if (predicate.call(that, value, key, entries)) yield [key, value];
    }
}

function toMap(entries) {
    var result = new Map;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        result.set(key, value);
    }

    return result;
}

function toArray(entries) {
    var array = [];

    for (var entry of entries) {
        array.push(entry[1]);
    }

    return array;
}
</script>

If you want a more fluent interface then you could do something like this:

var object = new Map;

object.set("", "empty string");
object.set(0,  "number zero");
object.set(object, "itself");

var result = new MapEntries(object).filter(primitive).map(appendBang).toMap();

alert(result.get(""));     // empty string!
alert(result.get(0));      // number zero!
alert(result.get(object)); // undefined

var array  = new MapEntries(object).filter(primitive).map(appendBang).toArray();

alert(JSON.stringify(array, null, 4));

function primitive(value, key) {
    return isPrimitive(key);
}

function appendBang(value) {
    return value + "!";
}

function isPrimitive(value) {
    var type = typeof value;
    return value === null ||
        type !== "object" &&
        type !== "function";
}
<script>
MapEntries.prototype = {
    constructor: MapEntries,
    map: function (functor, self) {
        return new MapEntries(map(functor, this.entries, self), true);
    },
    filter: function (predicate, self) {
        return new MapEntries(filter(predicate, this.entries, self), true);
    },
    toMap: function () {
        return toMap(this.entries);
    },
    toArray: function () {
        return toArray(this.entries);
    }
};

function MapEntries(map, entries) {
    this.entries = entries ? map : map.entries();
}

function * map(functor, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        yield [key, functor.call(that, value, key, entries)];
    }
}

function * filter(predicate, entries, self) {
    var that = self || null;

    for (var entry of entries) {
        var key    = entry[0];
        var value  = entry[1];

        if (predicate.call(that, value, key, entries)) yield [key, value];
    }
}

function toMap(entries) {
    var result = new Map;

    for (var entry of entries) {
        var key   = entry[0];
        var value = entry[1];

        result.set(key, value);
    }

    return result;
}

function toArray(entries) {
    var array = [];

    for (var entry of entries) {
        array.push(entry[1]);
    }

    return array;
}
</script>

Hope that helps.

share|improve this answer
    
it does thanks! Giving the good answer mark to @Bergi though because I didn't know the "Array.from" and that's the most to the point answer. Very interesting discussion between you too though! –  Stefano Feb 25 at 13:57
1  
@Stefano I edited my answer to show how generators can be used to correctly transform Map objects using specialized map and filter functions. Bergi's answer demonstrates the use of generic map and filter functions for all iterable objects which cannot be used for transforming Map objects because the keys of the Map object are lost. –  Aadit M Shah Feb 25 at 14:31
    
Wow, I really like your edit. I ended up writing my own answer here: stackoverflow.com/a/28721418/422670 (added there since this question has been closed as a duplicate) because the Array.from does not work in Chrome (while Map and iterators do!). But I can see the approach is very similar and you could just add the "toArray" function to your bunch! –  Stefano Feb 25 at 14:31
1  
@Stefano Indeed. I edited my answer to show how to add a toArray function. –  Aadit M Shah Feb 25 at 14:37
up vote 0 down vote

[...map.entries()] or Array.from(map.entries())

It's super-easy.

Anyway - iterators lack reduce, filter, and similar methods. You have to write them on your own, as it's more perfomant than converting Map to array and back. But don't to do jumps Map -> Array -> Map -> Array -> Map -> Array, because it will kill performance.

share|improve this answer
1  
Unless you have something more substantial, this should really be a comment. In addition, Array.from has already been covered by @Bergi. –  Aadit M Shah Feb 25 at 13:03
1  
And, as I wrote in my original question, [iterator] does not work because in Chrome it creates an array with a single iterator element in it, and [...map.entries()] is not an accepted syntax in Chrome –  Stefano Feb 25 at 14:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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