JavaScript Best Practices — Strings and Functions

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 using template strings and the best way to define functions.

Use Template Strings

We should use template strings whenever possible. There’re many benefits to using them.

We can put in JavaScript expressions right inside the string, and we can save single and double quotes for quoting text inside the string.

Also, it can be used to create multiline strings since we can add line breaks by just typing them in rather than adding an extra line break character explicitly to do that.

For instance, we can use template strings as follows:

const name = 'jane';
const greeting = `Hi, ${name}`;

In the code above, we have a template string that has the expression name interpolated in it. We do that by using the ${} as the delimiter for interpolating expressions.

We don’t have any spaces between the interpolation delimiter and the expression itself.

This spacing is good because we already have the delimiter to separate the expression from the rest of the string, so we don’t need more space between the expression and the delimiter.

We can create a multiline string as follows:

const name = 'jane';
const greeting = `Hi,
${name}`;

Then we get:

Hi,
jane

as the value of greeting .

As we can see, all we have to do is type in an extra line break. We didn’t have to type out the escaped line break character to create a line break.

A template string is delimited by backticks, so we can use single and double quotes for quoting text inside the string.

Use Function Expressions Instead of Function Declarations

In JavaScript, there’re 2 ways to define functions. One is function expressions and the other is function declarations.

Function declarations are defined as follows:

function foo() {
  // ...
}

We have the function keyword with the name foo and we didn’t assign it to a variable.

Function declarations are hoisted to the top so they can be referenced anywhere in our code.

Function expressions are defined by creating a function and then assigning it to a variable.

For instance, we can create function expressions as follows:

const bar = function() {
  // ...
}

const baz = () => {
  //...
}

In the code above, we defined traditional and arrow functions and assigned each to a variable.

These aren’t hoisted so they can only be referenced after they’re defined.

Function expressions are better because we don’t have to worry about the confusion that arises when we have to think about hoisting.

Hoisting isn’t good for readability since hoisted functions can be referenced anywhere in our code.

Function expressions also work with all kinds of functions rather than just traditional functions.

We can also put a name in the function, but it’s not very useful since we can’t reference it with the name after it’s been assigned to a variable.

For instance, if we have the following code:

const bar = function foo() {
  // ...
}

Then we have to call the function as bar instead of foo . Therefore the extra name isn’t all that useful.

Wrap Immediately Invoked Function Expressions in Parentheses

Immediately Invoked Function Expressions (IIFEs) are functions that are defined and then run immediately afterward.

They’re useful for encapsulating data in the olden days, but now it’s still useful for creating async functions and calling them immediately.

We should wrap IIFEs in parentheses to make sure that everyone knows that it’s an IIFE.

For instance, we can create an async IIFE as follows:

((async () => {
  const foo = await Promise.resolve(1);
  console.log(foo);
})())

In the code above, we wrapped in our async function in parentheses so that we can call it immediately with the opening and closing parentheses.

Then we wrapped the whole expression in parentheses so everyone knows that it’ll run immediately.

Conclusion

If we create strings, we should use template strings. They let us interpolate expressions in a string and frees single and double quotes for quoting text.

We should define functions as function expressions instead of function declarations so that we can only call them after they’re defined. This way, it’s much easier to read since the flow actually goes in sequence.

IIFEs should be wrapped in parentheses so that we all know that it’s an IIFE.

The post JavaScript Best Practices — Strings and Functions appeared first on The Web Dev.