Writing clean code is a responsibility for every programmer, especially when working in a team. Imagine revisiting your old code and needing 5 minutes or more to understand the code flow you previously created. This situation can make the work inefficient, especially if it's not just one file that needs to be reviewed. It becomes even more challenging if your teammate, who doesn't have experience writing the code, needs to read it.

Clean code is reusable and easy to understand. Having clean code makes tasks and work more efficient and manageable.

Writing clean code is what you must do in order to call yourself a professional. There is no reasonable excuse for doing anything less than your best. — Robert C. Martin

Basic Criteria of Clean Code

“So if you want to go fast, if you want to get done quickly, if you want your code to be easy to write, make it easy to read.” ― Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship

To achieve cleaner code, here are some things to consider:

• Small classes
• Use descriptive variable names
• Code should have consistent abstractions
• Avoid duplication
• Functions should have fewer than 3 arguments
• Do one thing and do it well

Naming Convention in Javascript

Javascript has its own basic rules for naming conventions. These conventions apply to every component in Javascript, including variables, classes, and functions.

For variables and functions, Javascript commonly uses camelCase as the identifier, and all names start with a letter or alphabet.

# Example
const submitFormHandler = () => {
   return "submitted"
}
# Bad example (not so descriptive)
const kjnqwdinq = () => {
    return "submitted"
}

Use Typing (Only in Typescript)

Javascript has become an accessible programming language because it allows you to determine its data type when creating variables or functions. Dynamic typing becomes a problem when the variables have changing and non-static behaviors. This complexity makes the code harder to understand. This reason led to the birth of Typescript, where we can specify the data type of variable in Javascript

# Javascript
let evenNumber = [2,4,6,8]
let evenNumber = "a string" # Passed
# Typescript
let evenNumber: Array<number> = [2,4,6,8]
let evenNumber = "a string" # will be detected as type violation

Small Classes

Javascript indeed focuses on the use of functions, but it can also be used to implement Object Oriented Programming (OOP) concepts. When creating classes in Javascript, it is advisable to create classes with a single purpose and avoid making them overly complex. For example,

class componentButton {
  // state or field
  constructor(){
    this.width = "65px"
    this.height = "30px"
  }
  // behavior or method
  function render(textParam="default text") {
    return "<button height={this.height} width={this.width}>{textParam}</button>"
  }
}

DRY (Don’t Repeat Your Self)

In our PPL group Paytungan, we mainly use Javascript in our frontend application repository, which is React. When working with React, we often encounter repetitive HTML code. For example :

# REPEATED 5 TIMES (BAD)
const PageHome = () => {
  return (
    <div><span>card 1</span></div>
    <div><span>card 2</span></div>
    <div><span>card 3</span></div>
    <div><span>card 4</span></div>
    <div><span>card 5</span></div>
  )
}

# Create new component
const CardComponent = (props) => {
  return(
    <div>
      <span>{props.text}</span>
    </div>
  )
}

const PageHome = () => {
  return (
    <CardComponent text={card 1} />
    <CardComponent text={card 2} />
    <CardComponent text={card 3} />
    <CardComponent text={card 4} />
    <CardComponent text={card 5} />
  )
}

Conclution

Creating clean code can enhance efficiency when working in a team. Code that is easy to understand fosters better collaboration within the team, allowing products to be delivered quickly and effectively.