Get Started with Clean Coding Practices

  • Your code is giving a lot of compile errors.
  • Your IDE (integrated development environment — simply the tool you use to code) shows so many red markings, alerts and you can’t run your code.
  • You can’t remember the execution flow of your code.
  • Your project proposal contains some set of diagrams that are opposite to your current implementation (and you have no idea how to modify your diagrams reflecting the current code you have).
  • You can’t write unit tests for your code (Your methods/functions are not testable).
  • When you are looking at your code, You don’t ‘feel good’ to read your code.

What you are going to learn…

  1. How to Name Files in JavaScript
  2. How to Name Boolean Type Variables
  3. How to Name Private Variables or Functions/Methods
  4. How to Name Constants
  5. How to Name Functions
  6. How to Name Classes
  7. How to Name Components
  8. Some General Tips

As a beginner, How can you improve your Clean Coding skills?

  • Why It exists
  • What It does
  • How It is used

Let’s look into Clean Coding Practices related to JavaScript.

Did you know that in JavaScript, variable names are Case Sensitive?

In JavaScript, if you define the same variable name using different caps, those variables will be treated differently. so remember, CAPS count!

1. How to Name Files in JavaScript

In this example, front-end JS file names are written in PascalCase, back-end JS file names are written in kebab-case
  • Important Note: This is a generic pattern you can follow in JavaScript based frameworks. But file naming standards are different in other Non-JS based Frameworks. I advise you to refer to official style guides specific to your framework or use Google Style Guide to explore more. I have linked them at the end of this article.

2. How to Name Boolean Type Variables

3. How to Name Private Variables or Functions/Methods

4. How to Name Constants

PascalCase and camelCase are commonly used in naming functions and classes

5. How to Name Functions/Methods

6. How to Name Classes

7. How to Name Components

8. Some General Tips

  • Make sure to give pronounceable names for your identifiers.
  • Avoid giving numbers in the middle of your code unexpectedly. Try to use variables appropriately.
  • When you are using axios or any other web service call and declaring your API path, don’t hardcode path in every place where you call your backend APIs. Make sure to define your backend path as a base URL and import it whenever you need to call your API.
Read axios Best Practices: https://github.com/axios/axios#config-defaults
  • Make your words/naming styles consistent across your application. For example, if you use getStudent(), getScores() kind of pattern for your methods/functions, don’t define some other similar functions like fetchTime(), fetchName() etc. Make them consistent as previous methods by naming getTime(), getName() etc.
  • Make sure your functions/methods do just one thing. For example, calculateExamGrade() should do only calculating the Grade. But if it is calculating Grade AND saving the Grade in a database or sending an API request or even if it is performing a validation within the same calculateExamGrade method, it is ‘not nice’.
  • Try to maintain minimum number of arguments/parameters you pass to a function/method.
  • Know your programming language’s style conventions. Best resource is to read official style guides available. I’ll list some below for your reference.

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store