Make your Javascript code more readable

💡 Introduction

Have you ever looked at your code and have a hard time understanding what it is that you wrote? You may wrote some comments explaining to your future you what that code means but still, it's hard to read.

In this article, I'm gonna share with you some tips that can help you improve your writing when you're creating an app with JavaScript.

⚙️ Prerequisites

If you knew the basics of JavaScript, would it be really helpful.

✍️ Getting Started

👉 Use let and const: they make sure block-scoped and constants can't be reassigned. Avoid using var they create unintended behavior hard do debug and found.

The example below I declare a var called fruit inside a condition, And I was able to access outside the condition, which was not intended and shouldn't work.

if (true) {
  var fruit = '🍎';
}
 
console.log(fruit)

Now if I try the same code, but instead of var I use let or const, I would get an error or warning.

if (true) {
  const fruit = '🍎';
  let food = ['🍎', '🥕']
}
 
console.log(fruit);
console.log(food);

👉 Use object destructuring: allows you to extract data from objects into distincs variables, helping avoiding using do notation on your code.

const person = {
  name: 'Danilo',
  job: 'Full Stack Developer'
}
 
const { name, job } = person;
 
const username = persona.name;

👉 Use default parameters: to set a default values for function parameters, if none are provided. This make the functions more flexible to use.

function welcome(name = 'Guest') {
  console.log('Hello' + name);
}
 
welcome(); // Hello Guest
welcome('Danilo') // Hello Danilo

👉 Use template literals: makes string concatenation more cleaner by using backticks and ${expressions} instead of plus signs.

const firstname = 'Danilo';
const lastname = 'Mello';
 
const welcome = `Welcome ${firstname} ${lastname}!`;

👉 Use array destructuring: work similarly to object destructuring, allowing you to extract array elements into variables.

  const fruits = ['🍎', '🍊', '🍍', '🍋‍🟩', '🍉'];
 
  const [fruit1, fruit2] = fruits;

👉 Use array methods: to help write cleaner code Javascript has handy array methods, like map, filter, find, reduce, etc. Avoid usings lots of loops and make your code more expressive:

const users = [
  {
    name: 'Danilo',
    lastname: 'Mello'
  },
  {
    name: 'John',
    lastname: 'Doe'
  },
  {
    name: 'Jane',
    lastname: 'Doe'
  },
]
 
const names = users.map(user => user.name); // extract names from users

👉 use ternary operator: allows you to write one-line if/else statements in simpler way.

let isLoggedIn = true;
 
const message = isLoggedIn ? 'Welcome back!' : 'Please log in.';

👉 use object methods: like Object.keys, Object.values or JSON.stringfy to help you avoid reimplementing repetitive tasks.

const users = [
  {
    name: 'Danilo',
    lastname: 'Mello'
  },
  {
    name: 'John',
    lastname: 'Doe'
  }
]
 
const keys = Object.keys(users[0]);
const values = Object.values(users[0]);

👉 Use rest/spread properties: allows to handle function parameters and array elements in flexible way.

// rest (...users)
function showUsers(...users) {
  return users.map(user => user.name);
}
 
// spread (...users)
const newUsers = [...users, { name: 'John', lastname: 'Smith' }]

🤝 Conclusion

If this article helped you, share it with a friend or post it on social media.

Thank you for reading! 🚀