Simplify Your JavaScript with .some() and .find()

Simplify Your JavaScript with .some() and .find()

If you heard of .some() and .find() in JavaScript, you migh want to learn to use it

Originally published by Etienne Talbot at https://medium.com

I thought I should share two more array methods that are useful tools in a JavaScript developer’s arsenal: .some() and .find().

Let’s dive!

.some() JavaScript

This array method helps you determine if one or more of its values correspond to something you’re looking for. If that doesn’t sound clear to you, let me illustrate with an example…

Here’s a list of operatives working for your super secret organization:

var operatives = [
  { id: 12, name: 'Baze Malbus', pilot: false },
  { id: 44, name: 'Bodhi Rook', pilot: true },
  { id: 59, name: 'Chirrut Îmwe', pilot: false },
  { id: 122, name: 'Jyn Erso', pilot: false }
];

You want to know if there are any pilots among your operatives. There are many ways to achieve that goal. Most people will probably use .forEach() and do something like this:

var listHasPilots = false;operatives.forEach(function (operative) {
  if (operative.pilot) {
    listHasPilots = true;
  }
});

That’s a lot of lines just to see if the list contains a pilot. Let’s try using .some()!

var listHasPilots = operatives.some(function (operative) {
  return operative.pilot;
});

We can even be more concise with arrow functions (requires ES6 support, Babel or TypeScript)

const listHasPilots = operatives.some(operative => operative.pilot);

How does it work?

Well, you pass .some() a function as the argument. That function runs for each value in the array. You can then see if the value fits the condition you’ve written. The function must return a boolean (although a truthy/falsy value works as well). As soon as one true is returned, .some() will itself return true. If none of the values, when processed in your condition, return true (if they all return false), then .some() will return false.

Note that as soon as a single true is returned, .some() will stop checking the other array values. In our example above, the function only runs twice as the second operative, Bodhi Rook, is a pilot. No need to check for other pilots.

TL;DR : if some of your array values correspond to what you’re looking for, .some() will return true. If not, it’ll return false.

.every() JavaScript

As was pointed out in the comments, know that you can also check if every value of the array matches your condition by using .every() . It works exactly like .some(), but will return true only if every occurence match.

.find() JavaScript

This array method does exactly what it says: it finds what you’re looking for. In a nutshell, .find() will return the first value that corresponds to the passed condition. Let’s see it in action with the same data as earlier.

Here is our list of operatives:

var operatives = [
  { id: 12, name: 'Baze Malbus', pilot: false },
  { id: 44, name: 'Bodhi Rook', pilot: true },
  { id: 59, name: 'Chirrut Îmwe', pilot: false },
  { id: 122, name: 'Jyn Erso', pilot: false }
];

It’s the same as before, except this time instead of asking ourselves if we have a pilot in our ranks, we want the profile of that pilot! Let’s output the value we need using .find() :

var firstPilot = operatives.find(function (operative) {
  return operative.pilot;
});

Even shorter with ES6’s arrow functions:

const firstPilot = operatives.find(operative => operative.pilot);

As you can see the code is exactly the same as with .some() , the only difference is that we changed some for find ! But now, instead of returning a boolean, it will return the first pilot in our list.

Let me emphasize: .find() will return the first match. If more values match your condition, it won’t matter. Only the first match will be returned. If you need a list of all matches, then you should use .filter() instead of .find() .

If no match is found, .find() will return undefined .

Advantages

Using .find() and .some() instead of common loops like .for or .forEach() not only makes your code shorter, but also makes your intent clearer. A loop could be used to do anything, but using .find() states that you are looking for one particular array item. As for .some() , you are clearly checking if the array contains items that fit your needs or not.

Make your code clearer! Use .find() and .some() when relevant.

That’s it!

Hopefully you’ve learned something new. Share the knowledge with your fellow developers!

Do you know of more JavaScript gems that could help the JS community write cleaner, simpler code? If so, leave a comment and I will try to write a blog post about it.

Keep coding!

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

JavaScript Programming Tutorial - Full JavaScript Course for Beginners

Top 10 JavaScript array methods you should know

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

JavaScript Basics Before You Learn React


javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.