Clean Code in JavaScript with ReactJS

4 min readApr 4, 2021

--

Source: https://en.wikipedia.org/wiki/React_(JavaScript_library)

This article is written as a part of Individual Review of Fasilkom UI’s Software Engineering Project Course 2021.

Clean Your Code?

Imagine you’ve written code in your current project. Let’s challenge ourselves to read the code several months or years later, can you remember what this function/class/variable does? Next, show your code to your friend, can he/she read and understand it properly? If yes, congratulations, then you’ve built a well-written code.

As a Software Engineer, it’s important to write understandable, readable, maintainable, and scalable code. If you are working on a certain project, make sure that when you leave the project, your successors (read: next developers) can continue to build that project without huge effort to understand and maintain your code. Imagine yourself as a successor, you don’t want so right?

Clean Code

Overview

Clean Code is one of the important aspects of Software Development Process. Developers are encouraged to use Clean Code when writing codes, because we work as a team, not as individuals. You’ve to make sure your code is well-written and maintainable, because Software Development is a long process to maintain software.

Clean Code is needed to ensures our code is neat and well-written. Each snippet/function/class has a meaning and doing specific task. When we work in a team, Clean Code also ensures fast development because other programmers / developers can easily continue our work and so on.

General Rules

Follow the programming language conventions, for example we can use Airbnb convention for ReactJS.
KISS (Keep It Simple Stupid), write minimal codes and keep it simple. Simpler is always better. Reduce complexity as much as possible.
Boy Scout Rule, leave your camp cleaner than you found it. Make sure our code is clean and maintainable for other developers.
Don’t enforce all of the best practices in your code if you can’t. You can’t always apply best practices in your code, because you write a code to solve specific task. Just make sure your code is running correctly.
Consistency in namings and architecture. Make sure your code is understandable by using meaningful names, maintainable and scalable with good architecture.

Implementation in Software Engineering Project Course 2021 Fasilkom UI

Our team — Magic People — uses Clean Code to ensure that our code is maintainable in the future. Here are some of the best practices we’ve implemented in our code:

Use Meaningful Names

Make sure our variables, functions, and classes use meaningful and descriptive names. When we see the name of the variable/function/class, we can understand what it stores or does without any further reading.

With Meaningful Names, we can understand what it does without reading the contents.

Consistency

Make sure our code is consistent. When we do something a certain way, do all similar things in the same way. Hence, we make the code is cleaner.

We can compare this function with the previous function in Meaningful Names section. The way to define API calls from React is consistent.

Function: Small, Fewer Arguments, No Side Effects

Write function with meaningful and descriptive name. We prefer to use fewer arguments, because we don’t have to remember or check the definition of the function every time. Make sure our small function doesn’t have side effects, which means for the same input, your function always give same output.

We can make sure our function is small, doing specific things (to download image), with fewer arguments, and doesn’t have side effects (which mean, once you’ve download a specific image, you’ll always get the same image).

Express yourself in code

Always try to explain yourself in code. We don’t need to add unnecessary comments. Use comments as clarification of code, explanation of intent, or warning of consequences.

This code above explains what **request** do. First, it will attach the Authorization Header. Then combine it with the method, mode, and body. After that, we make an API call with those specifications.

Mask Value with Constant Variable

Try to mask constant values in certain global variable, then use it in another components. With this approach, any changes made to the constant value will reduce debugging time.

Try to **mask constant values** with Global Variables and we can use them in any files.

Exception Handling

Make sure to handle all scenarios, it can be successful scenarios and fail scenarios. We want to give our user the best experience and various response from our software.

Base RemoteError that will be handled by other function in separate files.

Tests

Create independent tests that describe what does your function do. With this, other developers can understand without any further documentations.

Implementation of http get method.

My Thoughts

Although Clean Code is only the best practice and convention, I personally think that Clean Code will reduce your debugging time. I think that one of Robert Martin’s general rules, Boy Scout Rule, is the most important part that a Software Engineer must have, because we build software with other developers, not only by ourselves. It is important to have general convention among developers to help maintain code year by year.

Thank you for reading and happy coding!