Simplified Knowledge Blog

Boosting Code Readability

Most of the tips presented in this article will rely on ES6 (ECMAScript 2015) syntax

asdfsd

Destructuring

Destructuring can be useful for retrieving individual items from an object or an array. Be careful when using arrays as you can get easily confused by renaming some property in the wrong way, let's take a look at one example:

// students => [age, grade]
const students = [
  [19, 80.9],
  [21, 75.2],
  [19, 88.7]
]
students.forEach(([age]) => age) // 19, 21, 19
// Even renaming the first value as a grade, we get their age
students.forEach(([grade, age]) => grade) // 19, 21, 19
// We can skip array values using a comma (,)
students.forEach(([, grade]) => grade) // 80.9, 75.2, 88.7

Now using an object.

const students = {
  Kevin: {
    age: 19,
    grade: 80.9
  },
  Laura: {
    age: 21,
    grade: 75.2
  }
}
const { Kevin } = students
Kevin.grade // 80.9

Using property accessors

We can have access to an object property in two ways, you can use the simple dot ., or the bracket [] access notation.

const Kevin = {
  age: 19,
  grade: 80.9
}
Kevin['grade'] // 80.9

An example with CSS modules: using a class name with special characters.

const Text = () => {
  return <p className={styles['primary-text']}>Hello!</p>
}

If you want, you can also access dynamically properties:

const statusMessages = {
  ERROR: 'RIP server',
  LOADING: 'We are trying our best',
  IDLE: 'Waiting for input'
}
const status = getCurrentStatus() // LOADING
statusMessages[status] // We are trying our best

Using object function parameters

This is situational, but usually, when I get more than 2 or 3 parameters in a function, I use this method. Compare the functions below:

const getRandomArray = (arrayLength, contentVariation, delayInMS) =>
  new Promise((resolve) => {
    const randomNumber = () => Math.ceil(Math.random() * contentVariation)
    const generatedArray = Array(arrayLength)
      .fill(0)
      .map((_) => randomNumber())
    setTimeout(() => resolve(generatedArray), delayInMS)
  })
getRandomArray(8, 5, 2000).then((array) => array) // [4, 4, 5, 1, 4, 5, 1, 4]

I'm sorry, I couldn't think of anything better than this. But let's now take a look at the object notation.

const getRandomArray = ({ arrayLength, contentVariation, delayInMS }) =>
new Promise((resolve) => ... );
getRandomArray({ arrayLength: 8, delayInMS: 2000, contentVariation: 5 });

Now, we don't get lost in our parameters and we don't need to worry about correctly ordering them.

Dictionaries

Sometimes we want to translate some returns or get a message by status. Dictionaries can easily do this without writing a bunch of if statements. They were previously mentioned in a code block before so let's rewind.

const ifStatement = (status) => {
  if (status === 'ERROR') return 'RIP server'
  if (status === 'LOADING') return 'We are trying our best'
  if (status === 'IDLE') return 'Waiting for input'
}
ifStatement('ERROR')
const switchCases = (status) => {
  switch (status) {
    case 'ERROR':
      return 'RIP server'
    case 'LOADING':
      return 'We are trying our best'
    case 'IDLE':
      return 'Waiting for input'
    default:
      throw new Error(`Status: ${status}, not found`)
  }
}
switchCases('ERROR')
const dictionary = {
  ERROR: 'RIP server',
  LOADING: 'We are trying our best',
  IDLE: 'Waiting for input'
}
dictionary['ERROR']

If statements - Medium readability and 3 lines
Switch cases - Medium readability and 7-9 lines
Dictionaries - Easy readability and 3 lines

Arrow functions

Arrow functions have their disadvantages when compared with normal ones, but you can get a clean result using them. Look at some comparisons below.

// Function version
function doubleValueF(value) {
  return value * 2
}
function getPeopleNameF(people) {
  return people.map((person) => person.name)
}
// Arrow function version
const doubleValueA = (value) => value * 2
const getPeopleNameA = (people) => people.map((person) => person.name)
// Destructuring
const getPeopleNameA = (people) => people.map(({ name }) => name)

Using them, we can do one-liners and omit the parenthesis around the parameters in case there's only one. In line 27, we combine destructuring with arrow functions.

Guard clauses - Avoiding else keyword

When we use if statements, we intend to cover every case we need, consequently flooding our code with else keywords. Let's take this example that uses the return keyword look:

const checkAge = (age) => {
  if (age < 18) {
    return 'Cannot enter in the party.'
  } else if (age >= 18 && age < 21) {
    return "Can enter, but can't drink."
  } else {
    return 'Can enter and drink.'
  }
}

In the checkAge function we check for the input, and the logic work's like this:

If the person is under 18 years old they can't enter the party.
If they are under 21 but 18 or older they can enter but not drink.
If they are older then they can enter and drink.

