Bad Abstractions Could Be Ruining Your Code

Let’s imagine we’re working in a very large codebase. Can you spot an issue in the following code?

const icons = {
  delete: getIconPath("delete"),
  edit: getIconPath("edit"),
  save: getIconPath("save"),
};

The code is easy to read and it runs fine — and no, the problem isn’t that it’s written in JavaScript!

The issue is that in a large codebase words like delete, edit and save are likely to appear often. Finding one of these icons could be slower than necessary, as we have to sort through needless noise; we’re making it harder for maintainers to find what they need quickly.

There’s an easier way, and that’s to get rid of our getIconPath helper, removing the abstraction layer and leaving us with this:

const icons = [
  "delete": "public/static/icons/delete.svg",
  "edit": "public/static/icons/edit.svg",
  "save": "public/static/icons/save.svg",
]

Now, we have more useful, searchable information right where you need it. If you’re looking at a particular asset, you can easily find out exactly where it’s being used. Conversely, if you’re already working in this part of the codebase and want to…