{"id":16662853,"url":"https://github.com/lionyxml/javascript-notes","last_synced_at":"2026-02-20T00:01:56.473Z","repository":{"id":50272631,"uuid":"518663675","full_name":"LionyxML/javascript-notes","owner":"LionyxML","description":"Some nots on JS using a .org file.","archived":false,"fork":false,"pushed_at":"2023-06-05T01:06:11.000Z","size":170,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T22:12:10.285Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LionyxML.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-28T01:40:57.000Z","updated_at":"2023-03-07T02:30:33.000Z","dependencies_parsed_at":"2025-01-19T14:54:38.407Z","dependency_job_id":"bad8e532-78db-4459-895a-6fb95d0f65b1","html_url":"https://github.com/LionyxML/javascript-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LionyxML/javascript-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LionyxML%2Fjavascript-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LionyxML%2Fjavascript-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LionyxML%2Fjavascript-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LionyxML%2Fjavascript-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LionyxML","download_url":"https://codeload.github.com/LionyxML/javascript-notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LionyxML%2Fjavascript-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000700,"owners_count":26082805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T10:39:05.734Z","updated_at":"2025-10-08T19:20:04.489Z","avatar_url":"https://github.com/LionyxML.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\"\u003e\n \u003chead\u003e\n \u003c!-- 2022-10-01 Sáb 18:08 --\u003e\n \u003cmeta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n \u003ctitle\u003eJavaScript Notes\u003c/title\u003e\n \u003cmeta name=\"author\" content=\"Rahul M. Juliato\" /\u003e\n \u003cmeta name=\"generator\" content=\"Org Mode\" /\u003e\n \u003clink\n rel=\"stylesheet\"\n type=\"text/css\"\n href=\"https://fniessen.github.io/org-html-themes/src/readtheorg_theme/css/htmlize.css\"\n /\u003e\n \u003clink\n rel=\"stylesheet\"\n type=\"text/css\"\n href=\"https://fniessen.github.io/org-html-themes/src/readtheorg_theme/css/readtheorg.css\"\n /\u003e\n \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n \u003cscript\n type=\"text/javascript\"\n src=\"https://fniessen.github.io/org-html-themes/src/lib/js/jquery.stickytableheaders.min.js\"\n \u003e\u003c/script\u003e\n \u003cscript\n type=\"text/javascript\"\n src=\"https://fniessen.github.io/org-html-themes/src/readtheorg_theme/js/readtheorg.js\"\n \u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"content\" class=\"content\"\u003e\n \u003ch1 class=\"title\"\u003eJavaScript Notes\u003c/h1\u003e\n \u003cdiv id=\"table-of-contents\" role=\"doc-toc\"\u003e\n \u003ch2\u003eTable of Contents\u003c/h2\u003e\n \u003cdiv id=\"text-table-of-contents\" role=\"doc-toc\"\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orgb4bc28d\"\u003e1. Await inside loops\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgec04ba7\"\n \u003e2. What is: Functional Programming [TODO]\u003c/a\n \u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#org658d8bf\"\u003e2.1. Source\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org780a9c6\"\u003e3. Curry or Partial Application?\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\n \u003ca href=\"#org1016cf4\"\u003e3.1. Definitions\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orgaea582b\"\u003e3.1.1. Application\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgc3ada7b\"\u003e3.1.2. Partial Application\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org2d7ec4a\"\u003e3.1.3. Curry\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org9d4cea3\"\u003e3.2. Source\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgcf3cbd4\"\u003e4. What is: Function Composition\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orga54d3bd\"\u003e4.1. Function composition\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgfd8f7a6\"\u003e4.2. Example of what is\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org7ac8488\"\u003e4.3. Source:\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgb49a060\"\n \u003e5. What is: Difference Between Class \u0026amp; Prototypal\n Inheritance\u003c/a\n \u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#org7b70f0c\"\u003e5.1. Class Inheritance\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgb21c868\"\u003e5.2. Prototypal Inheritance\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org4f5329e\"\u003e5.3. Why does this Matter?\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgbc4ea95\"\n \u003e5.4. Three Different Kinds of Prototypal Inheritance\u003c/a\n \u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#org7d87754\"\u003e5.4.1. Before the three\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgf8b016d\"\u003e5.4.2. Concatenative inheritance\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org3fbe9dc\"\u003e5.4.3. Prototype delegation\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgf4e7844\"\u003e5.4.4. Functional inheritance\u003c/a\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgbd82260\"\n \u003e5.5. Why Composition is Immune to the Fragile Base Class\n Problem\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgca8ee63\"\n \u003e5.6. You think you know Prototypes, but\u0026#x2026;\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org4b7dfdb\"\u003e5.7. Source\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org53a4ed7\"\n \u003e6. Referential Transparency / Opacity in JS\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org7993093\"\u003e7. What is: Closure\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orgbe2bb3f\"\u003e7.1. What is it?\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org834d2b2\"\u003e7.2. Using Closures (Examples)\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#org4f57bd9\"\u003e7.2.1. Application:\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orgb81007c\"\u003e7.2.2. Partial Application:\u003c/a\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org29803b0\"\u003e7.3. Source:\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org1adb7de\"\u003e8. What is: Pure Functions\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orgbfe6f0d\"\u003e8.1. General Definition\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org889ecb5\"\u003e8.2. Functions as a whole\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org89b0ac3\"\u003e8.3. Back to definition\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgabb4ee7\"\u003e8.4. Recommendation\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org1f70027\"\n \u003e8.5. The most important design principle (KISS)\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#orge169a50\"\u003e8.6. Problem with Shared State\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org88ac51d\"\n \u003e8.7. Given the same Input, Always Returns the Same\n Output\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org50fa64e\"\n \u003e8.8. Pure functions Produce No SIDE EFFECTS\u003c/a\n \u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#org685b326\"\u003e8.8.1. Immutability\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgfb0b66e\"\u003e8.9. Source\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org8633269\"\u003e9. New features of ES13\u003c/a\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#orgb11321c\"\u003e9.1. Class Field Declarations\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org1e2a07a\"\u003e9.2. Private Methods and Fields\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org2bdbe6d\"\u003e9.3. await Operator at Top level\u003c/a\u003e\n \u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org34a8f52\"\n \u003e9.4. Static Class Fields and Static Private Methods\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org739d02e\"\u003e9.5. Class static Block\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\n \u003ca href=\"#org8081ef4\"\n \u003e9.6. Ergonomic Brand Checks for Private Fields\u003c/a\n \u003e\n \u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org73a1d97\"\u003e9.7. at() Method for Indexing\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgf31b09b\"\u003e9.8. RegExp Match Indices\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org5260a81\"\u003e9.9. Object.hasOwn() Method\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org198c831\"\u003e9.10. Error Cause\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#org8143fe9\"\u003e9.11. Array Find from Last\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#orgdbb32eb\"\u003e9.12. Source\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgb4bc28d\" class=\"outline-2\"\u003e\n \u003ch2 id=\"orgb4bc28d\"\u003e\n \u003cspan class=\"section-number-2\"\u003e1.\u003c/span\u003e Await inside loops\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-1\"\u003e\n \u003cp\u003eWhat will be the output of this snippet?\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = [1 ,2 , 3 , 4];\nlet resValue = 1;\n\nconst incAfter1Sec = () =\u0026gt; new Promise((res, rej) =\u0026gt; {\n setTimeout(() =\u0026gt; { res(resValue++) }, 1000);\n});\n\nconst testing = async () =\u0026gt; {\n console.log('🚀 Start')\n\n arr.forEach(async (each) =\u0026gt; {\n const val = await incAfter1Sec()\n console.log(\"🚀 each\", val)\n\n })\n\n console.log('🚀 End');\n\n}\n\ntesting();\n\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eWhat about instead of a forEach, mapping?\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = [1 ,2 , 3 , 4];\nlet resValue = 1;\n\nconst incAfter1Sec = () =\u0026gt; new Promise((res, rej) =\u0026gt; {\n setTimeout(() =\u0026gt; { res(resValue++) }, 1000);\n});\n\nconst testing = async () =\u0026gt; {\n console.log('🚀 Start')\n\n arr.map(async (each) =\u0026gt; {\n const val = await incAfter1Sec()\n console.log(\"🚀 each\", val)\n\n })\n\n console.log('🚀 End');\n\n}\n\ntesting();\n\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n In simple terms, each (from the code) is called on separate function\n that is syncrhonous. forEach (and map) expects a synchronous\n function and does not wait for promises. This can be explained by\n the concept of `generators`.\n \u003c/p\u003e\n\n \u003cp\u003e\n `each` iteration end calls the `next()` method, `yield` the value\n and exit, then, call `next()` again, and since `next()` accepts only\n synchronous stuff, promises don`t work as intended when we use\n await.\n \u003c/p\u003e\n\n \u003cp\u003eThe `solution`, simply use a for loop:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = [1 ,2 , 3 , 4];\nlet resValue = 1;\n\nconst incAfter1Sec = () =\u0026gt; new Promise((res, rej) =\u0026gt; {\n setTimeout(() =\u0026gt; { res(resValue++) }, 1000);\n});\n\nconst testing = async () =\u0026gt; {\n console.log('🚀 Start')\n\n for (let i = 0; i \u0026lt; arr.length ; i++) {\n\t console.log(\"🚀 each\", i);\n\t await incAfter1Sec()\n\n }\n\n console.log('🚀 End');\n}\n\ntesting();\n\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eIt could be also written in this fashion:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = [1 ,2 , 3 , 4];\nlet resValue = 1;\n\nconst incAfter1Sec = () =\u0026gt; new Promise((res, rej) =\u0026gt; {\n setTimeout(() =\u0026gt; { res(resValue++) }, 1000);\n});\n\nconst testing = async () =\u0026gt; {\n console.log('🚀 Start')\n\n for (const i in arr) {\n\t console.log(\"🚀 each\", i);\n\t await incAfter1Sec()\n\n }\n\n console.log('🚀 End');\n}\n\ntesting();\n\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgec04ba7\" class=\"outline-2\"\u003e\n \u003ch2 id=\"orgec04ba7\"\u003e\n \u003cspan class=\"section-number-2\"\u003e2.\u003c/span\u003e What is: Functional\n Programming [TODO]\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-2\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-org658d8bf\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org658d8bf\"\u003e\n \u003cspan class=\"section-number-3\"\u003e2.1.\u003c/span\u003e Source\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-2-1\"\u003e\n \u003cp\u003e\n \u003ca\n href=\"https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0#.jddz30xy3\"\n \u003ehttps://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0#.jddz30xy3\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org780a9c6\" class=\"outline-2\"\u003e\n \u003ch2 id=\"org780a9c6\"\u003e\n \u003cspan class=\"section-number-2\"\u003e3.\u003c/span\u003e Curry or Partial Application?\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-3\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-org1016cf4\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org1016cf4\"\u003e\n \u003cspan class=\"section-number-3\"\u003e3.1.\u003c/span\u003e Definitions\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-3-1\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-orgaea582b\" class=\"outline-4\"\u003e\n \u003ch4 id=\"orgaea582b\"\u003e\n \u003cspan class=\"section-number-4\"\u003e3.1.1.\u003c/span\u003e Application\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-3-1-1\"\u003e\n \u003cp\u003e\n The process of applying a function to its arguments in order to\n produce a return value.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-orgc3ada7b\" class=\"outline-4\"\u003e\n \u003ch4 id=\"orgc3ada7b\"\u003e\n \u003cspan class=\"section-number-4\"\u003e3.1.2.\u003c/span\u003e Partial Application\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-3-1-2\"\u003e\n \u003cp\u003e\n The process of applying a function to some of its arguments. The\n partially applied function gets returned for later use. In other\n words, a function that takes a function with multiple parameters\n and returns a function with fewer parameters. Partial\n application fixes (partially applies the function to) one or\n more arguments inside the returned function, and the returned\n function takes the remaining parameters as arguments in order to\n complete the function application.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-org2d7ec4a\" class=\"outline-4\"\u003e\n \u003ch4 id=\"org2d7ec4a\"\u003e\n \u003cspan class=\"section-number-4\"\u003e3.1.3.\u003c/span\u003e Curry\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-3-1-3\"\u003e\n \u003cp\u003e\n A function that takes a function with multiple parameters as\n input and returns a function with exactly one parameter.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-org9d4cea3\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org9d4cea3\"\u003e\n \u003cspan class=\"section-number-3\"\u003e3.2.\u003c/span\u003e Source\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-3-2\"\u003e\n \u003cp\u003e\n \u003ca\n href=\"https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.13tj19278\"\n \u003ehttps://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.13tj19278\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-orgcf3cbd4\" class=\"outline-2\"\u003e\n \u003ch2 id=\"orgcf3cbd4\"\u003e\n \u003cspan class=\"section-number-2\"\u003e4.\u003c/span\u003e What is: Function Composition\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-4\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-orga54d3bd\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orga54d3bd\"\u003e\n \u003cspan class=\"section-number-3\"\u003e4.1.\u003c/span\u003e Function composition\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-4-1\"\u003e\n \u003cp\u003e\n Is the process of combining two or more functions to produce a new\n function. Composing funcitons together is like snapping together a\n series of pipes for our data to flow throug.\n \u003c/p\u003e\n\n \u003cp\u003e\n The composition of functions `f` and `g` can be defined as\n `f(g(x))`, which evaluates from the inside out, right to left. In\n other words:\n \u003c/p\u003e\n \u003col class=\"org-ol\"\u003e\n \u003cli\u003e`x`\u003c/li\u003e\n \u003cli\u003e`g`\u003c/li\u003e\n \u003cli\u003e`f`\u003c/li\u003e\n \u003c/ol\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgfd8f7a6\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgfd8f7a6\"\u003e\n \u003cspan class=\"section-number-3\"\u003e4.2.\u003c/span\u003e Example of what is\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-4-2\"\u003e\n \u003cp\u003eYou want to do the following:\u003c/p\u003e\n\n \u003col class=\"org-ol\"\u003e\n \u003cli\u003esplit the name into an array on spaces\u003c/li\u003e\n \u003cli\u003emap the name to lower case\u003c/li\u003e\n \u003cli\u003ejoin with dashes\u003c/li\u003e\n \u003cli\u003eencode the URI component\u003c/li\u003e\n \u003c/ol\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst toSlug = input =\u0026gt; encodeURIComponent(\n input.split(' ')\n .map(str =\u0026gt; str.toLowerCase())\n .join('-')\n );\nconsole.log(toSlug('JS Cheerleader')); // 'js-cheerleader'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eNot bad, but what about do it more readable?\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst toSlug = input =\u0026gt; encodeURIComponent(\n join('-')(\n map(toLowercase)(\n split(' ')(\n\tinput\n )\n )\n )\n)\n\nconsole.log(toSlug('JS Cheerleader')); // 'js-cheerleader'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eIt looks even harder to read, but wait a bit\u0026#x2026;\u003c/p\u003e\n\n \u003cp\u003eIf we use composable forms of common utilities, like.\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst curry = fn =\u0026gt; (...args) =\u0026gt; fn.bind(null, ...args);\nconst map = curry((fn, arr) =\u0026gt; arr.map(fn));\nconst join = curry((str, arr) =\u0026gt; arr.join(str));\nconst toLowerCase = str =\u0026gt; str.toLowerCase();\n\nconst split = curry((splitOn, str) =\u0026gt; str.split(splitOn));\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Or even production-tested versions available from Loadash/fp or\n ramda. You can import like this:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nimport { curry, map, join, split } from 'lodash/fp';\n// ...or like this...\nconst curry = require('lodash/fp/curry');\nconst map = require('lodash/fp/map');\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n To be honest, this implementation of curry is a little bit lazy, a\n real curry would always produce a unary function. Instead, this is\n a simple partial application. For the porposes of this demo, it\n will work interchangeable.\n \u003c/p\u003e\n\n \u003cp\u003e\n Going back to our `toSlug()` implementation, it looks like a lot\n of nesting, and a bit confusing to read. We can flatten the\n nesting with a function that will compose these functions\n automatically, meaning that it will take the output from one\n function and automatically patch it to input of the next function\n until it spits out the final value.\n \u003c/p\u003e\n\n \u003cp\u003e\n Come to think of it we have an extras utility that sounds like\n something like that. It takes a list of values and applies a\n function to each of those values, accumulating a single result.\n The values themselves can be functions. The functions is called\n `reduce()`, but to match the compose behavior above, we need it to\n reduce right to left, instead of left to right.\n \u003c/p\u003e\n\n \u003cp\u003e\n Good thing there's a `reduceRight()` that does exactly what we're\n looking for:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst compose = (...fns) =\u0026gt; x =\u0026gt; fns.reduceRight((v, f) =\u0026gt; f(v), x);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Like `.reduce()`, the array `.reduceRight()` method takes a\n reducer function and an initial value (`x`). We iterate over the\n array functions (from right to left), applying each in turn to the\n accumulated value (`v`).\n \u003c/p\u003e\n\n \u003cp\u003e\n With compose, we can rewrite our composition above without the\n nesting:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst toSlug = compose(\n encodeURIComponent,\n join('-'),\n map(toLowerCase),\n split(' ')\n);\n\nconsole.log(toSlug('JS Cheerleader')); // 'js-cheerleader'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Of course, `compose()` comes with a loadash/fp or ramda as well:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nimport { compose } from 'lodash/fp';\n// or\nconst compose = require('lodash/fp/compose');\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Compose is great when you're thinking in terms of the mathematical\n form of composition, inside out… but what if you want to think in\n terms of the sequence from left to right?\n \u003c/p\u003e\n\n \u003cp\u003e\n There’s another form commonly called `pipe()`. Lodash calls it\n `flow()`:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst pipe = (...fns) =\u0026gt; x =\u0026gt; fns.reduce((v, f) =\u0026gt; f(v), x);\n\nconst fn1 = s =\u0026gt; s.toLowerCase();\nconst fn2 = s =\u0026gt; s.split('').reverse().join('');\nconst fn3 = s =\u0026gt; s + '!'\n\nconst newFunc = pipe(fn1, fn2, fn3);\nconst result = newFunc('Time'); // emit!\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Notice the implementation is exactly the same as `compose()`,\n except that we're using `.reduce()` instead of `.reduceRight()`,\n which reduces left to right instead of right to left.\n \u003c/p\u003e\n\n \u003cp\u003e\n Let's look at our `toSlug()` function implemented with `pipe()`:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst toSlug = pipe(\n split(' '),\n map(toLowerCase),\n join('-'),\n encodeURIComponent\n);\n\nconsole.log(toSlug('JS Cheerleader')); // 'js-cheerleader'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eFor me, this is much easier to read.\u003c/p\u003e\n\n \u003cp\u003e\n Hardcore functional programmers define their entire application in\n terms of function compositions. I use it frequently to eliminate\n the need for temporary variables. Look at the `pipe()` version of\n `toSlug()` carefully and you might notice something special.\n \u003c/p\u003e\n\n \u003cp\u003e\n In imperative programming, when you're performing transformations\n on some variable, you’ll find references to the variable in each\n step of the transformation. The `pipe()` implementation above is\n written in a points-free style, which means that it does not\n identify the arguments on which it operates at all.\n \u003c/p\u003e\n\n \u003cp\u003e\n I frequently use pipes in things like unit tests and Redux state\n reducers to eliminate the need for intermediary variables which\n exist only to hold transient values between one operation and the\n next.\n \u003c/p\u003e\n\n \u003cp\u003e\n That may sound weird at first, but as you get practice with it,\n you'll find that in functional programming, you're working with\n very abstract, generalized functions in which the names of things\n don't matter so much. Names just get in the way. You may start to\n think of variables as unnecessary boilerplate.\n \u003c/p\u003e\n\n \u003cp\u003e\n That said, I'm of the opinion that points-free style can be taken\n too far. It can become too dense, and harder to understand, but if\n you get confused, here's a little tip… you can tap into the flow\n to trace what's going on:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst trace = curry((label, x) =\u0026gt; {\n console.log(`== ${ label }: ${ x }`);\n return x;\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eHere's how you use it:\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n const toSlug = pipe(\n trace('input'),\n split(' '),\n map(toLowerCase),\n trace('after map'),\n join('-'),\n encodeURIComponent\n);\n\nconsole.log(toSlug('JS Cheerleader'));\n// '== input: JS Cheerleader'\n// '== after map: js,cheerleader'\n// 'js-cheerleader'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n `trace()` is just a special form of the more general `tap()`,\n which lets you perform some action for each value that flows\n through the pipe. Get it? Pipe? Tap? You can write `tap()` like\n this:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst tap = curry((fn, x) =\u0026gt; {\n fn(x);\n return x;\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Now you can see how `trace()` is just a special-cased `tap()`:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst trace = label =\u0026gt; {\n return tap(x =\u0026gt; console.log(`== ${ label }: ${ x }`));\n};\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n You should be starting to get a sense of what functional\n programming is like, and how partial application \u0026amp; currying\n collaborate with function composition to help you write programs\n which are more readable with less boilerplate.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org7ac8488\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org7ac8488\"\u003e\n \u003cspan class=\"section-number-3\"\u003e4.3.\u003c/span\u003e Source:\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-4-3\"\u003e\n \u003cp\u003e\n \u003ca\n href=\"https://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0\"\n \u003ehttps://medium.com/javascript-scene/master-the-javascript-interview-what-is-function-composition-20dfb109a1a0\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-orgb49a060\" class=\"outline-2\"\u003e\n \u003ch2 id=\"orgb49a060\"\u003e\n \u003cspan class=\"section-number-2\"\u003e5.\u003c/span\u003e What is: Difference Between\n Class \u0026amp; Prototypal Inheritance\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-5\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-org7b70f0c\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org7b70f0c\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.1.\u003c/span\u003e Class Inheritance\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-1\"\u003e\n \u003cp\u003e\n A Class is like a blueprint - a description of the object to be\n created. Classes inherit from classes and create subclass\n relationships: hierarchical class taxonomies.\n \u003c/p\u003e\n\n \u003cp\u003e\n Instances are typically instantiated via constructor functions\n with the \u003cb\u003e\u003cb\u003enew\u003c/b\u003e\u003c/b\u003e keyword. Class inheritance may or may\n not use the \u003cb\u003e\u003cb\u003eclass\u003c/b\u003e\u003c/b\u003e keyword from ES6. Classes as you\n may know them from languages like Java don't technically exist in\n Javascript. Constructor functions are used, instead. The ES6\n \u003cb\u003e\u003cb\u003eclass\u003c/b\u003e\u003c/b\u003e keyword desugars to a constructor function:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Foo {};\nconsole.log(typeof Foo);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\nfunction\nundefined\n\u003c/pre\n \u003e\n\n \u003cp\u003e\n In JS, class inheritance is implemented on top of prototypal\n inheritance, but that does not mean that it does the same thing:\n \u003c/p\u003e\n\n \u003cp\u003e\n JS class inheritance uses the prototype chain o wire the child\n `Constructor.prototype` to the parent `Constructor.prototype` for\n delegation. Usually, the `super()` constructor is also called.\n Those steps form\n \u003cb\u003e\u003cb\u003esingle-ancestor parent/child hierarchies\u003c/b\u003e\u003c/b\u003e and\n \u003cb\u003e\u003cb\u003ecreate the tightest coupling available in OO design\u003c/b\u003e\u003c/b\n \u003e.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgb21c868\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgb21c868\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.2.\u003c/span\u003e Prototypal Inheritance\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-2\"\u003e\n \u003cp\u003e\n A prototype is a working object instance. Objects inherit directly\n from other objects.\n \u003c/p\u003e\n\n \u003cp\u003e\n Instances may be composed from many different source objects,\n allowing for easy selective inheritance and flat\n \u003cb\u003e\u003cb\u003ePrototype\u003c/b\u003e\u003c/b\u003e delegation hierarchy. In other words,\n class taxonomies are not an automatic side-effect of prototypal\n OO: a critical distinction.\n \u003c/p\u003e\n\n \u003cp\u003e\n Instances are typically instantiated via factory functions, object\n literals, or `Object.create()`.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org4f5329e\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org4f5329e\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.3.\u003c/span\u003e Why does this Matter?\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-3\"\u003e\n \u003cp\u003e\n Inheritance is fundamentally a code reuse mechanism: A way for\n different kinds of objects to share code. The way that you share\n code matters because if you get it wrong, it can create a lot of\n problems, specifically:\n \u003c/p\u003e\n\n \u003cp\u003e\n \u003cb\n \u003e\u003cb\n \u003eClass inheritance creates parent/child objects taxonomies as\n side-effect\u003c/b\n \u003e\u003c/b\n \u003e\n \u003c/p\u003e\n\n \u003cp\u003e\n Those are virtually impossible to get right for all new use cases,\n and widespread use of a base class leads to the\n \u003cb\u003e\u003cb\u003efragile base class problem\u003c/b\u003e\u003c/b\n \u003e, which makes them difficult to fix when you get them wrong. In\n fact, class inheritance causes many well known problems in OO\n design:\n \u003c/p\u003e\n\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003e\n The tight coupling problem (class inheritance is the tightest\n coupling avaiable in oo design), which leads to\u0026#x2026;\n \u003c/li\u003e\n \u003cli\u003eThe fragile base class problem\u003c/li\u003e\n \u003cli\u003e\n Inflexible hierarchy problem (eventually, all evolving\n hierarchies are wrong for new uses)\n \u003c/li\u003e\n \u003cli\u003e\n The duplication by necessity problem (due to inflexible\n hierarchies, new use cases are often shoe-horned in by\n duplicating, rather than adapting existing code)\n \u003c/li\u003e\n \u003cli\u003e\n The Gorilla/banana problem (What you wanted was a banana, but\n what you got was a gorilla holding the banana, and the entire\n jungle)\n \u003c/li\u003e\n \u003c/ul\u003e\n\n \u003cp\u003eThe solution to all of these problems:\u003c/p\u003e\n\n \u003cp\u003e\n \u003cb\u003e* Favor object composition over class inheritance. *\u003c/b\u003e\n \u003c/p\u003e\n\n \u003cp\u003e\n ~ The Gang of Four, \"Design Patterns: Elements of Reusable Object\n Oriented Software\"\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgbc4ea95\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgbc4ea95\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.4.\u003c/span\u003e Three Different Kinds of\n Prototypal Inheritance\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-4\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-org7d87754\" class=\"outline-4\"\u003e\n \u003ch4 id=\"org7d87754\"\u003e\n \u003cspan class=\"section-number-4\"\u003e5.4.1.\u003c/span\u003e Before the three\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-5-4-1\"\u003e\n \u003cp\u003e\n Before we dive into the other kinds of inheritance, let's take a\n closer look at what I mean by class inheritance:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n // Class Inheritance Example\n // NOT RECOMMENDED. Use object composition, instead.\n class GuitarAmp {\n constructor ({ cabinet = \"spruce\", distortion = \"1\", volume = \"0\" } = {}) {\n Object.assign(this, {\n\t cabinet, distortion, volume\n });\n }\n }\n\n class BassAmp extends GuitarAmp {\n constructor (options = {}) {\n super(options);\n this.lowCut = options.lowCut;\n }\n }\n\n class ChannelStrip extends BassAmp {\n constructor (options = {}) {\n super(options);\n this.inputLevel = options.inputLevel;\n }\n }\n\n const myAmp = new BassAmp();\n const actualAmp = Object.keys(myAmp);\n const expectedAmp = [\"cabinet\", \"distortion\", \"volume\", \"lowCut\"];\n\n console.log(\"1.\", actualAmp, expectedAmp, \" instance should inherit props from GuitarAmp and BassAmp\");\n\n const myStrip = new ChannelStrip();\n const actualStrip = Object.keys(myStrip);\n const expectedStrip = [\"cabinet\", \"distortion\", \"volume\", \"lowCut\", \"inputLevel\"];\n\nconsole.log(\"2.\", actualStrip, expectedStrip, \" instance should inherit props from GuitarAmp, BassAmp and ChannelStrip\");\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\n1. [ 'cabinet', 'distortion', 'volume', 'lowCut' ] [ 'cabinet', 'distortion', 'volume', 'lowCut' ] instance should inherit props from GuitarAmp and BassAmp\n2. [ 'cabinet', 'distortion', 'volume', 'lowCut', 'inputLevel' ] [ 'cabinet', 'distortion', 'volume', 'lowCut', 'inputLevel' ] instance should inherit props from GuitarAmp, BassAmp and ChannelStrip\nundefined\n\u003c/pre\n \u003e\n\n \u003cp\u003e\n `BassAmp` inherits from `GuitarAmp`, and `ChannelStrip` inherits\n from `BassAmp` \u0026amp; `GuitarAmp`. This is an example of how OO\n design goes wrong. A channel strip isn’t actually a type of\n guitar amp, and doesn’t actually need a cabinet at all. A better\n option would be to create a new base class that both the amps\n and the channel strip inherits from, but even that has\n limitations.\n \u003c/p\u003e\n\n \u003cp\u003e\n Eventually, the new shared base class strategy breaks down, too.\n \u003c/p\u003e\n\n \u003cp\u003e\n There’s a better way. You can inherit just the stuff you really\n need using object composition:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n// Composition Example\n\nconst distortion = { distortion: 1 };\nconst volume = { volume: 1 };\nconst cabinet = { cabinet: \"maple\" };\nconst lowCut = { lowCut: 1 };\nconst inputLevel = { inputLevel: 1 };\n\nconst GuitarAmp = (options) =\u0026gt; {\n return Object.assign({}, distortion, volume, cabinet, options);\n};\n\nconst BassAmp = (options) =\u0026gt; {\n return Object.assign({}, lowCut, volume, cabinet, options);\n};\n\nconst ChannelStrip = (options) =\u0026gt; {\n return Object.assign({}, inputLevel, lowCut, volume, options);\n};\n\n\n const msgGuitarAmp = \"should have distortion, volume, and cabinet\";\n const levelGuitarAmp = 2;\n const cabinetGuitarAmp = \"vintage\";\n\n const actualGuitarAmp = GuitarAmp({\n distortion: levelGuitarAmp,\n volume: levelGuitarAmp,\n cabinet: cabinetGuitarAmp\n });\n const expectedGuitarAmp = {\n distortion: levelGuitarAmp,\n volume: levelGuitarAmp,\n cabinet: cabinetGuitarAmp,\n };\n\n console.log(\"1.\", actualGuitarAmp, expectedGuitarAmp, msgGuitarAmp);\n\n const msgBassAmp = \"should have volume, lowCut, and cabinet\";\n const levelBassAmp = 2;\n const cabinetBassAmp = \"vintage\";\n\n const actualBassAmp = BassAmp({\n lowCut: levelBassAmp,\n volume: levelBassAmp,\n cabinet: cabinetBassAmp\n });\n const expectedBassAmp = {\n lowCut: levelBassAmp,\n volume: levelBassAmp,\n cabinet: cabinetBassAmp,\n };\n\n console.log(\"2.\", actualBassAmp, expectedBassAmp, msgBassAmp);\n\nconst msgChannel = \"should have inputLevel, lowCut, and volume\";\nconst levelChannel = 2;\n\nconst actualChannel = ChannelStrip({\n inputLevel: levelChannel,\n lowCut: levelChannel,\n volume: levelChannel,\n });\n const expectedChannel = {\n inputLevel: levelChannel,\n lowCut: levelChannel,\n volume: levelChannel,\n };\n\nconsole.log(\"2.\", actualChannel, expectedChannel, msgChannel);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\n1. { distortion: 2, volume: 2, cabinet: 'vintage' } { distortion: 2, volume: 2, cabinet: 'vintage' } should have distortion, volume, and cabinet\n2. { lowCut: 2, volume: 2, cabinet: 'vintage' } { lowCut: 2, volume: 2, cabinet: 'vintage' } should have volume, lowCut, and cabinet\n2. { inputLevel: 2, lowCut: 2, volume: 2 } { inputLevel: 2, lowCut: 2, volume: 2 } should have inputLevel, lowCut, and volume\nundefined\n\u003c/pre\n \u003e\n\n \u003cp\u003e\n If you look carefully, you might see that we're being much more\n specific about which objects get which properties because with\n composition, we can. It wasn't really an option with class\n inheritance. When you inherit from a class, you get everything,\n even if you don’t want it.\n \u003c/p\u003e\n\n \u003cp\u003e\n At this point, you may be thinking to yourself, \"that's nice,\n but where are the prototypes?\"\n \u003c/p\u003e\n\n \u003cp\u003e\n To understand that, you have to understand that there are three\n different kinds of prototypal OO.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgf8b016d\" class=\"outline-4\"\u003e\n \u003ch4 id=\"orgf8b016d\"\u003e\n \u003cspan class=\"section-number-4\"\u003e5.4.2.\u003c/span\u003e Concatenative\n inheritance\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-5-4-2\"\u003e\n \u003cp\u003e\n The process of inheriting features directly from one object to\n another by copying the source objects properties. In JavaScript,\n source prototypes are commonly referred to as mixins. Since ES6,\n this feature has a convenience utility in JavaScript called\n `Object.assign()`. Prior to ES6, this was commonly done with\n Underscore/Lodash's `.extend()` jQuery's `$.extend()`, and so\n on… The composition example above uses concatenative\n inheritance.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org3fbe9dc\" class=\"outline-4\"\u003e\n \u003ch4 id=\"org3fbe9dc\"\u003e\n \u003cspan class=\"section-number-4\"\u003e5.4.3.\u003c/span\u003e Prototype delegation\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-5-4-3\"\u003e\n \u003cp\u003e\n In JavaScript, an object may have a link to a prototype for\n delegation. If a property is not found on the object, the lookup\n is delegated to the delegate prototype, which may have a link to\n its own delegate prototype, and so on up the chain until you\n arrive at `Object.prototype`, which is the root delegate. This\n is the prototype that gets hooked up when you attach to a\n `Constructor.prototype` and instantiate with `new`. You can also\n use `Object.create()` for this purpose, and even mix this\n technique with concatenation in order to flatten multiple\n prototypes to a single delegate, or extend the object instance\n after creation.\n \u003c/p\u003e\n\n \u003cp\u003eThe JS prototype chain:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-artist\"\u003e\n+---------------------+ +----------------------+\t +---------------------+\n| George | | Prototype +--------+ Object.prototype |\n| name\t +-------+ hello() |\t | ... |\n| [[Prototype]] | | [[Prototype]] |\t | |\n| | | |\t | |\n+---------------------+ +----------------------+\t +---------------------+\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgf4e7844\" class=\"outline-4\"\u003e\n \u003ch4 id=\"orgf4e7844\"\u003e\n \u003cspan class=\"section-number-4\"\u003e5.4.4.\u003c/span\u003e Functional\n inheritance\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-5-4-4\"\u003e\n \u003cp\u003e\n In JavaScript, any function can create an object. When that\n function is not a constructor (or `class`), it's called a\n factory function. Functional inheritance works by producing an\n object from a factory, and extending the produced object by\n assigning properties to it directly (using concatenative\n inheritance). Douglas Crockford coined the term, but functional\n inheritance has been in common use in JavaScript for a long\n time.\n \u003c/p\u003e\n\n \u003cp\u003e\n As you're probably starting to realize, concatenative\n inheritance is the secret sauce that enables object composition\n in JavaScript, which makes both prototype delegation and\n functional inheritance a lot more interesting.\n \u003c/p\u003e\n\n \u003cp\u003e\n When most people think of prototypal OO in JavaScript, they\n think of prototype delegation. By now you should see that\n they’re missing out on a lot. Delegate prototypes aren't the\n great alternative to class inheritance — object composition is.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgbd82260\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgbd82260\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.5.\u003c/span\u003e Why Composition is Immune\n to the Fragile Base Class Problem\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-5\"\u003e\n \u003cp\u003e\n To understand the fragile base class problem and why it doesn’t\n apply to composition, first you have to understand how it happens:\n \u003c/p\u003e\n\n \u003cp\u003e`A` is the base class\u003c/p\u003e\n\n \u003cp\u003e`B` inherits from `A`\u003c/p\u003e\n\n \u003cp\u003e`C` inherits from `B`\u003c/p\u003e\n\n \u003cp\u003e`D` inherits from `B`\u003c/p\u003e\n\n \u003cp\u003e\n `C` calls `super`, which runs code in `B`. `B` calls `super` which\n runs code in `A`.\n \u003c/p\u003e\n\n \u003cp\u003e\n `A` and `B` contain unrelated features needed by both `C` \u0026amp;\n `D`. `D` is a new use case, and needs slightly different behavior\n in `A`'s init code than `C` needs. So the newbie dev goes and\n tweaks `A`'s init code. `C` breaks because it depends on the\n existing behavior, and `D` starts working.\n \u003c/p\u003e\n\n \u003cp\u003e\n What we have here are features spread out between `A` and `B` that\n `C` and `D` need to use in various ways. `C` and `D` don't use\n every feature of `A` and `B`… they just want to inherit some stuff\n that's already defined in `A` and `B`. But by inheriting and\n calling `super`, you don't get to be selective about what you\n inherit. You inherit everything:\n \u003c/p\u003e\n\n \u003cp\u003e\n ** \u0026#x2026;the problem with object-oriented languages is they’ve\n got all this implicit environment that they carry around with\n them. You wanted a banana but what you got was a gorilla holding\n the banana and the entire jungle.” ~ Joe Armstrong — “Coders at\n Work **\n \u003c/p\u003e\n\n \u003cp\u003eWith Composition\u003c/p\u003e\n\n \u003cp\u003eImagine you have features instead of classes:\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nfeat1, feat2, feat3, feat4\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n `C` needs `feat1` and `feat3`, `D` needs `feat1`, `feat2`,\n `feat4`:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst C = compose(feat1, feat3);\nconst D = compose(feat1, feat2, feat4);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Now, imagine you discover that `D` needs slightly different\n behavior from `feat1`. It doesn’t actually need to change `feat1`,\n instead, you can make a customized version of `feat1` and use\n that, instead. You can still inherit the existing behaviors from\n `feat2` and `feat4` with no changes:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst D = compose(custom1, feat2, feat4); \n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eAnd `C` remains unaffected.\u003c/p\u003e\n\n \u003cp\u003e\n The reason this is not possible with class inheritance is because\n when you use class inheritance, you buy into the whole existing\n class taxonomy.\n \u003c/p\u003e\n\n \u003cp\u003e\n If you want to adapt a little for a new use-case, you either end\n up duplicating parts of the existing taxonomy (the duplication by\n necessity problem), or you refactor everything that depends on the\n existing taxonomy to adapt the taxonomy to the new use case due to\n the fragile base class problem.\n \u003c/p\u003e\n\n \u003cp\u003eComposition is immune to both.\u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgca8ee63\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgca8ee63\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.6.\u003c/span\u003e You think you know\n Prototypes, but\u0026#x2026;\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-6\"\u003e\n \u003cp\u003e\n If you were taught to build classes or constructor functions and\n inherit from those, what you were taught was not prototypal\n inheritance. You were taught how to mimic class inheritance using\n prototypes.\n \u003c/p\u003e\n\n \u003cp\u003e\n In JavaScript, class inheritance piggybacks on top of the very\n rich, flexible prototypal inheritance features built into the\n language a long time ago, but when you use class inheritance —\n even the ES6+ `class` inheritance built on top of prototypes,\n you're not using the full power \u0026amp; flexibility of prototypal\n OO. In fact, you're painting yourself into corners and opting into\n all of the class inheritance problems.\n \u003c/p\u003e\n\n \u003cp\u003e\n Using class inheritance in JavaScript is like driving your new\n Tesla Model S to the dealer and trading it in for a rusted out\n 1973 Ford Pinto.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-org4b7dfdb\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org4b7dfdb\"\u003e\n \u003cspan class=\"section-number-3\"\u003e5.7.\u003c/span\u003e Source\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-5-7\"\u003e\n \u003cp\u003e\n Almost all by this great article:\n \u003ca\n href=\"https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9\"\n \u003ehttps://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-org53a4ed7\" class=\"outline-2\"\u003e\n \u003ch2 id=\"org53a4ed7\"\u003e\n \u003cspan class=\"section-number-2\"\u003e6.\u003c/span\u003e Referential Transparency /\n Opacity in JS\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-6\"\u003e\n \u003cp\u003e\n Referential transparency is used in many domains, for example:\n mathematics, logic, linguistics, philosophy and programming. It has\n quite changed meanings in each of these domains.\n \u003c/p\u003e\n\n \u003cp\u003e\n Referential transparency in programming relates to programs. By the\n way of programs are composed of subprograms that are programs\n themselves. It relates to those subprograms, also. Subprograms can\n be signified by methods.\n \u003c/p\u003e\n\n \u003cp\u003eExample:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nvar identifty = (i) =\u0026gt; { return i }\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003e\n We have defined a simple function named identity in the above code\n snippet.\n \u003c/li\u003e\n \u003cli\u003eThis function return whatsoever we're passing as its input.\u003c/li\u003e\n \u003cli\u003eThat is, if we passes 10, it returns back the value 10.\u003c/li\u003e\n \u003cli\u003eAs the function is only acts as a mirror and identity.\u003c/li\u003e\n \u003cli\u003eOur function does work only on the incoming argument `i`.\u003c/li\u003e\n \u003cli\u003eThere is no global reference inside our function.\u003c/li\u003e\n \u003c/ul\u003e\n\n \u003cp\u003e\n At the present conceive this function is used between other function\n calls like this:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nsum(4,5) + identity(1)\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n By means of our Referential Transparency definition we may change\n the above statement into this:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nsum(4,5) + 1\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003eAt this moment this process is called a Substitution model.\u003c/li\u003e\n \u003cli\u003e\n By way of we can directly substitute the result of the function as\n is with its value.\n \u003c/li\u003e\n \u003cli\u003e\n Generally due to the function doesn’t rely on other global\n variables for its logic.\n \u003c/li\u003e\n \u003cli\u003eThis leads to equivalent code and caching.\u003c/li\u003e\n \u003cli\u003e\n We may easily run the above function with several threads deprived\n of even the need of synchronizing.\n \u003c/li\u003e\n \u003cli\u003e\n The motive for synchronizing comes from the detail that threads\n shouldn't do global data when running equivalent.\n \u003c/li\u003e\n \u003cli\u003e\n Functions that follow Referential Transparency depends only on\n inputs from its argument.\n \u003c/li\u003e\n \u003cli\u003e\n Therefore, threads are allowed to run without any locking\n mechanism.\n \u003c/li\u003e\n \u003cli\u003e\n Meanwhile the function returns the same value for the given input.\n \u003c/li\u003e\n \u003cli\u003e\n We may, actually cache it. For instance, see there is a function\n called factorial.\n \u003c/li\u003e\n \u003cli\u003eCalculates the factorial of the given number.\u003c/li\u003e\n \u003cli\u003e\n Factorial takes the input as its argument for which the factorial\n needs to be calculated.\n \u003c/li\u003e\n \u003cli\u003eWe all recognize the factorial of 5 going to be 120.\u003c/li\u003e\n \u003cli\u003e\n What would be if the user calls the factorial of 5 a second time?\n \u003c/li\u003e\n \u003cli\u003e\n We see that the result is to be 120 if the factorial function\n follows Referential transparency as before.\n \u003c/li\u003e\n \u003cli\u003eIt only be contingent on the input argument.\u003c/li\u003e\n \u003cli\u003e\n We may cache the values of our factorial function by keeping in\n mind these characters.\n \u003c/li\u003e\n \u003cli\u003e\n Thus if a factorial is called for the second time with the input\n as `5`, we can return the cached value instead of calculating once\n again.\n \u003c/li\u003e\n \u003c/ul\u003e\n\n \u003cp\u003e\n `An expression is called referentially transparent if it can be\n replaced with its corresponding value (and vice-versa) without\n changing the program's behavior.[1] This requires that the\n expression be pure – its value must be the same for the same inputs\n and its evaluation must have no side effects. An expression that is\n not referentially transparent is called referentially opaque.`\n \u003c/p\u003e\n\n \u003cp\u003eExamples of both:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nvar g = 0;\n\nfunction rt (x) {\n return x + 1\n}\n\nfunction ro (x) {\n g++;\n return x + g;\n}\n\nconsole.log(rt(1));\nconsole.log(rt(1));\nconsole.log(rt(1));\n\nconsole.log(ro(1));\nconsole.log(ro(1));\nconsole.log(ro(1));\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\n2\n2\n2\n2\n3\n4\nundefined\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org7993093\" class=\"outline-2\"\u003e\n \u003ch2 id=\"org7993093\"\u003e\n \u003cspan class=\"section-number-2\"\u003e7.\u003c/span\u003e What is: Closure\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-7\"\u003e\n \u003cp\u003e\n Closures are important because they control what is and isn't in\n scope in a particular function, along with which variables are\n shared between sibling functions in the same containing scope.\n Understanding how variables and functions relate to each other is\n critical to understanding what's going on in your code, in both\n functional and object oriented programming styles.\n \u003c/p\u003e\n\n \u003cpre class=\"example\"\u003e\nCoding without understanding of Closures is like trying to\nspeak English without understanding the grammar rules.\nYou might be able to get your ideas across, but probably a\nbit awkaardly.\n\u003c/pre\n \u003e\n\n \u003cp\u003e\n In JS closures are frequently used for data privacy, in event\n handlers and callback functions, and in partial applications,\n currying and other functional programming patterns.\n \u003c/p\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgbe2bb3f\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgbe2bb3f\"\u003e\n \u003cspan class=\"section-number-3\"\u003e7.1.\u003c/span\u003e What is it?\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-7-1\"\u003e\n \u003cp\u003e\n Is the combination of a function bundled together (enclosed) with\n references to its surrounding sate (the\n \u003cb\u003e\u003cb\u003elexical environment\u003c/b\u003e\u003c/b\n \u003e). In other words, a closure gives you access to an outer\n function's scope from a inner function. In JavaScript, closures\n are created every time a function is created, at function creation\n time.\n \u003c/p\u003e\n\n \u003cp\u003e\n To use a Closure, define a function inside another function and\n expose it. To expose a function, return it or pass it to another\n function.\n \u003c/p\u003e\n\n \u003cp\u003e\n The inner function will have access to the variables in the outer\n function scope, even after the outer function has returned.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org834d2b2\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org834d2b2\"\u003e\n \u003cspan class=\"section-number-3\"\u003e7.2.\u003c/span\u003e Using Closures (Examples)\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-7-2\"\u003e\n \u003cp\u003e\n Among other things, closures are commonly used to give objects\n data privacy. Data privacy is an essential property that helps us\n \u003cb\u003e\u003cb\u003eprogram to an interface, not an implementation\u003c/b\u003e\u003c/b\n \u003e. This is an important concept that helps us build more robust\n software because implementation details are more likely to change\n in breaking ways than interface contracts.\n \u003c/p\u003e\n\n \u003cp\u003e\n In JavaScript, closures are the primary mechanism used to enable\n data privacy. When you use closures for data privacy, the enclosed\n variables are only in scope within the containing (outer)\n function. You can’t get at the data from an outside scope except\n through the object’s privileged methods. In JavaScript, any\n exposed method defined within the closure scope is privileged. For\n example:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst getSecret = (secret) =\u0026gt; {\n return {\n get: () =\u0026gt; secret\n };\n};\n\ntest('Closure for object privacy.', assert =\u0026gt; {\n const msg = '.get() should have access to the closure.';\n const expected = 1;\n const obj = getSecret(1);\n\n const actual = obj.get();\n\n try {\n assert.ok(secret, 'This throws an error.');\n } catch (e) {\n assert.ok(true, `The secret var is only available\n to privileged methods.`);\n }\n\n assert.equal(actual, expected, msg);\n assert.end();\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n In the example above, the `.get()` method is defined inside the\n scope of `getSecret()`, which gives it access to any variables\n from `getSecret()`, and makes it a privileged method. In this\n case, the parameter, `secret`.\n \u003c/p\u003e\n\n \u003cp\u003e\n Objects are not the only way to produce data privacy. Closures can\n also be used to create stateful functions whose return values may\n be influenced by their internal state, e.g.:\n \u003c/p\u003e\n\n \u003cp\u003e`const secret = msg =\u0026gt; () =\u0026gt; msg;`\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n// Secret - creates closures with secret messages.\n// https://gist.github.com/ericelliott/f6a87bc41de31562d0f9\n// https://jsbin.com/hitusu/edit?html,js,output\n\n// secret(msg: String) =\u0026gt; getSecret() =\u0026gt; msg: String\nconst secret = (msg) =\u0026gt; () =\u0026gt; msg;\n\ntest('secret', assert =\u0026gt; {\n const msg = 'secret() should return a function that returns the passed secret.';\n\n const theSecret = 'Closures are easy.';\n const mySecret = secret(theSecret);\n\n const actual = mySecret();\n const expected = theSecret;\n\n assert.equal(actual, expected, msg);\n assert.end();\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n In functional programming, closures are frequently used for\n partial application \u0026amp; currying. This requires some\n definitions:\n \u003c/p\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org4f57bd9\" class=\"outline-4\"\u003e\n \u003ch4 id=\"org4f57bd9\"\u003e\n \u003cspan class=\"section-number-4\"\u003e7.2.1.\u003c/span\u003e Application:\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-7-2-1\"\u003e\n \u003cp\u003e\n The process of applying a function to its arguments in order to\n produce a return value.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgb81007c\" class=\"outline-4\"\u003e\n \u003ch4 id=\"orgb81007c\"\u003e\n \u003cspan class=\"section-number-4\"\u003e7.2.2.\u003c/span\u003e Partial Application:\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-7-2-2\"\u003e\n \u003cp\u003e\n The process of applying a function to some of its arguments. The\n partially applied function gets returned for later use. Partial\n application fixes (partially applies the function to) one or\n more arguments inside the returned function, and the returned\n function takes the remaining parameters as arguments in order to\n complete the function application.\n \u003c/p\u003e\n\n \u003cp\u003e\n Partial application takes advantage of closure scope in order to\n fix parameters. You can write a generic function that will\n partially apply arguments to the target function. It will have\n the following signature:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\npartialApply(targetFunction: Function, ...fixedArgs: Any[]) =\u0026gt;\nfunctionWithFewerParams(...remainingArgs: Any[])\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n It will take a function that takes any number of arguments,\n followed by arguments we want to partially apply to the\n function, and returns a function that will take the remaining\n arguments\n \u003c/p\u003e\n\n \u003cp\u003e\n An example will help. Say you have a function that adds two\n numbers:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst add = (a, b) =\u0026gt; a + b;\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Now you want a function that adds 10 to any number. We'll call\n it `add10()`. The result of `add10(5)` should be `15`. Our\n `partialApply()` function can make that happen:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst add10 = partialApply(add, 10);\nadd10(5);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n In this example, the argument, `10` becomes a fixed parameter\n remembered inside the `add10()` closure scope.\n \u003c/p\u003e\n\n \u003cp\u003eLet's look at a possible `partialApply()` implementation:\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n// Generic Partial Application Function\n// https://jsbin.com/biyupu/edit?html,js,output\n// https://gist.github.com/ericelliott/f0a8fd662111ea2f569e\n\n// partialApply(targetFunction: Function, ...fixedArgs: Any[]) =\u0026gt;\n// functionWithFewerParams(...remainingArgs: Any[])\nconst partialApply = (fn, ...fixedArgs) =\u0026gt; {\n return function (...remainingArgs) {\n return fn.apply(this, fixedArgs.concat(remainingArgs));\n };\n};\n\n\ntest('add10', assert =\u0026gt; {\n const msg = 'partialApply() should partially apply functions'\n\n const add = (a, b) =\u0026gt; a + b;\n\n const add10 = partialApply(add, 10);\n\n\n const actual = add10(5);\n const expected = 15;\n\n assert.equal(actual, expected, msg);\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n As you can see, it simply returns a function which retains\n access to the `fixedArgs` arguments that were passed into the\n `partialApply()` function.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org29803b0\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org29803b0\"\u003e\n \u003cspan class=\"section-number-3\"\u003e7.3.\u003c/span\u003e Source:\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-7-3\"\u003e\n \u003cp\u003e\n Heavily based on:\n \u003ca\n href=\"https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36\"\n \u003ehttps://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org1adb7de\" class=\"outline-2\"\u003e\n \u003ch2 id=\"org1adb7de\"\u003e\n \u003cspan class=\"section-number-2\"\u003e8.\u003c/span\u003e What is: Pure Functions\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-8\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-orgbfe6f0d\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgbfe6f0d\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.1.\u003c/span\u003e General Definition\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-1\"\u003e\n \u003cp\u003eIs a function where:\u003c/p\u003e\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003eGiven the same input, always returns the same output\u003c/li\u003e\n \u003cli\u003eProduces no side effects\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"outline-container-org889ecb5\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org889ecb5\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.2.\u003c/span\u003e Functions as a whole\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-2\"\u003e\n \u003cp\u003e\n Is a process of taking some input, called arguments, and producing\n some output to the called return value.\n \u003c/p\u003e\n\n \u003cp\u003eMain purposes:\u003c/p\u003e\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003e\n Mapping: Process output based on given inputs. Maps input values\n to output values\n \u003c/li\u003e\n \u003cli\u003e\n Procedures: A function to perform a sequence of steps. This is\n style is procedural programming.\n \u003c/li\u003e\n \u003cli\u003e\n I/O: In order to communicate with the system: screen, storage,\n logs, network.\n \u003c/li\u003e\n \u003c/ul\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org89b0ac3\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org89b0ac3\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.3.\u003c/span\u003e Back to definition\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-3\"\u003e\n \u003cp\u003eIf a function where:\u003c/p\u003e\n \u003cul class=\"org-ul\"\u003e\n \u003cli\u003eGiven the same input, always returns the same output\u003c/li\u003e\n \u003cli\u003eProduces no side effects\u003c/li\u003e\n \u003c/ul\u003e\n\n \u003cp\u003eIf I have a function like:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nfunction double(number) {\n return 2 * number;\n}\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eI can say that these are both \"the same\"\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconsole.log(double(5));\nconsole.log(10); // They produces the same result\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n If you want \u003cb\u003e\u003cb\u003eReferential Transparency\u003c/b\u003e\u003c/b\u003e you need to use\n pure functions.\n \u003c/p\u003e\n\n \u003cp\u003e\n A dead giveaway that a function is impure is if it makes sense to\n call it without using its return value. For pure functions, that's\n a nope.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgabb4ee7\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgabb4ee7\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.4.\u003c/span\u003e Recommendation\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-4\"\u003e\n \u003cp\u003e\n Favor pure functions: If it is practical to implement a program\n requirement using pure functions, you should use them over other\n options. They are the simplest reusable build blocks of code in a\n program.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org1f70027\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org1f70027\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.5.\u003c/span\u003e The most important design\n principle (KISS)\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-5\"\u003e\n \u003cp\u003eKeep it Simple Stupid or, Keep it Stupid Simple\u003c/p\u003e\n\n \u003cp\u003e\n Pure functions are completely independent of outside state, and as\n such, they are immune to entire classes of bugs that happen with a\n shared mutable state.\n \u003c/p\u003e\n\n \u003cp\u003e\n This independent nature makes them great candidates for parallel\n processing across many CPUs and distribute clusters.\n \u003c/p\u003e\n\n \u003cp\u003e\n They are also easier to move around, refactor, and reorganize in\n the code, making programs more flexible and adaptable to future\n changes.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orge169a50\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orge169a50\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.6.\u003c/span\u003e Problem with Shared State\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-6\"\u003e\n \u003cp\u003e\n In an example: if you make requests from a query text field as the\n user types. You may have times where the last request \"Java\" for\n example comes and occupies the UI response element, before the\n request for \"JavaScript\" was even sent.\n \u003c/p\u003e\n\n \u003cp\u003e\n To fix this, you should build a manager that cancels the previous\n AJAX request.\n \u003c/p\u003e\n\n \u003cp\u003e\n Martin Odersky (Creator of Scala) puts it: `non-determinism =\n parallel processing + mutable state`\n \u003c/p\u003e\n\n \u003cp\u003eYou should avoid it.\u003c/p\u003e\n\n \u003cp\u003e\n Program determinism is a LOT desirable in computing. If you think\n JS is immune because it only use single thread. Remember that\n AJAX, API I/O event listeners, web workers, iframes and timeouts\n can introduce indeterminism into your program. Combine that with\n shared state, you have a recipe for bugs.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org88ac51d\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org88ac51d\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.7.\u003c/span\u003e Given the same Input,\n Always Returns the Same Output\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-7\"\u003e\n \u003cp\u003e\n Our `double` function will always return 10 for 5 as parameter, it\n doesn't matter how many times we call it\n \u003c/p\u003e\n\n \u003cp\u003eBut we can't say the same for `Math.random()` for example.\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nMath.random();\n// 0.8335683328172347\n\nMath.random();\n// 0.8910118593581697\n\nMath.random();\n//0.3099123827043109\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Even tough we didn't pass any arguments into any of the function\n calls, they produced different output. This function is not pure.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst time = () =\u0026gt; new Date().toLocaleTimeString();\n\ntime(); // '8:45:51 AM'\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n This is also not pure, even thought it repeats its output one time\n each day.\n \u003c/p\u003e\n\n \u003cp\u003eNow an example of pure function:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst highpass = (cutoff, value) =\u0026gt; value \u0026gt;= cutoff;\n\nhighpass(5, 5); // =\u0026gt; true Always the same result given the same inputs\nhighpass(5, 5); // =\u0026gt; true\nhighpass(5, 5); // =\u0026gt; true\n\nhighpass(5, 123); // true Many inputs may map to the same ouputs\nhighpass(5, 6); // true\nhighpass(5, 18); // true\nhighpass(5, 1); // false\nhighpass(5, 3); // false\nhighpass(5, 4); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n A pure function must not rely on any external mutable state,\n because it would no longer be deterministic or referentially\n transparent.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org50fa64e\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org50fa64e\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.8.\u003c/span\u003e Pure functions Produce No\n SIDE EFFECTS\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-8\"\u003e\n \u003cp\u003e\n A pure function produces no side effects, which means that it\n can't alter any external state.\n \u003c/p\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org685b326\" class=\"outline-4\"\u003e\n \u003ch4 id=\"org685b326\"\u003e\n \u003cspan class=\"section-number-4\"\u003e8.8.1.\u003c/span\u003e Immutability\n \u003c/h4\u003e\n \u003cdiv class=\"outline-text-4\" id=\"text-8-8-1\"\u003e\n \u003cp\u003e\n JavaScript's object arguments are references, which means that\n if a function were to mutate a property on an object or array\n parameter, that would mutate state that is accessible outside\n the function. Pure functions must not mutate external state.\n \u003c/p\u003e\n\n \u003cp\u003eConsider this mutating, impure `addToCart()` function:\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n// impure addToCart mutates existing cart\nconst addToCart = (cart, item, quantity) =\u0026gt; {\n cart.items.push({\n item,\n quantity\n });\n return cart;\n};\n\n\ntest('addToCart()', assert =\u0026gt; {\n const msg = 'addToCart() should add a new item to the cart.';\n const originalCart = {\n items: []\n };\n const cart = addToCart(\n originalCart,\n {\n name: \"Digital SLR Camera\",\n price: '1495'\n },\n 1\n );\n\n const expected = 1; // num items in cart\n const actual = cart.items.length;\n\n assert.equal(actual, expected, msg);\n\n assert.deepEqual(originalCart, cart, 'mutates original cart.');\n assert.end();\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n It works by passing a cart and item to add to the cart. The\n function then returns the same cart, with the item added to it.\n \u003c/p\u003e\n\n \u003cp\u003e\n The problem is that we've just mutated some shared state. Other\n functions may be relying on that cart object state to be what it\n was before the function was called and now we have to worry\n about what impact it will have on the program logic if we change\n the order. Refactoring the code could result in bugs popping up\n and unhappy customers.\n \u003c/p\u003e\n\n \u003cp\u003eConsider this version:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n// Pure addToCart() returns a new cart\n// It does not mutate the original.\nconst addToCart = (cart, item, quantity) =\u0026gt; {\n const newCart = lodash.cloneDeep(cart);\n\n newCart.items.push({\n item,\n quantity\n });\n return newCart;\n\n};\n\n\ntest('addToCart()', assert =\u0026gt; {\n const msg = 'addToCart() should add a new item to the cart.';\n const originalCart = {\n items: []\n };\n\n // deep-freeze on npm\n // throws an error if original is mutated\n deepFreeze(originalCart);\n\n const cart = addToCart(\n originalCart,\n {\n name: \"Digital SLR Camera\",\n price: '1495'\n },\n 1\n );\n\n\n const expected = 1; // num items in cart\n const actual = cart.items.length;\n\n assert.equal(actual, expected, msg);\n\n assert.notDeepEqual(originalCart, cart,\n 'should not mutate original cart.');\n assert.end();\n});\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n In this example, we have an array nested in an object, which is\n why I reached for a deep clone. This is more complex state than\n you’ll typically be dealing with. For most things, you can break\n it down into smaller chunks.\n \u003c/p\u003e\n\n \u003cp\u003e\n For example, Redux lets you compose reducers rather than deal\n with the entire app state inside each reducer. The result is\n that you don't have to create a deep clone of the entire app\n state every time you want to update just a small part of it.\n Instead, you can use non-destructive array methods, or\n `Object.assign()` to update a small part of the app state.\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgfb0b66e\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgfb0b66e\"\u003e\n \u003cspan class=\"section-number-3\"\u003e8.9.\u003c/span\u003e Source\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-8-9\"\u003e\n \u003cp\u003e\n This topic is based on:\n \u003ca\n href=\"https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976\"\n \u003ehttps://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976\u003c/a\n \u003e\n \u003c/p\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org8633269\" class=\"outline-2\"\u003e\n \u003ch2 id=\"org8633269\"\u003e\n \u003cspan class=\"section-number-2\"\u003e9.\u003c/span\u003e New features of ES13\n \u003c/h2\u003e\n \u003cdiv class=\"outline-text-2\" id=\"text-9\"\u003e\u003c/div\u003e\n \u003cdiv id=\"outline-container-orgb11321c\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgb11321c\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.1.\u003c/span\u003e Class Field Declarations\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-1\"\u003e\n \u003cp\u003e\n Before ES13 we could not declare class fields outside the\n constructor:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n constructor() {\n this.color = 'blue';\n this.age = 2;\n }\n}\nconst car = new Car();\nconsole.log(car.color); // blue\nconsole.log(car.age); // 2\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eES13 removes this limitation:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n color = 'blue';\n age = 2;\n}\nconst car = new Car();\nconsole.log(car.color); // blue\nconsole.log(car.age); // 2\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org1e2a07a\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org1e2a07a\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.2.\u003c/span\u003e Private Methods and\n Fields\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-2\"\u003e\n \u003cp\u003e\n Members were usually prefixed with an _ to indicate it should be\n private. But could still be accessed from outside.\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Person {\n _firstName = 'Joseph';\n _lastName = 'Stevens';\n get name() {\n return `${this._firstName} ${this._lastName}`;\n }\n}\n\nconst person = new Person();\nconsole.log(person.name); // Joseph Stevens\n\n// Members intended to be private can still be accessed\n// from outside the class\nconsole.log(person._firstName); // Joseph\nconsole.log(person._lastName); // Stevens\n\n// They can also be modified\nperson._firstName = 'Robert';\nperson._lastName = 'Becker';\nconsole.log(person.name); // Robert Becker\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eNow we use # to add private fields to our classes\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Person {\n #firstName = 'Joseph';\n #lastName = 'Stevens';\n get name() {\n return `${this.#firstName} ${this.#lastName}`;\n }\n}\n\nconst person = new Person();\n\nconsole.log(person.name);\n\n// SyntaxError: Private field '#firstName' must be\n// declared in an enclosing class\nconsole.log(person.#firstName);\nconsole.log(person.#lastName);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org2bdbe6d\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org2bdbe6d\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.3.\u003c/span\u003e await Operator at Top\n level\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-3\"\u003e\n \u003cp\u003e\n Previously we could only use await with async function. We could\n not use this in the global scope.\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\n function setTimeoutAsync(timeout) {\n return new Promise((resolve) =\u0026gt; {\n setTimeout(() =\u0026gt; {\n resolve();\n }, timeout);\n });\n}\n\n// SyntaxError: await is only valid in async functions\nawait setTimeoutAsync(3000);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003eNow it is possible:\u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nfunction setTimeoutAsync(timeout) {\n return new Promise((resolve) =\u0026gt; {\n setTimeout(() =\u0026gt; {\n resolve();\n }, timeout);\n });\n}\n\n// Waits for timeout - no error thrown\nawait setTimeoutAsync(3000);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org34a8f52\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org34a8f52\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.4.\u003c/span\u003e Static Class Fields and\n Static Private Methods\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-4\"\u003e\n \u003cp\u003e\n We can now declare static fields and static private methods for a\n class in ES13. Static methods can access other private/public\n static members in the class using the this keyword, and instance\n methods can access them using this.constructor.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Person {\n static #count = 0;\n static getCount() {\n return this.#count;\n }\n constructor() {\n this.constructor.#incrementCount();\n }\n static #incrementCount() {\n this.#count++;\n }\n}\n\nconst person1 = new Person();\nconst person2 = new Person();\nconsole.log(Person.getCount()); // 2\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org739d02e\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org739d02e\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.5.\u003c/span\u003e Class static Block\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-5\"\u003e\n \u003cp\u003e\n ES13 allows the definition of static blocks that will be executed\n only once, at the creation of the class. This is similar to static\n constructors in other languages with support for object-oriented\n programming, like C# and Java.\n \u003c/p\u003e\n\n \u003cp\u003e\n A class can have any number of static {} initialization blocks in\n its class body. They will be executed, along with any interleaved\n static field initializers, in the order they are declared. We can\n use the super property in a static block to access properties of\n the super class.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Vehicle {\n static defaultColor = 'blue';\n}\n\nclass Car extends Vehicle {\n static colors = [];\n static {\n this.colors.push(super.defaultColor, 'red');\n }\n static {\n this.colors.push('green');\n }\n}\n\nconsole.log(Car.colors); // [ 'blue', 'red', 'green' ]\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org8081ef4\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org8081ef4\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.6.\u003c/span\u003e Ergonomic Brand Checks\n for Private Fields\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-6\"\u003e\n \u003cp\u003e\n We can use this new feature to check if an object has a particular\n private field in it, using the in operator.\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n #color;\n hasColor() {\n return #color in this;\n }\n}\n\nconst car = new Car();\nconsole.log(car.hasColor()); // true;\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n The in operator can correctly distinguish private fields with the\n same names from different classes:\n \u003c/p\u003e\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n #color;\n hasColor() {\n return #color in this;\n }\n}\n\nclass House {\n #color;\n hasColor() {\n return #color in this;\n }\n}\n\nconst car = new Car();\nconst house = new House();\nconsole.log(car.hasColor()); // true;\nconsole.log(car.hasColor.call(house)); // false\nconsole.log(house.hasColor()); // true\nconsole.log(house.hasColor.call(car)); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org73a1d97\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org73a1d97\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.7.\u003c/span\u003e at() Method for Indexing\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-7\"\u003e\n \u003cp\u003e\n We typically use square brackets ([]) in JavaScript to access the\n Nth element of an array, which is usually a simple process. We\n just access the N - 1 property of the array.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = ['a', 'b', 'c', 'd'];\nconsole.log(arr[1]); // b\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n However, we have to use an index of arr.length - N if we want to\n access the Nth item from the end of the array with square\n brackets.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = ['a', 'b', 'c', 'd'];\n\n// 1st element from the end\nconsole.log(arr[arr.length - 1]); // d\n\n// 2nd element from the end\nconsole.log(arr[arr.length - 2]); // c\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n The new at() method lets us do this more concisely and\n expressively. To access the Nth element from the end of the array,\n we simply pass a negative value of -N to at().\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst arr = ['a', 'b', 'c', 'd'];\n\n// 1st element from the end\nconsole.log(arr.at(-1)); // d\n\n// 2nd element from the end\nconsole.log(arr.at(-2)); // c\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Apart from arrays, strings and TypedArray objects also now have\n at() methods.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst str = 'Coding Beauty';\n\nconsole.log(str.at(-1)); // y\nconsole.log(str.at(-2)); // t\n\nconst typedArray = new Uint8Array([16, 32, 48, 64]);\n\nconsole.log(typedArray.at(-1)); // 64\nconsole.log(typedArray.at(-2)); // 48\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-orgf31b09b\" class=\"outline-3\"\u003e\n \u003ch3 id=\"orgf31b09b\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.8.\u003c/span\u003e RegExp Match Indices\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-8\"\u003e\n \u003cp\u003e\n This new feature allows us to specify that we want the get both\n the starting and ending indices of the matches of a RegExp object\n in a given string. Previously, we could only get the starting\n index of a regex match in a string.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst str = 'sun and moon';\nconst regex = /and/;\nconst matchObj = regex.exec(str);\n\n// [ 'and', index: 4, input: 'sun and moon', groups: undefined ]\nconsole.log(matchObj);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\n['and '(\\, index:) 4 (\\, input:) 'sun and moon '(\\, groups:) undefined]\n\u003c/pre\n \u003e\n\n \u003cp\u003e\n We can now specify a d regex flag to get the two indices where the\n match starts and ends. With the d flag set, the object returned\n will have an indices property that contains the starting and\n ending indices.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst str = 'sun and moon';\nconst regex = /and/d;\nconst matchObj = regex.exec(str);\n/*\n[\n 'and',\n index: 4,\n input: 'sun and moon',\n groups: undefined,\n indices: [ [ 4, 7 ], groups: undefined ]\n]\n */\nconsole.log(matchObj);\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cpre class=\"example\"\u003e\n['and '(\\, index:) 4 (\\, input:) 'sun and moon '(\\, groups:) undefined (\\, indices:) [[4 (\\, 7)] (\\, groups:) undefined]]\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org5260a81\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org5260a81\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.9.\u003c/span\u003e Object.hasOwn() Method\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-9\"\u003e\n \u003cp\u003e\n In JavaScript, we can use the Object.prototype.hasOwnProperty()\n method to check if an object has a given property.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n color = 'green';\n age = 2;\n}\nconst car = new Car();\n\nconsole.log(car.hasOwnProperty('age')); // true\nconsole.log(car.hasOwnProperty('name')); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n But there are certain problems with this approach. For one, the\n Object.prototype.hasOwnProperty() method is not protected - it can\n be overridden by defining a custom hasOwnProperty() method for a\n class, which could have completely different behavior from\n \u003c/p\u003e\n\n \u003cp\u003eObject.prototype.hasOwnProperty().\u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nclass Car {\n color = 'green';\n age = 2;\n // This method does not tell us whether an object of\n // this class has a given property.\n hasOwnProperty() {\n return false;\n }\n}\n\nconst car = new Car();\n\nconsole.log(car.hasOwnProperty('age')); // false\nconsole.log(car.hasOwnProperty('name')); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Another issue is that for objects created with a null prototype\n (using Object.create(null)), trying to call this method on them\n will cause an error.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst obj = Object.create(null);\nobj.color = 'green';\nobj.age = 2;\n\n// TypeError: obj.hasOwnProperty is not a function\nconsole.log(obj.hasOwnProperty('color'));\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n One way to solve these issues is to use to call the call() method\n on the Object.prototype.hasOwnProperty Function property, like\n this:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst obj = Object.create(null);\nobj.color = 'green';\nobj.age = 2;\nobj.hasOwnProperty = () =\u0026gt; false;\n\nconsole.log(Object.prototype.hasOwnProperty.call(obj, 'color')); // true\nconsole.log(Object.prototype.hasOwnProperty.call(obj, 'name')); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n This isn’t very convenient. We can write a reusable function to\n avoid repeating ourselves:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nfunction objHasOwnProp(obj, propertyKey) {\n return Object.prototype.hasOwnProperty.call(obj, propertyKey);\n}\n\nconst obj = Object.create(null);\nobj.color = 'green';\nobj.age = 2;\nobj.hasOwnProperty = () =\u0026gt; false;\n\nconsole.log(objHasOwnProp(obj, 'color')); // true\nconsole.log(objHasOwnProp(obj, 'name')); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n No need for that though, as we can use the new built-in\n Object.hasOwn() method. Like our reusable function, it takes an\n object and property as arguments and returns true if the specified\n property is a direct property of the object. Otherwise, it returns\n false.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst obj = Object.create(null);\nobj.color = 'green';\nobj.age = 2;\nobj.hasOwnProperty = () =\u0026gt; false;\n\nconsole.log(Object.hasOwn(obj, 'color')); // true\nconsole.log(Object.hasOwn(obj, 'name')); // false\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org198c831\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org198c831\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.10.\u003c/span\u003e Error Cause\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-10\"\u003e\n \u003cp\u003e\n Error objects now have a cause property for specifying the\n original error that caused the error about to be thrown. This\n helps to add additional contextual information to the error and\n assist the diagnosis of unexpected behavior. We can specify the\n cause of an error by setting a cause property on an object passed\n as the second argument to the Error() constructor.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nfunction userAction() {\n try {\n apiCallThatCanThrow();\n } catch (err) {\n throw new Error('New error message', { cause: err });\n }\n}\ntry {\n userAction();\n} catch (err) {\n console.log(err);\n console.log(`Cause by: ${err.cause}`);\n}\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"outline-container-org8143fe9\" class=\"outline-3\"\u003e\n \u003ch3 id=\"org8143fe9\"\u003e\n \u003cspan class=\"section-number-3\"\u003e9.11.\u003c/span\u003e Array Find from Last\n \u003c/h3\u003e\n \u003cdiv class=\"outline-text-3\" id=\"text-9-11\"\u003e\n \u003cp\u003e\n In JavaScript, we can already use the Array find() method to find\n an element in an array that passes a specified test condition.\n Similarly, we can use findIndex() to find the index of such an\n element. While find() and findIndex() both start searching from\n the first element of the array, there are instances where it would\n be preferable to start the search from the last element instead.\n \u003c/p\u003e\n\n \u003cp\u003e\n There are scenarios where we know that finding from the last\n element might achieve better performance. For example, here we’re\n trying to get the item in the array with the value prop equal to\n y. With find() and findIndex():\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst letters = [\n { value: 'v' },\n { value: 'w' },\n { value: 'x' },\n { value: 'y' },\n { value: 'z' },\n];\n\nconst found = letters.find((item) =\u0026gt; item.value === 'y');\nconst foundIndex = letters.findIndex((item) =\u0026gt; item.value === 'y');\n\nconsole.log(found); // { value: 'y' }\nconsole.log(foundIndex); // 3\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n This works, but as the target object is closer to the tail of the\n array, we might be able to make this program run faster if we use\n the findLast() and findLastIndex() methods to search the array\n from the end.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst letters = [\n { value: 'v' },\n { value: 'w' },\n { value: 'x' },\n { value: 'y' },\n { value: 'z' },\n];\n\nconst found = letters.findLast((item) =\u0026gt; item.value === 'y');\nconst foundIndex = letters.findLastIndex((item) =\u0026gt; item.value === 'y');\n\nconsole.log(found); // { value: 'y' }\nconsole.log(foundIndex); // 3\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n Another use case might require that we specifically search the\n array from the end to get the correct item. For example, if we\n want to find the last even number in a list of numbers, find() and\n findIndex() would produce a wrong result:\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst nums = [7, 14, 3, 8, 10, 9];\n// gives 14, instead of 10\n\nconst lastEven = nums.find((value) =\u0026gt; value % 2 === 0);\n// gives 1, instead of 4\n\nconst lastEvenIndex = nums.findIndex((value) =\u0026gt; value % 2 === 0);\nconsole.log(lastEven); // 14\nconsole.log(lastEvenIndex); // 1\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n We could call the reverse() method on the array to reverse the\n order of the elements before calling find() and findIndex(). But\n this approach would cause unnecessary mutation of the array, as\n reverse() reverses the elements of an array in place. The only way\n to avoid this mutation would be to make a new copy of the entire\n array, which could cause performance problems for large arrays.\n \u003c/p\u003e\n\n \u003cp\u003e\n Also, findIndex() would still not work on the reversed array, as\n reversing the elements would also mean changing the indexes they\n had in the original array. To get the original index, we would\n need to perform an additional calculation, which means writing\n more code.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst nums = [7, 14, 3, 8, 10, 9];\n\n// Copying the entire array with the spread syntax before\n// calling reverse()\nconst reversed = [...nums].reverse();\n\n// correctly gives 10\n\nconst lastEven = reversed.find((value) =\u0026gt; value % 2 === 0);\n// gives 1, instead of 4\n\nconst reversedIndex = reversed.findIndex((value) =\u0026gt; value % 2 === 0);\n// Need to re-calculate to get original index\n\nconst lastEvenIndex = reversed.length - 1 - reversedIndex;\n\nconsole.log(lastEven); // 10\nconsole.log(reversedIndex); // 1\nconsole.log(lastEvenIndex); // 4\n\u003c/pre\n \u003e\n \u003c/div\u003e\n\n \u003cp\u003e\n It’s in cases like where the findLast() and findLastIndex()\n methods come in handy.\n \u003c/p\u003e\n\n \u003cdiv class=\"org-src-container\"\u003e\n \u003cpre class=\"src src-js\"\u003e\nconst nums = [7, 14, 3, 8, 10, 9];\n\nconst lastEven = nums.findLast((num) =\u0026gt; num % 2 === 0);\n\nconst lastEvenIndex = nums.findLastIndex((num) =\u0026gt; num % 2 === 0);\n\nconsole.log(lastEven); // 10\nconsole.log(lastEvenIndex); // 4\n\u003c/pre\n \u003e\n \u003c/div\u003e\n \u003c/div\u003e\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flionyxml%2Fjavascript-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flionyxml%2Fjavascript-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flionyxml%2Fjavascript-notes/lists"}