Common Javascript Functions Replacing Lodash

Lodash is one of the most widely used utility libraries for JavaScript. It offers an enormous number of functions on arrays, objects, strings, numbers, and many more. Nevertheless, many of those functions have native JavaScript alternatives you can apply for cleaner, more efficient, and easier code to maintain. we’ll take a look at some of the most frequently used Lodash function replacements in JavaScript.

Below are the following approaches for replacing Lodash with Javascript functions:

Mapping Array Elements

It applies a function to each element of an array and returns a new array containing the results. This method is very useful in transforming data for instance, when calling multiple calculations or formatting. It helps keep your code concise and expressive if you utilize map().

Syntax:

array.map(callback)

Example: This multiplies each element in the numbers array by 2 and creates a new array doubleNumbers which contains the results using a map().

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); 

[ 2, 4, 6 ]

Filtering Array Elements

it takes the original array and passes its elements to a new array only if they pass a test implemented by the given function. This method is very useful for creating subsets of data based on specific criteria. It also makes it easy to efficiently manipulate and filter data because you get to preserve the integrity of the original array while isolating only the elements you need, thus making usage of filter() possible.

Syntax:

array.filter(callback)

Example: This filters the numbers array to create a new array evens which only contains even numbers.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);

[ 2, 4 ]

Reducing Array Elements

It applies a given function to an accumulator and each element of an array in order to reduce the array to a single value. This can be especially useful for aggregates: summing numbers, multiplying them, or even constructing complex data structures. You can use the reduce() method to perform operations which are dependent on both the current element and the accumulated result so that you can perform some really powerful transformations on your data.

Syntax:

array.reduce(callback, initialValue)

Example: This code calculates the sum of all elements in numbers array using the reduce method.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, val) => acc + val, 0);
console.log(sum); 

15

Finding an Element in an Array

It returns the first element in an array that passes a test implemented by the provided function. This method is of particular utility when you want to seek to find an item of interest based on specific criteria without manually looping over the entire list. Quick access to elements in collections using find() makes your code cleaner and more efficient.

Syntax:

 array.find(callback)

Example: This finds and returns the first user object with the name 'Alice' from the users array.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const alice = users.find(user => user.name === 'Alice');
console.log(alice); 

{ id: 1, name: 'Alice' }