sashee/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.2/bluebird.min.js" integrity="sha256-vV2kNkyUsRqeVvDQOIQ5CC7207KcFSVawXutQKvgwkg=" crossorigin="anonymous"></script>
</head>
<body>
  <script>
console.log = (msg) => document.body.innerText += `${msg}\n`;

// utility function for sleeping
const sleep = (n) => new Promise((res) => setTimeout(res, n));
(async () => {
  {
    console.log("sync map");
    const arr = [1, 2, 3];

    const syncRes = arr.map((i) => {
    	return i + 1;
    });

    console.log(syncRes);
    // 2,3,4
  }
  {
    console.log("\nasync map")

    const arr = [1, 2, 3];

    const asyncRes = await Promise.all(arr.map(async (i) => {
    	await sleep(10);
    	return i + 1;
    }));

    console.log(asyncRes);
    // 2,3,4
  }
  {
    console.log("\nmap in groups");
    const arr = [30, 10, 20, 20, 15, 20, 10];

    const mapInGroups = (arr, iteratee, groupSize) => {
    	const groups = _.groupBy(arr, (_v, i) => Math.floor(i / groupSize));

    	return Object.values(groups)
    		.reduce(async (memo, group) => [
    			...(await memo),
    			...(await Promise.all(group.map(iteratee)))
    		], []);
    };

    const res = await mapInGroups(arr, async (v) => {
    	console.log(`S ${v}`);
    	await sleep(v);
    	console.log(`F ${v}`);
    	return v + 1;
    }, 3);
    // -- first batch --
    // S 30
    // S 10
    // S 20
    // F 10
    // F 20
    // F 30
    // -- second batch --
    // S 20
    // S 15
    // S 20
    // F 15
    // F 20
    // F 20
    // -- third batch --
    // S 10
    // F 10

    console.log(res);
    // 31,11,21,21,16,21,11
  }
  {
    console.log("\nparallel map");
    const arr = [30, 10, 20, 20, 15, 20, 10];

    // Bluebird promise
    const res = await Promise.map(arr, async (v) => {
    	console.log(`S ${v}`)
    	await sleep(v);
    	console.log(`F ${v}`);
    	return v + 1;
    }, {concurrency: 2});

    // S 30
    // S 10
    // F 10
    // S 10
    // F 30
    // S 20
    // F 10
    // S 15
    // F 20
    // S 20
    // F 15
    // S 20
    // F 20
    // F 20

    console.log(res);
    // 31,11,21,21,16,21,11
  }
  {
    console.log("\nserial map");
    const arr = [1, 2, 3];

    const res = await arr.reduce(async (memo, v) => {
      const results = await memo;
    	console.log(`S ${v}`)
    	await sleep(10);
    	console.log(`F ${v}`);
    	return [...await results, v + 1];
    }, []);

    // S 1
    // F 1
    // S 2
    // F 2
    // S 3
    // F 3

    console.log(res);
    // 2,3,4
  }
})();
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.2/bluebird.min.js" integrity="sha256-vV2kNkyUsRqeVvDQOIQ5CC7207KcFSVawXutQKvgwkg=" crossorigin="anonymous"></script>
	</head>
	<body>
	<script>
	console.log = (msg) => document.body.innerText += `${msg}\n`;

	// utility function for sleeping
	const sleep = (n) => new Promise((res) => setTimeout(res, n));
	(async () => {
	{
	console.log("sync map");
	const arr = [1, 2, 3];

	const syncRes = arr.map((i) => {
	return i + 1;
	});

	console.log(syncRes);
	// 2,3,4
	}
	{
	console.log("\nasync map")

	const arr = [1, 2, 3];

	const asyncRes = await Promise.all(arr.map(async (i) => {
	await sleep(10);
	return i + 1;
	}));

	console.log(asyncRes);
	// 2,3,4
	}
	{
	console.log("\nmap in groups");
	const arr = [30, 10, 20, 20, 15, 20, 10];

	const mapInGroups = (arr, iteratee, groupSize) => {
	const groups = _.groupBy(arr, (_v, i) => Math.floor(i / groupSize));

	return Object.values(groups)
	.reduce(async (memo, group) => [
	...(await memo),
	...(await Promise.all(group.map(iteratee)))
	], []);
	};

	const res = await mapInGroups(arr, async (v) => {
	console.log(`S ${v}`);
	await sleep(v);
	console.log(`F ${v}`);
	return v + 1;
	}, 3);
	// -- first batch --
	// S 30
	// S 10
	// S 20
	// F 10
	// F 20
	// F 30
	// -- second batch --
	// S 20
	// S 15
	// S 20
	// F 15
	// F 20
	// F 20
	// -- third batch --
	// S 10
	// F 10

	console.log(res);
	// 31,11,21,21,16,21,11
	}
	{
	console.log("\nparallel map");
	const arr = [30, 10, 20, 20, 15, 20, 10];

	// Bluebird promise
	const res = await Promise.map(arr, async (v) => {
	console.log(`S ${v}`)
	await sleep(v);
	console.log(`F ${v}`);
	return v + 1;
	}, {concurrency: 2});

	// S 30
	// S 10
	// F 10
	// S 10
	// F 30
	// S 20
	// F 10
	// S 15
	// F 20
	// S 20
	// F 15
	// S 20
	// F 20
	// F 20

	console.log(res);
	// 31,11,21,21,16,21,11
	}
	{
	console.log("\nserial map");
	const arr = [1, 2, 3];

	const res = await arr.reduce(async (memo, v) => {
	const results = await memo;
	console.log(`S ${v}`)
	await sleep(10);
	console.log(`F ${v}`);
	return [...await results, v + 1];
	}, []);

	// S 1
	// F 1
	// S 2
	// F 2
	// S 3
	// F 3

	console.log(res);
	// 2,3,4
	}
	})();
	</script>
	</body>
	</html>