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 appeared first on The Web Dev.