{"id":17218653,"url":"https://github.com/jwulf/five-things-from-stackoverflow-brisjs","last_synced_at":"2025-03-25T14:40:34.379Z","repository":{"id":138431760,"uuid":"262969227","full_name":"jwulf/five-things-from-stackoverflow-brisjs","owner":"jwulf","description":"A repo to go with the BrisJS talk \"Five Lessons from refactoring StackOverflow code\"","archived":false,"fork":false,"pushed_at":"2020-05-12T04:46:29.000Z","size":41,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T13:23:21.404Z","etag":null,"topics":["javascript","stackoverflow"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jwulf.png","metadata":{"files":{"readme":"README.md","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":"2020-05-11T07:23:23.000Z","updated_at":"2020-05-12T04:46:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"2bb593f5-3ed1-45bf-a4e6-5c2357b27d34","html_url":"https://github.com/jwulf/five-things-from-stackoverflow-brisjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwulf%2Ffive-things-from-stackoverflow-brisjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwulf%2Ffive-things-from-stackoverflow-brisjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwulf%2Ffive-things-from-stackoverflow-brisjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwulf%2Ffive-things-from-stackoverflow-brisjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwulf","download_url":"https://codeload.github.com/jwulf/five-things-from-stackoverflow-brisjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245483582,"owners_count":20622901,"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","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":["javascript","stackoverflow"],"created_at":"2024-10-15T03:47:40.682Z","updated_at":"2025-03-25T14:40:34.307Z","avatar_url":"https://github.com/jwulf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Five Lessons from refactoring StackOverflow code that will make your JS coding journey 253% easier\n\nA repo to go with the BrisJS talk \"_Five Lessons from refactoring StackOverflow code_\" ([video link](https://youtu.be/rLzljZmdBNM?t=3075)).\n\n## Background\n\nIn early 2020, I noticed that my worldwide ranking on StackOverflow had dropped, and I was only in the top 25% in the world. \n\nUnacceptable.\n\nI went on a burn, and I'm now back in the top 0.60% - where I belong. ;-)\n\n![](img/stackoverflow.png)\n\nWhen you expose yourself to a vast amount of data in a short period of time, patterns start to emerge. \n\nI noticed that 80% of questions in the JavaScript tag on StackOverflow had the same fundamental problems.\n\nThey required much deeper refactors than the answer \"_How do I get this code to work_\", so they were really out of scope for an answer. \n\nTo capture them somewhere, I started a category on my blog called \"[StackOverflowed](https://www.joshwulf.com/categories/stackoverflowed/)\" where I described the deeper issues, and refactored them.\n\nIn the BrisJS talk, I cover the top five things that, I believe, will most improve your JS programming; and did a live refactor of a question from StackOverflow.\n\n## The Five Things (and one bonus)\n\n### 0. Let vs Var vs Const\n\nUse `const` for _everything_. Anything that is left is part of a state machine, and should be encapsulated.\n\nUnderstand that arrays and objects, and should be declared as `const`, even if you push to them. And if you push to an array, it's a state machine.\n\nSee the article [Shun the Mutant](https://www.joshwulf.com/blog/2020/02/shun-the-mutant/) on my blog.\n\n### 1. Global Mutable State\n\nAny genuine variables represent actual mutable state - which is rare in a program. Things like time, the state of the network connection, a current score, are variables. And they belong in state machines with immutable-value returning interfaces. See [01-global-mutable-state.js](01-global-mutable-state.js), and the article [Avoid Global State]( https://www.joshwulf.com/blog/2020/02/avoid-global-state/) on my blog.\n\n### 2. Loops\n\nLoops are state machines. When you solve a problem using a loop, now you have two problems. \n\nMostly, people thing \"I have to do something to every element in this array\", and construct a loop.\n\nHowever, what you need to do is \"do something to each element in this array\" - which means a function and Array.map. \n\nSee the article [Why Array.map](https://www.joshwulf.com/blog/2020/03/why-array-map/) on my blog.\n\n### 3. Data transformation\n\nNiklaus Wirth wrote the classic book \"[Algorithms + Data Structures = Programs](https://en.wikipedia.org/wiki/Algorithms_%2B_Data_Structures_%3D_Programs)\" in 1976.\n\nA lot of programming is transforming data structures. If you are doing a lot of complex transformations, revisit the data structures.\n\nIf you don't control input data structures (for example, you consume them for a web service you don't control), then you will have to transform them.\n\nIf you find yourself writing a loop and using Array.push, you should be doing Array.map.\n\nCorrectly and accurately naming your data structures, intermediate data structures, and transformer functions will make the Dao clear.\n\nSee the article [Providing a Semantic API](https://www.joshwulf.com/blog/2020/02/providing-a-semantic-api/\n) on my blog.\n\n### 4. Promises\n\nA lot of JS programming is async. A common problem is \"retrieve some data from a service, make some determinations based on that data, then retrieve some other data, return that data to the caller\".\n\nIn this case, you want Promise.all, Array.map, and Array.filter.\n\nSee the article [Handling Failure and Success in an Array of Asynchronous Tasks](https://www.joshwulf.com/blog/2020/03/array-async-failure/) on my blog.\n\n### Bonus: Naming\n\n80% of programming is naming things. When things are correctly named, the Dao becomes clear.\n\n## Live Refactoring a StackOverflow Question\n\nIn the BrisJS talk, I refactored a StackOverflow question live. It was the third question on the page in the JavaScript tag when I went on there, and demonstrates many of the factors that I cover.\n\nThe question that I refactored is [here](https://stackoverflow.com/questions/61724541/array-of-promises-in-a-promise-array/61727830#61727830).\n\nYou can see it in [demo.js](demo.js), along with stub code to mock the services returning the remote data structures.\n\nTo run it: `node demo.js`.\n\nA refactor with no loops and no variables is in [refactor.js](refactor.js).\n\nTo run it: `node refactor.js`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwulf%2Ffive-things-from-stackoverflow-brisjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwulf%2Ffive-things-from-stackoverflow-brisjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwulf%2Ffive-things-from-stackoverflow-brisjs/lists"}