Lodash - The best 3rd party library for react and javascript developers

Hello again my dear noobies,

After some years of using the React framework, I finally feel like I need to say this especially to those newbies out there in the javascript language or React framework.

Tired with those messy looking codes while looping on an array? Or maybe you want to get the sum of the list? Or maybe you want to convert the list of object into a list of components?

You may have lots of problems and spaghetti codes but worry no more.

The lodash library is here to save your day.

Loops

Before anything else let's start with loops, afterall, everyone else uses loops here.

For example we have an array named data where it's value is a list of object with properties name and age.

const data = [
    {"name": "Zack", age: 36},
    {"name": "Ashley": age: 12}
]

and imagine we want to print all name...

Codes like these:

for (let i = 0; i < data.length; i++) {
    let d = data[i];
    console.log(d.name);
}

Can be converted to codes like these:

_.each(data, (d) => {
    console.log(d.name);
});

It's just one line less of code. But guess what, you'll love it in the future since it offers an additional null checker. Even if the data is null it will still not throw an error unlike the code above. The less code, the cleaner, the better.

Maps

But what if we want to change the array of data and return only an array of names? 

Of course we can always use loops

let names = [];
for (let i = 0; i < data.length; i++) {
    let d = data[i];
    names.push(d.name);
}
console.log(names); //will print: ["Zack","Ashley"]

But with maps we can do it faster

console.log(data.map(d => d.name));  //will print: ["Zack","Ashley"]

But what if data is null then you'll get an error so the best way and the least code is this:

console.log(_.map(data, d => d.name)); //will print: ["Zack","Ashley"]

As you can see by using lodash we have less code and more functionality (since there is a null checker built in).

And...

Here comes the best part for react developers. Imagine you have a component called IdCard that accepts two properties age and name. And, you also want to make this one dynamic so that the web app changes based on the data array. What will you do?

Since you are a noobie programmer you will surely do this:

render() {
    const { data } = this.props;
    let idCards = [];
    for (let i = 0; i < data.length; i++) {
        let d = data[i];
        idCards.push(<IdCard name={d.name} age={d.age} />);
    }
    return (
        <div className='id-card-list'>
            {arr}
        </div>
    );
}

booo!!! I'm not saying it's wrong but there's a much cleaner and faster way.

And here it is:

render() {
    const { data } = this.props;
    return (
        <div className='id-card-list'>
            {_.map(data, d => {
                return <IdCard name={d.name} age={d.age} />
            })}
        </div>
    );
}

You don't have to initialize an array (which saves memory) and it's less code.

Reduce

Sometimes you just might wanna get the total age of a list of person...

A noobie programmer will do this:

let totalAge = 0;
for (let i = 0; i < data.length; i++) {
    let d = data[i];
    totalAge += d.age;
}

The better way is this:

let totalAge = _.reduce(data, function(sum, dAge) { return sum + dAge; }, 0);

See, from 5 lines now it is reduced to 1 line and that's a real magic. You might be wondering why there is a zero. The zero there is the initial value of the sum, it's like:

let totalAge = 0;

And with that... I hope you started to love lodash. Also, you are beginning to be more like a pro and less like a noobie. Hope you like my content.

If there's a way to do it better...

find it. - Thomas A. Edison