Categories
JavaScript Best Practices

JavaScript Best Practices — Arrays and Arrow Functions

Spread the love

Like any kind of apps, JavaScript apps also have to be written well. Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some best practices for working with arrays and arrow functions.

Use map to Map Items

The map method is great for mapping array entries from the original to something else.

This way, we don’t need to use loops to do it.

So instead of writing:

for (const a of arr) {
  cubed.push(a ** 3);
}

We write:

const cubed = arr.map(a => a ** 3);

This is much shorter and clean.

No Useless this Argument

We shouldn’t reference thsis if we don’t need to do it. For instance, we shouldn’t reference it in an arrow function when it’s used as a callback.

We should write something like:

const cubed = arr.map(a => a ** 3);

instead of:

const cubed = arr.map(a => a ** 3, this);

or:

const containsE = array.some((char) => char === 'e', this);

Avoid Reverse

We should avoid using reverse if we aren’t using it to reversing an array.

If we’re just trying to combine results from the end of the array to the left, we can use reduceRight instead.

For example, instead of writing:

const sum = array.reverse().reduce((total, c) => total + c, 0);

We should write:

const reverseSum = array.reduceRight((total, c) => total + c, 0);

We skipped the reverse operation and did the same thing.

This means we write less code and the code is faster because we skipped one operation.

Use Flat Map

The latest version of JavaScript has a flatMap method to map array items and reduce the nesting of the array by 1 level. This is better than using map and flat together.

For example, instead of writing:

const flattenedAndMapped = array.map((a) => a).flat();

We can write:

const oneAction = array.flatMap((b) => b);

If we don’t need to map, we can also use flat :

const flattened = array.flat();

Use Flat

To flatten an array, we don’t need to use reduce or concat anymore. This is because array instances now have the flat method to reduce nesting.

For instance, instead of writing:

const concatFlattened = [].concat(...array);

or:

const reduceFlattened = array.reduce((p, n) => p.concat(n), []);

We instead write:

const flattened = array.flat();

No Unused Parameters

We shouldn’t have unused parameters in our arrow functions.

Since they aren’t used, we should remove them.

For instance, we write:

const fn = (data, user) => request(user.id, data);

instead of writing:

const fn = (data, user) => request(user.id);

data wasn’t used in the example above, so we should take it out.

Number of Parameters

We shouldn’t have too many parameters. The more parameters we have, the harder for us to keep track of them.

We may pass arguments in the wrong place and it’s also easy to pass in the wrong type of data.

Ideally, we have 3 parameters or less in our functions.

For example, good functions are:

const fn0 = () => "";

or:

const fn3 = (one, two, three) => one * two * three;

But the following isn’t good:

const fn3 = (a, b, c, d) => a * b * c * d;

If we need more than that, then we can pass in an object or use the rest operator.

For example, we can write:

const fn = ({ a, b, c, d }) => a * b * c * d;

We used the destructuring syntax to destructure the properties in an object.

Then we can pass in as many properties as we want in an object.

Also, we can use the rest operator as follows:

const fn = (a, b, c, ...d) => a * b * c * d[0];

d would be a parameter that has arguments in the 4th position and beyond store in an array.

Naming Functions

If we need to use arrow functions in multiple places, then we should name them by assigning them to a variable.

For instance, we can write:

cosnt fn = (a, b) => a ** b;

Now we can call it by writing fn(1, 2) .

We can also put them into an object:

const obj = {
  fn: (a, b) => a ** b;
}

Then we can call it by writing obj.fn(1, 2) ;

Conclusion

There are many methods in array instances that we can use to manipulate them.

Also, there are better ways to define arrow functions and use them.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *