Categories
JavaScript Best Practices

JavaScript Best Practices for Writing More Robust Code — More Ways to Find Items

Spread the love

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at ways to find items in JavaScript arrays.

Finding If Something Exists in an Array Instance With the some Method

The JavaScript some method lets us add a check if one or more items with the given condition exists in the array instance.

It takes a callback with that has the array entry as a parameter and returns the condition of the item that we’re looking for.

For instance, if we want to check if one more entry in the array instance is even, we use some to do that as follows:

const arr = [1, 2, 3];
const result = arr.some(a => a % 2 === 0);

In the code above, we have the arr array, which has one even number which is 2.

Then we called some on it with the callback a => a % 2 === 0 to check if each entry is even, where a is the array entry that’s being checked.

In this case, if some finds an array entry that’s even, which there is, then it returns true . Otherwise, it returns false .

Therefore, some should return true .

The callback can also take the index of the array entry that’s being checked as the 2nd parameter, and the array that’s being run on in as the 3rd parameter. They’re both optional.

Therefore, we can rewrite our example as follows:

const arr = [1, 2, 3];
const result = arr.some((a, index, array) => array[index] % 2 === 0);

And we get the same result as before.

some can optionally take a 2nd argument, which is the value of this that we want to reference in our callback function.

We can pass in our own value of this as follows:

const arr = [1, 2, 3];
const result = arr.some(function(a) {
  return a > this.min;
}, {
  min: 1
});

In the code above, we pass in a 2nd argument, which is the object { min: 1 } .

Then that’ll be the value of this in our callback, so we can use its min property to check if there’re some entries of the array that’s bigger than 1.

Since we also use this in the callback, we have to use a traditional function to reference the value of this .

Then result should be true since there are entries in arr that’s bigger than 1.

This is more robust than looping through the array ourselves and checking for each entry with a loop as it’s well tested and used frequently, so the possibility of any bugs with this method is almost zero.

Photo by Ramesh Casper on Unsplash

find

The array instance’s find method lets us find the first entry in the array that meets the given condition.

It always searches from the start to the end of the array. find takes callback with the array entry as the first parameter of the callback and returns the condition of the array entry that we’re looking for in the array instance.

For instance, we can use it as follows:

const arr = [1, 2, 3];
const result = arr.find(a => a > 1);

In the code above, we have the find method which takes a callback a => a > 1 to find the first item in arr that’s bigger than 1.

a is the array entry that’s being looped through.

Then we should get 2 returned since that’s the first entry in arr from the start that’s bigger than 1.

The callback can also take an index of the array instance that’s being looped through as the 2nd parameter and the array instance as the 3rd parameter. However, they’re both optional.

We can use them as follows:

const arr = [1, 2, 3];
const result = arr.find((a, index, array) => array[index] > 1);

In the code above, we retrieved the entry being checked by using the index to access the array entry instead of getting it from the parameter itself.

So we should get the same result as before.

Like some , the 2nd argument of the find method is the value of this that we want to reference in our callback.

For instance, we can pass in an object and set it as the value of this in the callback as follows:

const arr = [1, 2, 3];
const result = arr.find(function(a) {
  return a > this.min
}, {
  min: 1
});

In the code above, we passed in { min: 1 } as the 2nd argument of find . Then we accessed the min property of the object in the callback by referencing this.min .

Therefore, we should see the 2 as the value of result since this.min is 1 and we’re checking a to see if it’s bigger than 1.

Again, this is an array instance method, so it’s less likely there’re bugs in the find method than writing our code if we want to find an item in an array.

Conclusion

The array instance’s some method lets us check if one or more entry of an array has an item with the given condition.

An array’s find method lets us find the first array entry that meets the given condition.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *