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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Browser: Chrome 90

Operating system: Mac OS X 10.14.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
reduce + Array.prototype.concat	90767.1 Ops/sec
Array.prototype.flatMap	172191.3 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