3 Ways to Write Cleaner Code

Best Practice Tips to Incorporate in Your Code

Text Wall of Code

Every programming language has its syntax nuances that help ensure code is communicated clearly and consistently. If our code is self-explanatory and predictable when read by other programmers, the focus can be on the design and functionality rather than “What is going on in this function?

The way we write our code could reflect negatively on us, indicating we don’t have the skills or experience needed to write readable code. While learning the syntax for any language can be daunting, there are 3 best practices you can start using now as you familiarize yourself with the intricacies!

We’ll cover three core concepts: DRY code, descriptive naming conventions, and organized code.

Don’t Repeat Yourself (DRY)

Repeated Code

Don’t Repeat Yourself or DRY is a programming principle first introduced in The Pragmatic Programmer, though the practice itself was applied prior to publication.

This sounds easy enough, right? Well, it does get a little more complex once you’re 200 lines in and you just start to notice you’re applying the same logic in 3 different places. The purpose of creating DRY code is to reduce repetition in your code, replacing it with more abstract logic to avoid redundancy. When DRY code is written successfully, any modification of any single element doesn’t require a change in other unrelated functionality.

The DRY principle is just another side of immutability, which is a tenant of functional programming describing values that cannot be reassigned or modified once set. These principles are useful to us because it allows for more maintainable, readable, and reusable.

Meaningful Naming Conventions

Meaningful Naming Conventions in JavaScript

Whether you’re building a simple application or working for a FANG company, you should strive to have your code read like a New York Times Bestseller. Not just for you, but anyone else who may end up reading your code a year from now. The way we write code often changes with experience and practice. However, there are certain aspects we can all implement now: consistency, descriptiveness, and distinction.

Let’s take a look at 3 ways to name a function that renders images to a page:

showPokemonImage()renderPokemonImage()addPokemonImage()

While it doesn’t necessarily matter which one we choose, we should select one verb and use that across our application!

Organized and Formatted Code

[main functions toward the top, helper functions toward bottom]

[variable declaration placement]

[Indentation]

[Prettier Plug-in]

Clean Code — Robert Martin Quote

[CONCLUSION]

Full stack web developer. Frontend and design enthusiast. Avid rock climber and amateur photographer.