Learning better Javascript by working on side projets

There are TONS of ways to learn JavaScript these days, but what has worked well for me has always been hacking on side projects. React, Yarn, ES6... these are a few of the skills I've picked up while working on my side project Novelty, an Etsy advertising platform.

Today I learned something cool and I thought I'd share it. The findIndex() method in JavaScript! It's the tool I've always needed.... and it finally came into view.

THE PROBLEM

For my use case, I needed to search through an array of objects and compare two (similar but not matching) objects:

As you can see one object has an approximate_size key/value, while the other does not. Now imagine trying to match these two using one line of code... I'll spare you a headache, it's hard to do. What saved my ass in this particular case was using findIndex().

BEFORE FINDINDEX()

What led me to the findIndex() method was trying (and ultimately failing) to use it's younger brother: indexOf().

indexOf() can give you the index of an object in an array, but the objects need to have the EXACT same key/values. If a particular key/value exists in one, but not the other, it won't work. Which makes sense, seeing as they technically do not match.

AFTER FINDINDEX()

What I was looking for was a way to match the values of the objects that I KNEW existed in both... This line of code will search our custom audience array and match against the ID, a value that we KNOW exists. The benefit here is that we can use findIndex to match similar objects rather than exact.

So there ya go... I learn quite a bit by messing around with side projects and using the latest technology.

YEAH, BUT WHAT'S IT ALL FOR IN THE END, ANYWAYS......MAAANNNNNN

Oh... "but why?", you ask. So we can filter arrays of course! Oh and also for my react App. I'm building a Market research tool that allows users to create and save Facebook Audience Targeting Ad Settings. I used the findIndex method to dynamically filter an array of custom audiences, find a match and "check" a checkbox. See a screen shot below!