cferdinandi/loop-tests.html

## loop-tests.html
<!DOCTYPE html>
<html>
<head>
	<title>Loop Performance</title>

	<style type="text/css">
		body {
			margin: 1em auto;
			max-width: 40em;
			text-align: center;
			width: 88%;
		}
	</style>
</head>
<body>


	<script>

		var wizards = [
			{
				name: 'Harry Potter',
				house: 'Gryfindor'
			},
			{
				name: 'Cedric Diggory',
				house: 'Hufflepuff'
			},
			{
				name: 'Tonks',
				house: 'Hufflepuff'
			},
			{
				name: 'Ronald Weasley',
				house: 'Gryfindor'
			},
			{
				name: 'Hermione Granger',
				house: 'Gryfindor'
			},
			{
				name: 'Harry Potter',
				house: 'Gryfindor'
			},
			{
				name: 'Cedric Diggory',
				house: 'Hufflepuff'
			},
			{
				name: 'Tonks',
				house: 'Hufflepuff'
			},
			{
				name: 'Ronald Weasley',
				house: 'Gryfindor'
			},
			{
				name: 'Hermione Granger',
				house: 'Gryfindor'
			},
			{
				name: 'Harry Potter',
				house: 'Gryfindor'
			},
			{
				name: 'Cedric Diggory',
				house: 'Hufflepuff'
			},
			{
				name: 'Tonks',
				house: 'Hufflepuff'
			},
			{
				name: 'Ronald Weasley',
				house: 'Gryfindor'
			},
			{
				name: 'Hermione Granger',
				house: 'Gryfindor'
			},
			{
				name: 'Harry Potter',
				house: 'Gryfindor'
			},
			{
				name: 'Cedric Diggory',
				house: 'Hufflepuff'
			},
			{
				name: 'Tonks',
				house: 'Hufflepuff'
			},
			{
				name: 'Ronald Weasley',
				house: 'Gryfindor'
			},
			{
				name: 'Hermione Granger',
				house: 'Gryfindor'
			}
		];
		var wizardsNew;


		//
		// Test Runner
		//

		var runTest = function (name, test) {
			wizardsNew = [];
			console.time(name);
			for (var i = 0; i < 100000; i++) {
				test();
			}
			console.timeEnd(name);
		};


		//
		// Tests
		//

		runTest('for map', function () {
			for (var i = 0; i < wizards.length; i++) {
				wizardsNew.push(wizards[i].name);
			}
		});

		runTest('forEach() map', function () {
			wizards.forEach(function (wizard) {
				wizardsNew.push(wizard.name);
			});
		});

		runTest('map()', function () {
			wizardsNew = wizards.map(function (wizard) {
				return wizard.name;
			});
		});

		runTest('for filter', function () {
			for (var i = 0; i < wizards.length; i++) {
				if (wizards[i].house === 'Hufflepuff') {
					wizardsNew.push(wizards[i]);
				}
			}
		});

		runTest('forEach() filter', function () {
			wizards.forEach(function (wizard) {
				if (wizard.house === 'Hufflepuff') {
					wizardsNew.push(wizard);
				}
			});
		});

		runTest('filter()', function () {
			wizardsNew = wizards.filter(function (wizard) {
				return wizard.house === 'Hufflepuff';
			});
		});

		runTest('for combo', function () {
			for (var i = 0; i < wizards.length; i++) {
				if (wizards[i].house === 'Hufflepuff') {
					wizardsNew.push(wizards[i].name);
				}
			}
		});

		runTest('forEach() combo', function () {
			wizards.forEach(function (wizard) {
				if (wizard.house === 'Hufflepuff') {
					wizardsNew.push(wizard.name);
				}
			});
		});

		runTest('filter() + map()', function () {
			wizardsNew = wizards.filter(function (wizard) {
				return wizard.house === 'Hufflepuff';
			}).map(function (wizard) {
				return wizard.name;
			});
		});

		runTest('reduce()', function () {
			wizardsNew = wizards.reduce(function (arr, wizard) {
				if (wizard.house === 'Hufflepuff') {
					arr.push(wizard.name);
				}
				return arr;
			}, []);
		});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Loop Performance</title>

	<style type="text/css">
	body {
	margin: 1em auto;
	max-width: 40em;
	text-align: center;
	width: 88%;
	}
	</style>
	</head>
	<body>


	<script>

	var wizards = [
	{
	name: 'Harry Potter',
	house: 'Gryfindor'
	},
	{
	name: 'Cedric Diggory',
	house: 'Hufflepuff'
	},
	{
	name: 'Tonks',
	house: 'Hufflepuff'
	},
	{
	name: 'Ronald Weasley',
	house: 'Gryfindor'
	},
	{
	name: 'Hermione Granger',
	house: 'Gryfindor'
	},
	{
	name: 'Harry Potter',
	house: 'Gryfindor'
	},
	{
	name: 'Cedric Diggory',
	house: 'Hufflepuff'
	},
	{
	name: 'Tonks',
	house: 'Hufflepuff'
	},
	{
	name: 'Ronald Weasley',
	house: 'Gryfindor'
	},
	{
	name: 'Hermione Granger',
	house: 'Gryfindor'
	},
	{
	name: 'Harry Potter',
	house: 'Gryfindor'
	},
	{
	name: 'Cedric Diggory',
	house: 'Hufflepuff'
	},
	{
	name: 'Tonks',
	house: 'Hufflepuff'
	},
	{
	name: 'Ronald Weasley',
	house: 'Gryfindor'
	},
	{
	name: 'Hermione Granger',
	house: 'Gryfindor'
	},
	{
	name: 'Harry Potter',
	house: 'Gryfindor'
	},
	{
	name: 'Cedric Diggory',
	house: 'Hufflepuff'
	},
	{
	name: 'Tonks',
	house: 'Hufflepuff'
	},
	{
	name: 'Ronald Weasley',
	house: 'Gryfindor'
	},
	{
	name: 'Hermione Granger',
	house: 'Gryfindor'
	}
	];
	var wizardsNew;


	//
	// Test Runner
	//

	var runTest = function (name, test) {
	wizardsNew = [];
	console.time(name);
	for (var i = 0; i < 100000; i++) {
	test();
	}
	console.timeEnd(name);
	};


	//
	// Tests
	//

	runTest('for map', function () {
	for (var i = 0; i < wizards.length; i++) {
	wizardsNew.push(wizards[i].name);
	}
	});

	runTest('forEach() map', function () {
	wizards.forEach(function (wizard) {
	wizardsNew.push(wizard.name);
	});
	});

	runTest('map()', function () {
	wizardsNew = wizards.map(function (wizard) {
	return wizard.name;
	});
	});

	runTest('for filter', function () {
	for (var i = 0; i < wizards.length; i++) {
	if (wizards[i].house === 'Hufflepuff') {
	wizardsNew.push(wizards[i]);
	}
	}
	});

	runTest('forEach() filter', function () {
	wizards.forEach(function (wizard) {
	if (wizard.house === 'Hufflepuff') {
	wizardsNew.push(wizard);
	}
	});
	});

	runTest('filter()', function () {
	wizardsNew = wizards.filter(function (wizard) {
	return wizard.house === 'Hufflepuff';
	});
	});

	runTest('for combo', function () {
	for (var i = 0; i < wizards.length; i++) {
	if (wizards[i].house === 'Hufflepuff') {
	wizardsNew.push(wizards[i].name);
	}
	}
	});

	runTest('forEach() combo', function () {
	wizards.forEach(function (wizard) {
	if (wizard.house === 'Hufflepuff') {
	wizardsNew.push(wizard.name);
	}
	});
	});

	runTest('filter() + map()', function () {
	wizardsNew = wizards.filter(function (wizard) {
	return wizard.house === 'Hufflepuff';
	}).map(function (wizard) {
	return wizard.name;
	});
	});

	runTest('reduce()', function () {
	wizardsNew = wizards.reduce(function (arr, wizard) {
	if (wizard.house === 'Hufflepuff') {
	arr.push(wizard.name);
	}
	return arr;
	}, []);
	});
	</script>
	</body>
	</html>