I come from the .NET world, where I’m used to using LINQ for massaging collections of data in a clear functional way. ES6 added lots of useful functions to Array that lets me write code like

1

[1,2,3,4].filter(x => x ===3).map(x => x *2);

I like this style because it avoids deep nested loops and makes the intention of the code very clear.

To my surprise, I learnt that I can’t write code like this for other data structures like Map. because these expose their data as iterators and not as Arrays.

Iterators are a whole other beast introduced in ES6, and the only built-in way to use filter/map with them is to convert then to Arrays.

1
2
3
4
5
6
7

let map = new Map([['foo', 3], ['bar', 2], ['baz', 4]])
const reducer = (accumulator, currentValue) => accumulator + currentValue;
const result = Array.from(map)
  .map(x => `key: ${x[0]} value: ${x[1]}`)
  .reduce(reducer);

console.log(result)

There are serveral libraries like wu that adds support for these operations and lots more. Instead of just adding another library, I figured I would see how wu worked and see if I can create something for just the parts I need.

Luckily wu is a pretty well organized library and while my javascript foo is not that strong, I was able to break down the basic functionality.

Lets start by trying to create an object that acts as a proxy for iterables. We can add methods on that object like filter and map later on. I’ll call it Chain just because I want to use this to chain a bunch of methods on iterators.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

class Chain {
	constructor(iterable) {
		this.iterator = Chain.getIterator(iterable);
	} 

	[Symbol.iterator]() {
		return this.iterator;
	}

	* filter(fn = Boolean) {
		for (let x of this) {
			if (fn(x)) {
				yield x;
			}
		}
	}

	/**
	 * Return whether a thing is iterable.
	 */
	static isIterable(thing) {
		return thing && typeof thing[Symbol.iterator] === 'function';
	};

	/**
	 * Get the iterator for the thing or throw an error.
	 * @param thing
	 * @return {*}
	 */
	static getIterator(thing) {
		if (Chain.isIterable(thing)) {
			return thing[Symbol.iterator]();
		}
		throw new TypeError('Not iterable: ' + thing);
	};
}

This is a good starting point. Chain acts as a proxy for the iterable and so we can some helper methods to it like filter

You can use it like so

1
2
3

for (const item of new Chain([1, 2, 3]).filter(x => x === 1)) {
	console.log(item);
}

Output

1

1

I don’t want to keep typing new Chain() every time, so I’ll add a little helper

1
2
3

function chain(iterable) {
	return new Chain(iterable);
}

So now I can do this

1
2
3

for (const item of chain([1, 2, 3]).filter(x => x === 1)) {
	console.log(item);
}

The problem is we can’t chain these together. We need map to return another instance of Chain

Lets modify Chain to do that.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

class Chain {
	constructor(iterable) {
		this.iterator = Chain.getIterator(iterable);
	}

	[Symbol.iterator]() {
		return this.iterator;
	}

	/**
	 * internal filter
	 * @param fn
	 * @returns {IterableIterator<*>}
	 * @private
	 */
	* _filter(fn) {
		for (let x of this) {
			if (fn(x)) {
				yield x;
			}
		}
	}

	/**
	 * wrapper filter
	 * @param fn
	 * @returns {*}
	 */
	filter(fn = Boolean) {
		return chain(this._filter(fn))
	}

	/**
	 * Return whether a thing is iterable.
	 */
	static isIterable(thing) { 
		// same as before
	};

	/**
	 * Get the iterator for the thing or throw an error.
	 * @param thing
	 * @return {*}
	 */
	static getIterator(thing) {
		// same as before
	};
}

What is different? filter() now returns the _filter() iterable, wrapped in a Chain().

Now let me add a map to Chain.

1
2
3
4
5
6
7
8
9

	* _map(fn) {
		for (let x of this) {
			yield fn(x);
		}
	};

	map(fn) {
		return chain(this._map(fn));
	}

The set up looks the same as filter.

Now we can do something like this

1
2
3

for (const item of chain([1, 2, 3, 4]).filter(x => x % 2 === 0).map(x => x + 1)) {
	console.log(item);
}

Output

1
2

3
5

