JavaScript Best Practices — Destructuring and Strings

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the right way to return results in our function and some best practices for strings.

Use Object Destructuring for Multiple Return Values Rather Than Array Destructuring

We should return objects in our functions if we have multiple items that we want to return so that when the position of the changes, we don’t have to change the code when the returned value is destructured somewhere else.

For instance, if we have a function that returns several items in an array as follows:

const foo = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  return [a, b, c];
}

const [a, b, c] = foo();

Then code would break if we swap the position of the items in the array. For example, if we have the following code:

const foo = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  return [a, c, b];
}

const [a, b, c] = foo();

In the code above, we switched the position of b and b in the return value of foo but we didn’t change the order that they’re destructured. Therefore, we’ll get results that we didn’t expect.

If we return an object, then we don’t have to worry about the position that each entry is returned in.

For instance, if we have the following code:

const foo = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  return {
    a,
    b,
    c
  };
}

const {
  a,
  b,
  c
} = foo();

Then we can swap b and c within the object returned in foo and get the same result as before because objects are destructured by matching their property name and their nesting level rather than just the position as in arrays.

Use Single Quotes for Strings

Using single quotes saves us some typing since we don’t have to press the shift key to type it.

It does the same thing as double quotes as they both create regular strings.

Therefore, instead of writing the following:

const foo = "foo";

We write:

const foo = 'foo';

Strings That Cause the Line to Go Over 100 Characters Should Not Be Written Across Multiple Lines Using String Concatenation

If our string is over 100 lines long and it’s all in one line, then we should write it across multiple lines so that we don’t have to scroll horizontally to read the whole string.

What we should do is to break them up into chunks that are less than 100 characters longs, put them into an array, and then call the array instance’s join method together to join them together.

For instance, we can write the following code to do that:

const arr = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Vivamus tincidunt magna at turpis maximus.',
  'Duis porttitor imperdiet justo ac molestie.'
]

const str = arr.join(' ');

In the code above, we have sentences that are 100 characters long or less and then we called the join method to join them together.

This is easier to read and manipulate since we don’t have lots of + signs or “ signs as in the following code:

const str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
  'Vivamus tincidunt magna at turpis maximus.' +
  'Duis porttitor imperdiet justo ac molestie.'

or:

const str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vivamus tincidunt magna at turpis maximus.
  Duis porttitor imperdiet justo ac molestie'

Conclusion

When we return something in a function that can be destructured, then we should do that by returning objects. This way, the destructuring is done by matching the property name and the nesting level rather than the position if we return the result as an array.

Therefore, the destructuring code wouldn’t break if we move the object properties around as long as the property names don’t change.

If we’re defining regular strings, then we should use single quotes to save us from using the shift key.

Also, we should put multiple strings together into an array and use the array’s join method to join multiple strings together, if we have long strings.