May 18, 2024

Prefer Noun-Adjective Naming

edit

This one will be super short.

In English grammar, the adjective comes before the noun. The green house. The large dog. The old man. Etc, etc.

Because of this, we tend to also name our functions, components, objects, etc, the same way. PrimaryButton, DefaultHeader, StandardLayout, etc.

I prefer to use noun-adjective naming for one simple reason: alphabetical order.

Let’s say I’m creating several components related to the same noun. I’ve been working on a streaming app for a client recently, so I’ll use a Stream as my noun. A Stream can be in three states: created, ended, or live.

If I follow English grammar and make components for each state, I end up with CreatedStream, EndedStream, and LiveStream.

Now, imagine that these are right next to all your other components in the same directory. They could be separated by dozens of components inbetween C and E, or E and L.

- CreatedStream.tsx
- CurrentUser.tsx
- EndedStream.tsx
- FullScreen.tsx
- GoLiveButton.tsx
- LiveStream.tsx
// etc...

Also, try searching for them. What if you forget that it’s Ended and not Completed for that stage. You have to get the right adjective to get your search on the right path.

But if you flip them and go noun-adjective, StreamCreated, StreamEnded, and StreamLive, all your components are right next to each other in your directory.

- ButtonGoLive.tsx
- ScreenFull.tsx
- StreamCreated.tsx
- StreamEnded.tsx
- StreamLive.tsx
- UserCurrent.tsx
// etc...

In addition, it’s much easier to search this way. Just type the noun Stream and choose which one you need.

It’s a small change, but I think it makes for far better organization in your codebase. Try it, see if you like it, too.


Liked the post?
Give the author a dopamine boost with a few "beard strokes". Click the beard up to 50 times to show your appreciation.
Kyle Shevlin's face, which is mostly a beard with eyes

Kyle Shevlin is the founder & lead software engineer of Agathist, a software development firm with a mission to build good software with good people.

Logo for Just Enough Functional Programming
Just Enough Functional Programming
Check out my courses!
If you enjoy my posts, you might enjoy my courses, too. Click the button to view the course or go to Courses for more information.
Sign up for my newsletter
Let's chat some more about TypeScript, React, and frontend web development. Unsubscribe at any time.