function-patterns/memoization.html

<!doctype html>
<html lang="en">
	<head>
		<title>JavaScript Patterns</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
			/* Title: Memoization
			 Description: use function properties to avoid repeated computation
			 */

			// antipattern
			// reason see: https://github.com/shichuan/javascript-patterns/issues/6
			var myFunc = function (param) {
				if (!myFunc.cache[param]) {
					var result = {};
					// ... expensive operation ...
					myFunc.cache[param] = result;
				}
				return myFunc.cache[param];
			};

			// cache storage
			myFunc.cache = {};


			// preferred method 1
			// only one argument using param

			var myFunc = function (param) {
				if (!myFunc.cache.hasOwnProperty(param)) {
					var result = {};
					// ... expensive operation ...
					myFunc.cache[param] = result;
				}
				return myFunc.cache[param];
			};

			// cache storage
			myFunc.cache = {};


			// preferred method 2
			// multiple arguments using JSON stringify
			
			// this will only work correctly for primitive (and Array) arguments, 
			// since the order in which properties of Objects are enumerated is undetermined 
			// and can even change between enumerations. 
			// (a JSON encoder that sorts the keys won't have this issue).

			var myFunc = function () {
				var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)),
						result;
				if (!myFunc.cache[cachekey]) {
					result = {};
					// ... expensive operation ...
					myFunc.cache[cachekey] = result;
				}
				return myFunc.cache[cachekey];
			};

			// cache storage
			myFunc.cache = {};


			// preferred method 3
			// multiple arguments using arguments.callee

			var myFunc = function (param) {
				var f = arguments.callee,
						result;
				if (!f.cache[param]) {
					result = {};
					// ... expensive operation ...
					f.cache[param] = result;
				}
				return f.cache[param];
			};

			// cache storage
			myFunc.cache = {};
		</script>
	</body>
</html>