One of the first impromptu code challenges I was given towards the beginning of my bootcamp experience was to create a function that accepts an array and a number and returns true if the array contains the number. I hadn't practiced or encountered this particular problem yet, so my brain started going into panic mode. But by trusting my understanding of JavaScript, I actually came up with a working solution on the spot.
As I've gotten more experience with JS, I like to periodically revisit this problem and see if I can come up with an alternate solution. I've come up with a few at this point and wanted to compare each method!
I made sure all of my solutions worked in the following scenarios:
- The given array does not contain the given number
- The given array contains a single instance of the given number
- The given array contains multiple instances of the given number
Original solution*:
function checkByFilter(arr, num){
let filteredArr = arr.filter(x => x == num);
if(filteredArr[0] == num){
return true;
} else {
return false;
}
}
I created a new variable filteredArr
and set it equal to the filtered version of the original array. I made use of the filter()
method to look at each value x
in array arr
and only return the values that are equal to num
. This means filteredArr
will be either an empty array, or an array containing one or more instances of num
.
With my filtered array, I can use a conditional to test it for the presence of num
. If filteredArr[0]
, the first value in the array, is equal to num
, the return value is true
. If it is equal to anything else (undefined
if the array is empty), the return value is false
.
*Commenters reminded me the conditional is not actually necessary since the ===
will already return a boolean value (thanks, all!). Here is the updated code:
function checkByFilter(arr, num){
let filteredArr = arr.filter(x => x == num);
return filteredArr[0] === num;
}
Alternate solution #1:
function checkByLoop(arr, num){
for(var x = 0; x < arr.length; x++){
if(arr[x] === num){
return true;
}
}
return false;
}
Instead of filtering the array, I used a for
loop to iterate through each element and compare it to the target value, num
. If the condition is not met to allow it to return true
, then the function will return false
.
Alternate solution #2*:
function checkByFind(arr, num){
let foundArr = arr.find(x => x == num);
if(foundArr == num){
return true;
} else {
return false;
}
}
The find()
method is similar to the filter()
method, but it only returns a single value, while filter()
would return all instances of num
if it occurred more than once in the given array. This solution allows me to compare a single-value variable to num
instead of an array.
*As with the first solution, the conditional is not actually necessary. Updated solution:
function checkByFind(arr, num){
let foundArr = arr.find(x => x == num);
return foundArr === num;
}
Alternate solution #3:
function checkByIndex(arr, num){
if(arr.indexOf(num) < 0){
return false;
} else {
return true;
}
}
This is the most efficient solution, as there is no need to save any values to a new variable and there is no need for a loop. The indexOf()
method checks for the index location of the target value num
in the given array arr
. If it is not in the array, it will return an index of -1. So the conditional is used to return false
if the index is less than 0, and true
if it is equal to or greater than 0.
To me, this article represents the evolution of my early JavaScript skills. I enjoy the problem-solving challenge of finding alternate solutions to a functional problem. I will probably do more of these in the future with other common code challenges.
Thank you for reading!
Top comments (8)
Good job, maybe give
Array.prototype.some
a try and if the value you are looking for is not an object, you can also useArray.prototype.includes
Thank you! I'd never heard of .some before, and completely forgot about .includes. That also makes me think I should have expanded my original requirements to include any type and not just numbers. Next time! Thanks again!
I think it should be enough to replace conditional with this statement.
That's for second example. 👌
Much appreciated! I'd never thought to simplify it like that before, even though it's the perfect solution since it returns the boolean value for me. I edited the article to include this - thank you for your comment!
„there is no need for a loop. The indexOf() method...“ ... will do the looping for you.
Still it‘s easier to read and therefore to maintain.
Add js after 3 symbol to color code.
I did not know that was a thing!! Thank you!
Didn't think of that one! Thank you!