Variables - Using variables to simplify code

This is the last post in a serie of posts about improving variable usages in general.

Note: Code example in this post is in JavaScript, but the concepts and suggestions can be applied to any language. This example doesn't make sense functionally, and it could be written in a cleaner way, but it works to explain the concepts of this post.

Index

These are the topics discussed on each post:

1. Using constants
2. Avoiding magic strings duplication
3. Using variables to simplify code

Using variables to simplify code

After understanding what a magic string is and how to avoid the duplication of them by using constants, we could apply a similar strategy for avoiding duplication of lines of code itself.

Let's take a look at the following code:

function getColors(text, showErrorMessage) {
  const textColor = text.length >= 5 && text.length <= 30 ? 'green' : 'red'
  if (showErrorMessage && !(text.length >= 5 && text.length <= 30)) {    console.error('The text must have between 5 and 30 characters')
  }

  return textColor
}

// Invoking the function
getColors('some text', true)

As you can see there are some hard-coded values. So, let's apply the cleanup we learned in the "Avoiding magic strings duplication" post:

const MIN_CHAR = 5const MAX_CHAR = 30
function getColors(text, showErrorMessage) {
  const textColor = text.length >= MIN_CHAR && text.length <= MAX_CHAR ? 'green' : 'red'
  if (showErrorMessage && !(text.length >= MIN_CHAR && text.length <= MAX_CHAR)) {    console.error(`The text must have between ${MIN_CHAR} and ${MAX_CHAR} characters`)
  }

  return textColor
}

// Invoking the function
getColors('some text', true)

But there is still some duplicated code. Let's clean it up more:

const MIN_CHAR = 5
const MAX_CHAR = 30

function getColors(text, showErrorMessage) {
  const isValidText = text.length >= MIN_CHAR && text.length <= MAX_CHAR  const textColor = isValidText ? 'green' : 'red'
  if (showErrorMessage && !isValidText) {    console.error(`The text must have between ${MIN_CHAR} and ${MAX_CHAR} characters`)
  }

  return textColor
}

// Invoking the function
getColors('some text', true)

This way you gain multiple benefits:

• You give names to your code, so it helps you understand what the code is doing without needing inline comments.
• The code is cleaner. You can see all places that uses the same condition/variable. (You can also use IDE intelliSense and other features)

The downside of it: You have to come up with variable names that are descriptive and that make sense. Which is really hard! Not too short (isVal), not too long (isTextMatchingCharactersLength).

Code standards (Personal preference)

• Don't make everything variables. Identify what code makes sense to put in variables. Usually those that are duplicated are the best.
• As seen in the code above, the variable name is isValidText (Camel case format) not IS_VALID_TEXT (Screaming snake case format). This is because that variable is mutable. It's not going to be the same exact value all the time. Its value is directly dependent on the text parameter.

Make sure your code is clear and easy for others to understand. Try to make it as reusable and scalable as possible.

You won't be the only person touching that codebase for ever!