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.