And what about reduce?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

	reduce(fn, initial) {
		let val = initial;
		let first = true;
		for (let x of this) {
			if (val === undefined) {
				val = x;
				first = false;
				continue;
			}
			val = fn(val, x);
		}
		return val;
	}

This is a simpler one, since we’re not going to return an iterator from this function. If we are not provided with an initial value, we will use the first item in the iterator as the initial value.

Now you can do this

1
2
3
4
5

const item2 = chain([1, 2, 3, 4])
				.filter(x => x % 2 === 0)
				.map(x => x + 1)
				.reduce((x, y) => x + y);
console.log(`reduce: ${item2}`);

Output

1

reduce: 8

This is what the complete class looks like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

class Chain {
	constructor(iterable) {
		this.iterator = Chain.getIterator(iterable);
	}

	next() {
		return this.iterator.next.call(this.iterator);
	}

	[Symbol.iterator]() {
		return this.iterator;
	}

	/**
	 * internal filter
	 * @param fn
	 * @returns {IterableIterator<*>}
	 * @private
	 */
	* _filter(fn) {
		for (let x of this) {
			if (fn(x)) {
				yield x;
			}
		}
	}

	/**
	 * wrapper filter
	 * @param fn
	 * @returns {*}
	 */
	filter(fn = Boolean) {
		return chain(this._filter(fn));
	}

	* _map(fn) {
		for (let x of this) {
			yield fn(x);
		}
	};

	map(fn) {
		return chain(this._map(fn));
	}

	reduce(fn, initial) {
		let val = initial;
		let first = true;
		for (let x of this) {
			if (val === undefined) {
				val = x;
				first = false;
				continue;
			}
			val = fn(val, x);
		}
		return val;
	}

	/**
	 * Return whether a thing is iterable.
	 */
	static isIterable(thing) {
		return thing && typeof thing[Symbol.iterator] === 'function';
	};

	/**
	 * Get the iterator for the thing or throw an error.
	 * @param thing
	 * @return {*}
	 */
	static getIterator(thing) {
		if (Chain.isIterable(thing)) {
			return thing[Symbol.iterator]();
		}
		throw new TypeError('Not iterable: ' + thing);
	};
}

We can add lots more functionality to this as needed, but this is a good starting point.

Here is also a gist for the whole thing

/**
* This is the iterator, becusae it implements the iterator protocol
* Iterator protocol requires an object that implements next() with certain semantics
*/
class Chain {
constructor(iterable) {
this.iterator = Chain.getIterator(iterable);
}
next() {
return this.iterator.next.call(this.iterator);
}
[Symbol.iterator]() {
return this.iterator;
}
/**
* internal filter
* @param fn
* @returns {IterableIterator<*>}
* @private
*/
* _filter(fn) {
for (let x of this) {
if (fn(x)) {
yield x;
}
}
}
/**
* wrapper filter
* @param fn
* @returns {*}
*/
filter(fn = Boolean) {
return chain(this._filter(fn));
}
* _map(fn) {
for (let x of this) {
yield fn(x);
}
};
map(fn) {
return chain(this._map(fn));
}
reduce(fn, initial) {
let val = initial;
let first = true;
for (let x of this) {
if (val === undefined) {
val = x;
first = false;
continue;
}
val = fn(val, x);
}
return val;
}
/**
* Return whether a thing is iterable.
*/
static isIterable(thing) {
return thing && typeof thing[Symbol.iterator] === 'function';
};
/**
* Get the iterator for the thing or throw an error.
* @param thing
* @return {*}
*/
static getIterator(thing) {
if (Chain.isIterable(thing)) {
return thing[Symbol.iterator]();
}
throw new TypeError('Not iterable: ' + thing);
};
}
function chain(iterable) {
return new Chain(iterable);
}
for (const item of chain([1, 2, 3, 4]).filter(x => x % 2 === 0).map(x => x + 1)) {
console.log(item);
}
const item2 = chain([1, 2, 3, 4]).filter(x => x % 2 === 0).map(x => x + 1).reduce((x, y) => x + y);
console.log(`reduce: ${item2}`);
view raw Chain.js hosted with ❤ by GitHub