- FrontendJoy
- Posts
- 5 Dead-Simple Tips to Make Your Code More Readable as a Junior Frontend Developer (And Get Your Pull Requests Approved Faster) 🎉
5 Dead-Simple Tips to Make Your Code More Readable as a Junior Frontend Developer (And Get Your Pull Requests Approved Faster) 🎉

I have reviewed more than 1,000 frontend pull requests.
I've noticed some common comments made to junior developers, which I also got when starting out. Dealing with these comments often makes the review process longer.
So, if you're a junior developer just starting:
Here are 5 simple tips to make your code more readable.
1. Save meaningful or shared values as constants. If a value is significant in your code or used in multiple places, store it in a constant variable in ALL UPPERCASE. This helps give the variable context and makes it easier to locate or modify.

2. Include the unit in variable names when relevant. You saved your meaningful variables in constants. Great 🎉. Now, make sure to specify the unit if applicable. For example, instead of naming a variable DEBOUNCE_TIME
, use DEBOUNCE_TIME_MS
to make it more straightforward.

3. Use the JavaScript numeric separator when possible. Improve the readability of numbers like 1000
or 20000
by writing them as 1_000
or 20_000
.

4. Return as early as possible in functions. Whenever feasible, exit a function early to enhance the code clarity. This will drastically increase the code readability.

5. Avoid negative conditionals. Instead of naming a variable isWebsiteNotAccessible, name it isWebsiteAccessible and use !isWebsiteAccessible. Positive conditions are generally easier to understand.

Thank you for reading this post 🙏.
Leave a comment 📩 to share a tip.
If you like articles like this, you’ll love my daily tips on X/Twitter.
Reply