We have a few issues in this code that we can correct:

In line 4, we don't need to check if the person is older than 18 because we already returned them in line 2.
We just need to return a message, so we can put the condition and return statement in one single line, some programmers don't like that way, so use what you think it's the best for you.
We can replace the keywords else if and else for if statements and even omit the keyword in the last line.

Let's refactor and check it out.

const checkAge = (age) => {
  if (age < 18) return 'Cannot enter in the party.'
  if (age < 21) return "Can enter, but can't drink."
  return 'Can enter and drink.'
}

Look how we can both use the line 2 or line 3-4 ways to return the message, so use what looks better for you. Personally, for long messages, I use the second method. In conclusion, evaluate if you need to use a keyword.

When we can't avoid the else keyword

Usually, we can't avoid the use of else if we need to return the same thing for both conditions.

const checkUserRoles = (user) => {
  if (user.isPremium) renderPremiumStats()
  else renderAds()
  return renderApplicationInterface()
}

Spread operator to pass React Props

This operator is responsible to get the rest of an object, let's suppose that we need to map through a list of users and return a user card. This is the user's list:

const users = [
  {
    name: "George",
    age: 72,
    weigh: 180,
    heigh: 5.8,
    job: "Trucker"
  },
  ...
]

And now the component and the props.

Without spread operator:

const UserCard = ({ name, age, job }) => <></>
const App = () =>
  users.map(({ name, age, job }) => (
    <UserCard name={name} age={age} job={job} />
  ))

Using spread operator:

const App = () => users.map((user) => <UserCard {...user} />)

Look how without needing all the props, we still can pass the spread operator to the component. Even destructuring the props in the first example, our second code block gives much more readability.

Short Circuit Evaluation

Sometimes we just need a short conditional to define a variable value or check a conditional, and with if statements we spend too much space on simple things. Look at these two examples:

// if statement
if (isSunny) chosenClothing = SummerClothing
else chosenClothing = WinterClothing
// short circuit
const chosenClothing = isSunny ? SummerClothing : WinterClothing

...
if (isSunny && isHappy) return goToBeach()
...

For more information about short circuits check for additional resources at the end of the article.

Avoid short circuits in React

Yes, I know that I recommended using short circuits in this article, but sometimes avoiding them can give us better readability in our code. Let's look at some examples

Short circuit

const Component = ({ isAdmin }) => {
  const [state, setState] = useState(false)
  return isAdmin ? (
    <AdminInterface>
      <>
        <></>
      </>
    </AdminInterface>
  ) : (
    <UserInterface>
      <>
        <></>
      </>
    </UserInterface>
  )
}

If statements

const Component = ({ isAdmin }) => {
  const [state, setState] = useState(false)
  if (isAdmin)
    return (
      <AdminInterface>
        <>
          <></>
        </>
      </AdminInterface>
    )
  return (
    <UserInterface>
      <>
        <></>
      </>
    </UserInterface>
  )
}

Individual components

const Component = ({ isAdmin }) => {
  const [state, setState] = useState(false)
  if (isAdmin) return <AdminInterface />
  return <UserInterface />
}

Individual components and no internal logic

const Component = ({ isAdmin }) =>
  isAdmin ? <AdminInterface /> : <UserInterface />

Exporting all from index file

That's a cool import/export trick, which has nothing to do with our real code, but we can get interesting results using it. That's how we usually import files:

import Brain from './Brain.png'
import BriefCase from './BriefCase.png'
import BuildingConstruction from './BuildingConstruction.png'

Now using an index file inside the images folder:

index.js

import Brain from './Brain.png';
import BriefCase from './BriefCase.png';
import BuildingConstruction from './BuildingConstruction.png';
import CowboyHat from './CowboyHat.png';
import CrystalBall from './CrystalBall.png';
import Desktop from './Desktop.png';
...
export {
 Brain,
 BriefCase,
 BuildingConstruction,
 CowboyHat,
 CrystalBall,
 Desktop,
...
};

component.js

import { Brain, BriefCase, BuildingConstruction } from 'public/Emojis'

Look how we transformed 3 lines into 1. Note that we don't need to use public/Emojis/index, JavaScript automatically imports the file if its name is index.

Transforming complicated conditionals into variables

Look at one example in which we are checking for multiple conditionals to verify if we can render the management panel:

if (user.roles.includes('ADMIN') || (user.age > 18 && user.reputation > 10))
  return renderManagementPannel()

Let's refactor the code transforming the complicated conditionals into variables:

const isAdmin = user.roles.includes('ADMIN')
const responsibleUser = user.age > 18 && user.reputation > 10
if (isAdmin || responsibleUser) return renderManagementPannel()

Look how we increase lines in our code, but our team working on the application can easily know why the renderManagementPannel function is being fired.