Lodash is a utility library that has lots of methods for manipulating objects. It has stuff that we use all the time and also things that we don’t use frequently or don’t think of using.
We can implement many Lodash methods with plain JavaScript. In this article, we’ll look at some array methods that can be implemented in plain JavaScript.
chunk
In Lodash, the chunk method splits an array into groups by size. We can implement it as follows with plain JavaScript:
const chunk = (arr, size) => {
const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) {
chunkedArr.push(arr.slice(i, i + size));
}
return chunkedArr;
}
In the code above, we looped through arr and take the chunks with size given by size and push each array returned from slice into chunkedArr.
Therefore, if we call it as follows:
chunk([1, 2, 3, 4, 5, 6], 2)
We get:
[
[
1,
2
],
[
3,
4
],
[
5,
6
]
]
compact
The compact method returns an array with the falsy values removed. Falsy values in JavaScript include false , 0, null , undefined , and NaN.
For instance, we can write the following code to implement compact:
const compact = (arr) => {
return arr.filter(a => !!a);
}
All we had to do is call the filter method with the callback a => !!a which returns an array with all the truthy elements from the original array.
Then when we call it as follows:
compact([1, 2, 3, false, undefined])
We get:
[
1,
2,
3
]
returned from our compact function.
concat
The Lodash concat method concatenates multiple arrays into one array and returns it. It works by reduce the nesting depth of nested arrays by one level and then putting them into the returned array.
For instance, we can write the following code to create our own concat method:
const concat = (arr) => {
return arr.reduce((a, b) => a.concat(b), [])
}
In the code above, we used the reduce method to with the concat method to combine multiple arrays into one.
Array’s built-in concat method is useful for combining arrays. If we call our concat method with:
concat([1, 2, 3, [4],
[
[5]
]
])
We get:
[
1,
2,
3,
4,
[
5
]
]
like we did with the concat method. JavaScript array’s built-in concat method also reduces the nesting depth by 1.
difference
The difference method lets us find elements from a given array that’s not in another array.
We can implement or own equivalent function with JavaScript’s built-in array methods as follows:
const difference = (arr, arr2) => {
return arr.filter(a => !arr2.includes(a));
}
In the code above, we have the difference method, which we implemented by using the filter method. In the callback that we passed into filter , we just return !arr2.includes(a) to find the items that aren’t in arr2.
drop
The drop method creates an array with a given number of elements dropped from the beginning.
For instance, we can implement it by writing:
const drop = (arr, n) => {
return arr.slice(n);
}
We just pass in n straight to slice to return an array with the first n items removed from the original array.
Then when we call it as follows:
drop([1, 2, 3, 4, 5], 2)
We get:
[
3,
4,
5
]
dropRight
The dropRight method is the opposite of drop . It returns an array with a given number of elements dropped from the right.
Again, we can use slice to implement dropRight as follows:
const dropRight = (arr, n) => {
return arr.slice(0, -n);
}
We just pass in n multiplied by 1 to slice to return an array with the first n items removed from the original array.
Then when we call it as follows:
dropRight([1, 2, 3, 4, 5], 2)
We get:
[
1,
2,
3
]
since the last 2 elements were removed from the returned array.
Conclusion
Many methods in Lodash can be implemented with plain JavaScript easily with a few method calls and operations.
We can loop through our array and use array’s slice method to implement chunk. The slice is also useful for drop and dropRight.
To implement compact, we just need to call filter with the callback that returns the truthy values.
Finally, to implement concat, we can use the array’s built-in concat method to do the concatenation repeatedly with reduce.
