Travis build: 70 [cron]
This commit is contained in:
30secondsofcode
@ -94,6 +94,22 @@
|
||||
"hash": "0b63d58f3ecd1d4dc6d3007629ce4e4a570dc15c09f09edcff6ef6a31a04bfc2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "javascript-memoization",
|
||||
"type": "snippetListing",
|
||||
"title": "Where and how can I use memoization in JavaScript?",
|
||||
"attributes": {
|
||||
"text": "Memoization is a commonly used technique that you can use to speed up your code significantly. It uses a cache to store results, so that subsequent calls of time-consuming functions do not perform the same work another time. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code:\n\n- Memoization should be mainly used to speed up slow-performing, costly or time-consuming function calls\n- Memoization speeds up subsequent calls, so it is best used when you anticipate multiple calls of the same function under the same circumstances\n- Memoization stores results in memory, therefore it should be avoided when the same function is called multiple times under very different circumstances\n\nA simple, object-oriented example of implementing memoization could be as follows:\n\n```js\nclass MyObject {\n constructor(data) {\n this.data = data;\n this.data[this.data.length - 2] = { value: 'Non-empty' };\n }\n\n firstNonEmptyItem() {\n return this.data.find(v => !!v.value);\n }\n\n firstNonEmptyItemMemo() {\n if (!this.firstNonEmpty)\n this.firstNonEmpty = this.data.find(v => !!v.value);\n return this.firstNonEmpty;\n }\n}\n\nconst myObject = new MyObject(Array(2000).fill({ value: null }));\n\nfor (let i = 0; i < 100; i ++)\n myObject.firstNonEmptyItem(); // ~4000ms\nfor (let i = 0; i < 100; i ++)\n myObject.firstNonEmptyItemMemo(); // ~70ms\n```\n\nThe above example showcases a way to implement memoization inside a class, however it makes the assumptions that the `data` structure will not be altered over the lifecycle of the object and that this is the only expensive function call we will make, so it cannot be reused. It also doesn't account for arguments being passed to the function, which would alter the result. A functional approach that would work with any given function and also account for arguments can be found in the form of the [memoize snippet](/js/s/memoize/), which uses a `Map` to store different values. \n\nWe still recommend using that snippet as the primary way to memoize a function, however JavaScript's [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) provides an interesting alternative via the use of the `handler.apply()` trap, which can be used for this purpose as follows:\n\n```js\nconst memoize = fn => new Proxy(fn, {\n cache: new Map(),\n apply (target, thisArg, argsList) {\n let cacheKey = argsList.toString();\n if(!this.cache.has(cacheKey))\n this.cache.set(cacheKey, target.apply(thisArg, argsList));\n return this.cache.get(cacheKey);\n }\n});\n\nconst fibonacci = n => (n <= 1 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));\nconst memoizedFibonacci = memoize(fibonacci);\n\nfor (let i = 0; i < 100; i ++)\n fibonacci(30); // ~5000ms\nfor (let i = 0; i < 100; i ++)\n memoizedFibonacci(30); // ~50ms\n```\n\n\n**Image credit:** [Mark Tegethoff](https://unsplash.com/@tegethoff?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
|
||||
"tags": [
|
||||
"javascript",
|
||||
"function",
|
||||
"memoization"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "35d0c102613d534ddb5aa96ef34da058c6fb29daac4d16ccdcee095007a45131"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "javascript-singleton-proxy",
|
||||
"type": "snippetListing",
|
||||
|
||||
@ -154,6 +154,32 @@
|
||||
"authorCount": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "javascript-memoization",
|
||||
"title": "Where and how can I use memoization in JavaScript?",
|
||||
"type": "blog.question",
|
||||
"attributes": {
|
||||
"fileName": "javascript-memoization.md",
|
||||
"cover": "blog_images/javascript-memoization.jpg",
|
||||
"excerpt": "Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results.",
|
||||
"authors": [
|
||||
"chalarangelo"
|
||||
],
|
||||
"text": "Memoization is a commonly used technique that you can use to speed up your code significantly. It uses a cache to store results, so that subsequent calls of time-consuming functions do not perform the same work another time. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code:\n\n- Memoization should be mainly used to speed up slow-performing, costly or time-consuming function calls\n- Memoization speeds up subsequent calls, so it is best used when you anticipate multiple calls of the same function under the same circumstances\n- Memoization stores results in memory, therefore it should be avoided when the same function is called multiple times under very different circumstances\n\nA simple, object-oriented example of implementing memoization could be as follows:\n\n```js\nclass MyObject {\n constructor(data) {\n this.data = data;\n this.data[this.data.length - 2] = { value: 'Non-empty' };\n }\n\n firstNonEmptyItem() {\n return this.data.find(v => !!v.value);\n }\n\n firstNonEmptyItemMemo() {\n if (!this.firstNonEmpty)\n this.firstNonEmpty = this.data.find(v => !!v.value);\n return this.firstNonEmpty;\n }\n}\n\nconst myObject = new MyObject(Array(2000).fill({ value: null }));\n\nfor (let i = 0; i < 100; i ++)\n myObject.firstNonEmptyItem(); // ~4000ms\nfor (let i = 0; i < 100; i ++)\n myObject.firstNonEmptyItemMemo(); // ~70ms\n```\n\nThe above example showcases a way to implement memoization inside a class, however it makes the assumptions that the `data` structure will not be altered over the lifecycle of the object and that this is the only expensive function call we will make, so it cannot be reused. It also doesn't account for arguments being passed to the function, which would alter the result. A functional approach that would work with any given function and also account for arguments can be found in the form of the [memoize snippet](/js/s/memoize/), which uses a `Map` to store different values. \n\nWe still recommend using that snippet as the primary way to memoize a function, however JavaScript's [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) provides an interesting alternative via the use of the `handler.apply()` trap, which can be used for this purpose as follows:\n\n```js\nconst memoize = fn => new Proxy(fn, {\n cache: new Map(),\n apply (target, thisArg, argsList) {\n let cacheKey = argsList.toString();\n if(!this.cache.has(cacheKey))\n this.cache.set(cacheKey, target.apply(thisArg, argsList));\n return this.cache.get(cacheKey);\n }\n});\n\nconst fibonacci = n => (n <= 1 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));\nconst memoizedFibonacci = memoize(fibonacci);\n\nfor (let i = 0; i < 100; i ++)\n fibonacci(30); // ~5000ms\nfor (let i = 0; i < 100; i ++)\n memoizedFibonacci(30); // ~50ms\n```\n\n\n**Image credit:** [Mark Tegethoff](https://unsplash.com/@tegethoff?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
|
||||
"tags": [
|
||||
"javascript",
|
||||
"function",
|
||||
"memoization"
|
||||
]
|
||||
},
|
||||
"meta": {
|
||||
"hash": "35d0c102613d534ddb5aa96ef34da058c6fb29daac4d16ccdcee095007a45131",
|
||||
"firstSeen": "1582813405",
|
||||
"lastUpdated": "1582813405",
|
||||
"updateCount": 2,
|
||||
"authorCount": 2
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "javascript-singleton-proxy",
|
||||
"title": "How can I implement a singleton in JavaScript?",
|
||||
|
||||
Reference in New Issue
Block a user