KelvinCoding/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>merging arrays</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>

## suite.js
"use strict";

(function (factory) {
	if (typeof Benchmark !== "undefined") {
		factory(Benchmark);
	} else {
		factory(require("benchmark"));
	}
})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
		const arr_len = 100;
		const arr_bar = [];
		const arr_baz = [];
		const arr_bax = [];

		[...Array(arr_len).keys()].forEach((id) => {
		   arr_bar.push({
		       foo_id: id,
		       bar_text: `bar_${id}`,
		   });

		   arr_baz.push({
		       foo_id: id,
		       baz_text: `baz_${id}`,
		   });

		   arr_bax.push({
		       foo_id: id,
		       bax_text: `bax_${id}`,
		   });
		});
	};


	suite.add("via function", function () {
		// via function

		function merge_foo_items(bar_item, baz_array, bax_array) {
		    const foo_id = bar_item.foo_id;
		    return {
		        foo_id,
		        bar_text: bar_item.bar_text,
		        baz_text: baz_array.find((baz) => baz.foo_id === foo_id).baz_text,
		        bax_text: bax_array.find((bax) => bax.foo_id === foo_id).bax_text,
		    }
		}

		arr_bar.map((bar) => merge_foo_items(bar, arr_baz, arr_bax));
	});

	suite.add("loop each", function () {
		// loop each
		const bars = arr_bar.reduce((agg, bar) => {
		    agg[bar.foo_id] = bar.bar_text;
		    return agg;
		}, {});

		arr_baz.forEach((baz) => {
		    if (bars[baz.foo_id]) {
		        bars[baz.foo_id] = baz.baz_text;
		    }
		});

		arr_baz.forEach((bax) => {
		    if (bars[bax.foo_id]) {
		        bars[bax.foo_id] = bax.bax_text;
		    }
		});
	});

	suite.on("cycle", function (evt) {
		console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
		console.log(new Array(30).join("-"));

		var results = evt.currentTarget.sort(function (a, b) {
			return b.hz - a.hz;
		});

		results.forEach(function (item) {
			console.log((idx + 1) + ". " + item);
		});
	});

	console.log("merging arrays");
	console.log(new Array(30).join("-"));
	suite.run();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>merging arrays</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
	</body>
	</html>
	"use strict";

	(function (factory) {
	if (typeof Benchmark !== "undefined") {
	factory(Benchmark);
	} else {
	factory(require("benchmark"));
	}
	})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
	const arr_len = 100;
	const arr_bar = [];
	const arr_baz = [];
	const arr_bax = [];

	[...Array(arr_len).keys()].forEach((id) => {
	arr_bar.push({
	foo_id: id,
	bar_text: `bar_${id}`,
	});

	arr_baz.push({
	foo_id: id,
	baz_text: `baz_${id}`,
	});

	arr_bax.push({
	foo_id: id,
	bax_text: `bax_${id}`,
	});
	});
	};


	suite.add("via function", function () {
	// via function

	function merge_foo_items(bar_item, baz_array, bax_array) {
	const foo_id = bar_item.foo_id;
	return {
	foo_id,
	bar_text: bar_item.bar_text,
	baz_text: baz_array.find((baz) => baz.foo_id === foo_id).baz_text,
	bax_text: bax_array.find((bax) => bax.foo_id === foo_id).bax_text,
	}
	}

	arr_bar.map((bar) => merge_foo_items(bar, arr_baz, arr_bax));
	});

	suite.add("loop each", function () {
	// loop each
	const bars = arr_bar.reduce((agg, bar) => {
	agg[bar.foo_id] = bar.bar_text;
	return agg;
	}, {});

	arr_baz.forEach((baz) => {
	if (bars[baz.foo_id]) {
	bars[baz.foo_id] = baz.baz_text;
	}
	});

	arr_baz.forEach((bax) => {
	if (bars[bax.foo_id]) {
	bars[bax.foo_id] = bax.bax_text;
	}
	});
	});

	suite.on("cycle", function (evt) {
	console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
	console.log(new Array(30).join("-"));

	var results = evt.currentTarget.sort(function (a, b) {
	return b.hz - a.hz;
	});

	results.forEach(function (item) {
	console.log((idx + 1) + ". " + item);
	});
	});

	console.log("merging arrays");
	console.log(new Array(30).join("-"));
	suite.run();
	});