This content originally appeared on Level Up Coding - Medium and was authored by Seth Livingston
A simple solution to a common problem
How it happens
It’s easy to create object literals in JavaScript.
Maybe too easy. We can copy and paste one object literal to make a quick array of game platforms.
As long as our fingers are still on the Cmd/Ctrl-V keys, let’s keep going and create a platform support map for our games, “Dungeon Crawly” and “Bullet Nightmare”.
Easy peasy, lemon squeezy.
Need to add a property? JavaScript says, “Yes!”
That was fast and easy. JavaScript makes a lot of things fast and easy, and that’s part of what makes it such a popular programming language.
But now we have some problems. We have duplicated code. Duplicated code is bad*. The object literal for XBox appears in its entirety under both games (lines 10 and 18).
*There are exceptions. See When is it okay to duplicate code?
First, our code is now unnecessarily bloated with two XBox definitions. We only need one. Second, we now have two sources of truth for XBox, so we have to be sure to update them both when we make changes. This creates maintenance nightmares:
- We need to correct the spelling of Micrsoft in two places now.
- We added the website property to the first XBox definition, but we missed the second one.
This code snippet was easy to create, but the end result is bloated and difficult to maintain.
How to fix it
We can fix the code duplication and bloat with a catalog of supported platforms. It is the single source of truth for platforms.
I call these simply, “object catalogs”.
There are many ways to implement object catalogs. Here we’re using the platform "tags" as the lookup keys in the catalog. Your object catalogs might use a variation on this approach — that’s fine.
We succinctly reference the catalog in our platform support map.
If we need to make updates to platforms, we only have to do it one place: the catalog. Let’s fix that misspelling and those missing website properties.
We no longer have any code duplication, and our platform support map is still fully functional. Suppose we want to find out if “Bullet Nightmare” is available on desktop platforms.
Our platform catalog might grow as our app grows, but it remains a robust, single source of truth.
Look for opportunities to create object catalogs when you see collections of object literals. Duplicate object literals are a sure sign you need an object catalog.
How to eliminate code bloat in JavaScript with object catalogs was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Seth Livingston
Seth Livingston | Sciencx (2022-04-03T15:18:26+00:00) How to eliminate code bloat in JavaScript with object catalogs. Retrieved from https://www.scien.cx/2022/04/03/how-to-eliminate-code-bloat-in-javascript-with-object-catalogs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.