JavaScript Best Practices — ES6 Features and Regex
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:07:52

---
title: JavaScript Best Practices — ES6 Features and Regex
published: true
date: 2020-07-18 20:08:40 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8aes6-features-and-regex/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices%25e2%2580%258a-%25e2%2580%258aes6-features-and-regex
---

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 template tag spacing, wrapping regex literals, and arrow function bodies.

### Spacing Between Template Tags and Their Literals

Since ES6, with the introduction of template strings, a new kind of function called template tags are introduced.

They only work with template strings. It’s a function that takes a few parameters including the template string itself and its parts.

We use template tags by defining a template literal tag and use it as follows:

```
const foo = (strings, ...args) => {
  console.log(strings, args);
}
`
const a = 1;
const b = 2;
foo`foo ${a} bar ${b}`

```

In the code above, we have defined the `foo` literal tag, which has the `strings` parameter that has an array of all the parts of the string that are static.

The `args` parameter is an array with all the values that are interpolated in the string.

Therefore, the value of `string` according to the console log output is `[“foo “, “ bar “, “”, raw: Array(3)]` , and the value of `args` is `[1, 2]` , which are the 2 values that we interpolated into the string.

Template literal tags are useful for taking the parts of a template string and then returning something from it.

Usually, we don’t have any spaces between the template literal tag name and the template string itself.

As we have in the code above, we have:

```
foo`foo ${a} bar ${b}`

```

which has no space between `foo` and the opening backtick so that it’s clear that we’re calling `foo` on the template string that immediately follows it.

### Wrapping Regex Literals

Regex literals may be wrapped so that we’re clear that we’re calling a method on the regex literal.

For instance, if we want to call the `exec` function as follows:

```
const result = /foo/.exec("foo");

```

Then people may not know that we’re actually calling the `exec` method on it.

If we wrap the regex literal with parentheses, then we can write the following code:

```
const result = (/foo/).exec("foo");

```

Then it may be clearer for some people that we’re calling `exec` on the `/foo/` regex literal.

This syntax is more of an optional suggestion than something that everyone should follow.

### Braces in Arrow function Body

Arrow functions are functions that are shorter and don’t bind to variables like `this` or `arguments` .

Also, we can’t use them as constructors or use `bind` , `call` , or `apply` on it.

It also lets us write functions in a shorter way. One benefit of it is that if we return something on the same line as the signature of the arrow function, then we don’t need the keyword `return` to return the item at the end of the function.

Instead, whatever’s at the end of the function is returned.

For multiline arrow functions, the return syntax works the same way as any other function. We would need the `return` keyword to return something.

For instance, if we have the following code:

```
const foo = () => 2;

```

Then 2 is returned by the `foo` function.

If we want to return an object, we can write the following code:

```
const foo = () => ({
  a: 1,
  b: 2
});

```

In the code above, we return the object that we wrapped in parentheses, so when we call `foo` , we get:

```
{
  a: 1,
  b: 2
}

```

returned.

If we have a multiline function, then return syntax works the same way as any other function.

For instance, we write the following code to return something in a multiline function:

```
const foo = () => {
  return {
    a: 1,
    b: 2
  }
};

```

In the code above, we have the `return` statement in the second line of the `foo` function.

And we get the same result as the previous `foo` function if we call `foo` .

Therefore, for functions that return what it’ll return on the first line of the function, then we don’t need braces. Otherwise, we should add braces.

### Conclusion

Regex literals may be wrapped in parentheses so that we’re clear that we’re calling a method on it.

Usually, we don’t put spaces between the template tag name and the template string literal so that we’re clear that we’re operating on it.

Arrow functions usually don’t have braces if they return something on the first line.

Otherwise, we need braces and the `return` keyword to return something.

The post [JavaScript Best Practices — ES6 Features and Regex](https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8aes6-features-and-regex/) appeared first on [The Web Dev](https://thewebdev.info).