Writing clean code is essential for every developer as it makes the code easy to read, understand and maintain. A clean code makes the life of everyone in the team easier, your code less prone to errors, and adding new features easier. In this tutorial, I'll cover 7 tips so you can write much more readable code right away.

Before we move on, remember you can build your websites on DoTenX for free. With DoTenX you can visually build the front-end or back-end of your applications easily. Use DoTenX to speed up building websites with complex databases, and integrations with other services. You can also use it to learn programming concepts 10X faster so make sure to check it out. DoTenX is also open-source and you can find the repository here: github.com/dotenx/dotenx.

Now let's start.

Use Proper Indentation

Using proper indentation not only makes it easier to read the code it also helps clarify the structure of the code. Use consistent indentation throughout your code to improve readability and make it easier to understand.

Bad style

function getTotal(items) {
  let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
  return total;
}

Good style

function getTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

Use Descriptive and Meaningful Variable Names

Do yourself a favour and spend a few seconds more when you decide to add new variables especially if they're anything more than a loop counter or something like that.

Using descriptive and meaningful variable names can greatly improve the readability of your code. Also, avoid using unnecessary abbreviations as you'll definitely write code in an IDE which provides intellisence so you won't need to type in the entier variable name every time.

Bad style

let a = 'John';
let b = 'Doe';
let c = a + b;
console.log(c);

Good style

let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + lastName;
console.log(fullName);

Use Comments

Use comments and use them a lot. Comments are the only way you can talk to your future self in your code so be kind to yourself and explain everything worth commenting. Sometimes, it's just a constant that needs clarification, sometimes it's an entire function.

Just make sure you don't comment as you're teaching programming. Every developer should know the syntax, and the role of comments is to clarify the logic of the code.

Bad style

function movingAverage(arr, windowSize) {
  let movingAverages = [];
  for (let i = 0; i < arr.length; i++) {
    let start = i - Math.floor(windowSize / 2);
    let end = i + Math.ceil(windowSize / 2);
    if (start < 0) {
      start = 0;
    }
    if (end > arr.length) {
      end = arr.length;
    }
    let sum = 0;
    for (let j = start; j < end; j++) {
      sum += arr[j];
    }
    let avg = sum / windowSize;
    movingAverages.push(avg);
  }
  return movingAverages;
}

Good style

function movingAverage(arr, windowSize) {
  // Initialize an array to hold the moving averages
  let movingAverages = [];

  // Loop through the array of numbers
  for (let i = 0; i < arr.length; i++) {
    // Calculate the start and end indices for the current window
    let start = i - Math.floor(windowSize / 2);
    let end = i + Math.ceil(windowSize / 2);
    // Make sure the start index is not negative
    if (start < 0) {
      start = 0;
    }
    // Make sure the end index is not past the end of the array
    if (end > arr.length) {
      end = arr.length;
    }
    // Calculate the sum of the current window of numbers
    let sum = 0;
    for (let j = start; j < end; j++) {
      sum += arr[j];
    }
    // Calculate the average of the current window of numbers
    let avg = sum / windowSize;
    // Add the average to the array of moving averages
    movingAverages.push(avg);
  }
  // Return the array of moving averages
  return movingAverages;
}

Avoid deep nesting

It's really difficult to read and understand deeply nested code, so try to avoid it by breaking your code into smaller, more manageable chunks, or use a better way to implement the same logic.

Bad style

function getTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].category === 'clothing') {
      if (items[i].color === 'red') {
        total += items[i].price;
      }
    }
  }
  return total;
}

Good style

function getTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    if (items[i].category === 'clothing' && items[i].color === 'red') {
      total += items[i].price;
    }
  }
  return total;
}

Limit function parameters

Limit the number of parameters you pass to your functions. This tip is not about not passing the parameters the function needs to them, but it's more about how you define and organise them.

Bad style

function calculateTotal(items, taxRate, discountAmount, shippingCost, freeShippingThreshold) {
  // Do something with the parameters
}

Good style

function calculateTotal(items, {taxRate, discountAmount, shippingCost, freeShippingThreshold}) {
  // Do something with the parameters
}

Use smaller functions

This post is more about writing clean code and I want to avoid mixing it with concepts like SOLID principle, so look at this tip from the readability perspective.

Do not chuck everything in a single function and try to break it into smaller pieces that are easier to understand and debug.

Bad style

function processData(data) {
  let results = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].type === 'A') {
      results.push(processTypeA(data[i]));
    } else if (data[i].type === 'B') {
      results.push(processTypeB(data[i]));
    } else if (data[i].type === 'C') {
      results.push(processTypeC(data[i]));
    }
  }
  return results;
}

function processTypeA(item) {
  // Do something with item of type A
}

function processTypeB(item) {
  // Do something with item of type B
}

function processTypeC(item) {
  // Do something with item of type C
}

Good style

function processData(data) {
  let results = [];
  for (let i = 0; i < data.length; i++) {
    results.push(processItem(data[i]));
  }
  return results;
}

function processItem(item) {
  if (item.type === 'A') {
    // Do something with item of type A
  } else if (item.type === 'B') {
    // Do something with item of type B
  } else if (item.type === 'C') {
    // Do something with item of type C
  }
}

Use shorter lines and empty lines

Break your code into shorter lines and use empty lines to separate logical blocks, you can make your code easier to read and understand. Especially sometimes you might be tempted to use some cool tricks you find on StackOverflow or a blog to do something in a single line but usually, they just make your code less readable.

Bad style

function add(a, b) { return a + b; }
let [taxRate, discountAmount, shippingCost, freeShippingThreshold] = [99, 0, 0, 0;

Good style

function add(a, b) {
  return a + b;
}

let taxRate = 99;
let discountAmount = 0;
let shippingCost = 0;
let freeShippingThreshold = 0;

Blog

Supercharge Your Skills: 7 Tips for Writing Clean and Efficient JavaScript

Sam

Use Proper Indentation

Use Descriptive and Meaningful Variable Names

Use Comments

Avoid deep nesting

Limit function parameters

Use smaller functions

Use shorter lines and empty lines

Join Our Newsletter. No Spam, Only the good stuff.

Related