In recent years, new features in JavaScript have been rolling out at a rapid pace. The deficiencies that are filled in by other libraries before have become built-in features of plain JavaScript.
In this article, we’ll look at the methods in Lodash that are now available in plain JavaScript.
Map
Lodash has a map method to map each array entry to another by a function that we specify. It takes in an array and a function to transform the entries as arguments.
For example, we can call Lodash’s map method by writing:
const arr = _.map([1, 2, 3], n => n ** 2);
Then we get back:
[1, 4, 9]
JavaScript’s arrays now have the map method. We can use it as follows:
const arr = [1, 2, 3].map(n => n ** 2);
It also returns a new array but takes one less argument since it’s a method in an array.
Filter
The filter method in Lodash returns a new array that has the filtered entries of the original array. It takes an array and a function that returns the condition for the filter as arguments.
For example, we can write:
const arr = _.filter([1, 2, 3], n => n % 2 === 0);
to return an array with only even numbers.
With JavaScript array’s filter method, we can simplify the code a bit since it’s called on the array itself. We can rewrite it as:
const arr = [1, 2, 3].filter(n => n % 2 === 0);
In both cases, we get [2] back.
Reduce
Like the other 2 array methods, Lodash’s reduce method now has a plain JavaScript equivalent with the same name. Both of them let us combine our array entries into one thing.
For example, to get the sum of all the entries in an array, we can use the Lodash reduce method as follows:
const arr = _.reduce([1, 2, 3], (total, n) => total + n, 0);
The Lodash version took 3 arguments, which is the array to combine, the function used to combine the values, and the initial value for the combined value.
With JavaScript array’s reduce method, it’s similar except that we call it on the array directly as follows:
const arr = [1, 2, 3].reduce((total, n) => total + n, 0);
In both cases, we get 6 as a result.
Head
Lodash’s head method returns the first element of an array. For example:
const first = _.head([3, 4, 5]);
will get us 3 as the value of first .
We can do this with JavaScript by writing the following:
[3, 4, 5][0]
or:
const [first] = [3, 4, 5];
Tail
The Lodash’s tail method will get us everything but the first entry of an array.
For example, we can use it as follows:
const rest = _.tail([3, 4, 5]);
Then we get [4, 5] as the value of rest.
We can write the following to get everything but the first element of an array by writing:
const rest = [3, 4, 5].slice(1);
or:
const [first, ...rest] = [3, 4, 5];
The spread operator will give us the rest of the elements stored in the rest variable as the array, so we get the same thing.
Rest
Lodash’s rest method gets the extra arguments that are passed into the callback function that we pass into it that are in excess of the number of parameters and returns a function that let us do something with those extra arguments.
For example, if we have:
const restFn = _.rest((first, rest) => rest);
Then calling restFn(“foo”, “bar”, “baz”); will return [“bar”, “baz”] .
We have the rest operator to do the same thing in JavaScript’s rest operator:
const restFn = (first, ...rest) => rest
Spread
In Lodash, the spread method will return a function that takes a callback function, and then return a function where we pass in an array which we use as the arguments of the callback function we passed in.
For example, if we have:
const spreadFn = _.spread((foo, bar) => `${foo} ${bar}`);
Then when we call spreadFn as follows:
spreadFn(["foo", "bar", "baz"])
We get back:
'foo bar'
It’ll take each entry of the array passed into spreadFn , and pass it as the arguments of the function that we passed into the spread method.
This is the same as calling a function as is in JavaScript:
const spreadFn = function(foo, bar) {
return `${foo} ${bar}`;
}
Then we can use the apply method on the function to do the same thing:
spreadFn.apply(null, ["foo", "bar", "baz"])
And we get the same result.
As we can see, lots of methods in Lodash have equivalents in plain JavaScript, especially array methods. So to reduce the reliance of libraries, we can use more plain JavaScript replacements here to replace existing uses of Lodash methods when they make code cleaner and lighter.
