JavaScript Best Practices— Padding, Exponentiation, and Spread
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:06:55

---
title: JavaScript Best Practices— Padding, Exponentiation, and Spread
published: true
date: 2020-07-18 20:03:41 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices-padding-exponentiation-and-spread/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices-padding-exponentiation-and-spread
---

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 padding between statements, exponentiation, and spread.

### Padding Lines Between Statements

We don’t need an empty line between all statements. We just need blank lines between groups of unrelated statements.

For instance, one way to group statements in a function is to write something like the following code:

```
for (let i = 0; i < 10; i++) {
  console.log(i);
}

for (let j = 0; j < 5; j++) {
  console.log(i);
}

```

In the code above, we have a blank line between the 2 `for` loops because each loop is its own logical group.

We just need a blank line between groups of statements that we want to group together. The blank line tells us that they should be read as a group.

Otherwise, a blank line is a waste of space and we can remove them to save vertical space.

### Use of `Math.pow` Versus the `**` Operator

`Math.pow` is a method that lets us do exponentiation in all versions of JavaScript since the first version up to the present version.

It takes 2 arguments, which are the base and the exponent and returns the base raised to the given exponent.

For instance, we can use it as follows:

```
const a = Math.pow(2, 3);

```

Then we get that `a` is 8 since 2 is raised to the power of 3.

It also works with fractional and negative powers. For instance, we can write:

```
const a = Math.pow(2, 0.5);

```

and get that `a` is 1.4142135623730951. We can also write:

```
const a = Math.pow(2, -1);

```

and get that `a` is 0.5.

In addition, we can put expressions in place of numbers as follows:

```
const x = 1,
  y = 2,
  z = 3;
const a = Math.pow(x + y, z);

```

Then we get that `a` is 27 because `x` is 1, `y` is 2 and `c` is 3 so we’re raising the base 3 to the power of 3.

With ES2015, the exponential operator is introduced. It’s denoted by `**` .

We can use it to do exponentiation as follows:

```
const a = 2 ** 3;

```

and get that `a` is 8.

Fractional and negative powers and exponents all work as we expected with the `**` operator. For instance, we can write to them as follows:

```
const a = 2 ** 0.5;
const b = 2 ** -1;

```

For expressions, we can write:

```
const x = 1,
  y = 2,
  z = 3;
const a = (x + y) ** z;

```

As we can see, using the exponentiation operator is shorter and we get the same result and it’s also more readable than calling a method that we don’t need to call.

We saved lots of typing and do the same thing, so we should use the exponentiation operator instead of calling `Math.pow` for doing exponentiation.

### Use Object Spread Operator Over Calling `Object.assign`

The spread operator works on objects since ES2018. It lets us do a shallow copy of objects or merged multiple objects into one new object.

Between ES6 and ES2017, we’ve to use the `Object.assign` to merge multiple objects into one or make a shallow copy of it.

With `Object.assign` , we make a shallow copy of an object by writing the following code:

```
const foo = {
  a: 1
};
const bar = Object.assign({}, foo);

```

In the code above, we defined the `foo` object. Then we called `Object.assign` with an empty object as the first argument and the `foo` object as the 2nd argument to return a shallow copy of the `foo` object.

A shallow copy is where only the top-level properties are copied. The nested objects still reference the original object.

If we log the expressions `foo === bar` , it returns `false` , which means that `foo` and `bar` aren’t referencing the same object in memory. Therefore, we know that we made a shallow copy of the object.

The first argument of `Object.assign` is the target object to copy to and the rest of arguments, which can be as many as we want, are the source objects that we want to copy into the target object.

To merge multiple objects together with `Object.assign` , we just pass in more objects into it as arguments.

For instance, we can write the following code:

```
const foo = {
  a: 1
};
const baz = {
  b: 2
};
const qux = {
  c: 3
};
const bar = Object.assign({}, foo, baz, qux);

```

Then we get that `bar` is `{a: 1, b: 2, c: 3}` .

The spread operator makes this simpler. With it, we don’t have to call a function to merge and make shallow copies of objects. All we have to do is to use the spread operator, which is denoted by `...` as follows:

```
const foo = {
  a: 1
};
const baz = {
  b: 2
};
const qux = {
  c: 3
};
const bar = {
  ...foo,
  ...baz,
  ...qux
};

```

The code above also merges all the objects into one as we did with `Object.assign` above.

And so we get that `bar` is `{a: 1, b: 2, c: 3}` .

We can make a shallow copy of an object as follows:

```
const foo = {
  a: 1
};
const bar = {
  ...foo,
};

```

and we get that `bar` is `{ a: 1 }` but `foo` and `bar` aren’t equal when compared with the `===` operator as they don’t reference the same object.

### Conclusion

The spread and exponentiation operator should be used instead of their older counterparts.

We don’t need a line after each statement. We need a new blank line after a group of statements that we want to group together.

The post [JavaScript Best Practices— Padding, Exponentiation, and Spread](https://thewebdev.info/2020/07/18/javascript-best-practices-padding-exponentiation-and-spread/) appeared first on [The Web Dev](https://thewebdev.info).