Readability vs. Conciseness! 🐣
Sometimes, fewer lines of code introduced by modern ES6 approaches may not necessarily be easier to understand. Or...are they?
Hi everybody - in my latest article, I discuss the fun world of Two-Dimensional (2D) Arrays in JavaScript. 2D arrays are used frequently to help us store multi-dimensional data like those found in spreadsheets, game boards (chess, checkers, etc.), pixel grids, and more:
In the article, I describe two ways of creating a 2D array. One way is by using a traditional nested loop-based approach:
The other way is one where we use a more modern ES6-based approach:
Both of these code snippets will return a similar-looking 2D array when passed in the same argument values for rows, cols, and fillValue. What makes them different is in how easy it is for humans like us to make sense of what is going on.
Focusing on Readability
The ES6-based approach above is certainly very compact. Everything neatly fits into a single line where functional methods like Map and conveniences like arrow functions turn what would be many lines of code into something bite-sized.
I would argue that this compactness comes with a cost. The cost is readability. I’m no stranger to code, but if I were to see this line, it would take me many hot minutes to figure out what is going on:
When I compare this to the more traditional loop-based approach, things are clearer. I can quickly determine what we are doing. Yes, the traditional approach takes up about 15 lines, but they are quick lines for me to parse mentally! ⚡️
The takeaway here isn’t for you to never use ES6 approaches or look for ways to reduce lines of code. The question for you to answer is this: How important is code readability? There is no right or wrong answer here. My general take is:
If you are going to be the primary developer who will be looking at the code, then optimize for your own convenience.
If you are part of a team of developers, optimize for what you all collectively agree is the proper approach. Important: Document this agreement as part of a coding style guide such as this one from Google.
As for me, when I am coding for myself, I typically prefer the ES6 approach if it aids in readability. A great example of this is arrow functions. Arrow functions do a much better job of dealing with context where I don’t have to deal with this and that, literally:
When I am tutorializing, I try my best to provide both traditional and ES6-based approaches with additional commentary on the pros/cons of each approach. After that, it’s up to you as the reader to decide which one you would prefer.
Which approach do you prefer?
Before I wrap this up, I created a poll asking which of the two approaches for creating a 2D array you prefer:
Do hop onto my Twitter / X and vote. I’m curious to hear where you all stand on this topic.
If you have any questions or comments, feel free to reply to the above tweet, reply to this newsletter post, or post on the forums.
Cheers,
Kirupa 🤓