Run results for: String accumulation using forEach vs. map+join vs. reduce

Run details:

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

Browser: Firefox 134

Operating system: Windows

Device Platform: Desktop

Date tested: 9 months ago

Benchmark engine: Benchmark.js

forEach

17.5M/s

reduce

9.4M/s

map+join

1.6M/s

View exact numbers

Test name	Executions per second
✓ forEach	17,499,306 Ops/sec
reduce	9,403,693 Ops/sec
map+join	1,645,113 Ops/sec

Script Preparation code:

var property = "justify-content";
var value = ["space-around", "space-evenly"];

function normalizeDeclaration(property, value) {
	return property + ":" + value;
}

Tests:

forEach
var cssText = ""; value.forEach((fallbackValue) => { cssText += "" + normalizeDeclaration(property, fallbackValue); }); var result = cssText.slice(1);
map+join
var result = value .map((fallbackValue) => normalizeDeclaration(property, fallbackValue)) .join(";");
reduce
var result = value.reduce( (accumulator, fallbackValue) => accumulator + ";" + normalizeDeclaration(property, fallbackValue), normalizeDeclaration(property, value[0]) );