DEV Community

loading...

7 Tricks I Use To Rewrite JavaScript Code From My Early Days

Nevin Katz
I am a web and app developer who writes about programming, tech tools, and my experiences building things. By day, I work at Education Development Center.
・1 min read

For the past four years, I have been working on a Cordova app that runs on JavaScript. The codebase has grown to the point where working on it often feels like wandering through streets and alleys of a large city. And looking at some of the earlier modules feels like sauntering into old buildings I originally constructed years ago.

While my JS coding has evolved over this time, I often run into code in the app that feels inefficient and outdated - and it bothers me to the point where I usually feel compelled to eventually refactor it so that it is more compact, readable, and understandable.

Here are 7 time-tested tricks I use to rewrite my JavaScript code from those early days, published this month in Better Programming. I hope you find them useful. Enjoy!

Discussion (8)

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

The codebase has grown to the point where working on it often feels like wandering through streets and alleys of a large city. And looking at some of the earlier modules feels like sauntering into old buildings I originally constructed years ago.

Love that quote. So darn relatable...

Collapse
nevkatz profile image
Nevin Katz Author

So glad!

Collapse
lexlohr profile image
Alex Lohr

#4: you may want to consider using the nullish coalescing operator ?? (use || consciously if you want to catch all falsy types).

#6: for...of is not neccessarily more readable than forEach, especially if you use arrow functions.

#7: you can use Object.assign on DOM elements, e.g.

const myDiv = Object.assign(document.createElement('div'), { id: 'test', className: 'other test' })
Enter fullscreen mode Exit fullscreen mode
Collapse
momander profile image
Martin Omander

About "for...of": I find myself using it often with async/await. Foreach() does not work well with asynchronous code. I think this was the author's point.
For more background see this: stackoverflow.com/questions/375766...

Collapse
lexlohr profile image
Alex Lohr

It depends. If you want to wait on a list of promises returned by an array of functions, better use await Promise.all(fns.map(fn => fn()), as it will allow you to run them parallel.

Collapse
nevkatz profile image
Nevin Katz Author • Edited

Great points, Alex. There is no one right way to make code more readable and your tips are very much appreciated. I never like to be dogmatic about recommendations - these are just things that have worked for me.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

You can use Object.assign with DOM objects, too.

Collapse
nevkatz profile image
Nevin Katz Author • Edited

Great point about Object.assign(), Pacharapol! I look forward to trying that soon. Again, no one right way to go about it and I very much appreciate your input. What a terrific community of developers we have in this thread.