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

Run details:

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

Browser: Chrome 94

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

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