Run results for: reduce.concat() vs flatMap()

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser: Firefox 123

Operating system: Windows

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
reduce + Array.prototype.concat	2008323.0 Ops/sec
Array.prototype.flatMap	1393436.0 Ops/sec

Script Preparation code:

var flag = {
	a: {'truthy': true, 'falsey': false, 'only-in-a': true},
	b: {'truthy': true, 'falsey': false, 'only-in-b': true},
	unused: {'truthy': true, 'falsey': false},
};
var rollNames = ['a', 'b', 'missing'];

Tests:

reduce + Array.prototype.concat
var other = rollNames.flatMap(rollName => // convert flag object to array containing the names of all fields with a truthy value Object.entries(flag[rollName] ?? {}).reduce((opts, [key, value]) => opts.concat(value ? key : []), []) ).reduce((unique, option) => { // ensure option entries are unique return unique.includes(option) ? unique : unique.concat(option); }, []);
Array.prototype.flatMap
var other = [...new Set(rollNames.flatMap(rollName => // convert flag object to array containing the names of all fields with a truthy value Object.entries(flag[rollName] ?? {}).flatMap(([key, value]) => value ? [key] : []) ))];

Run results for: reduce.concat() vs flatMap()

Compare the new ES6 spread operator with the traditional concat() method

reduce + Array.prototype.concat

Array.prototype.flatMap