Categories
Featured Development Resources HTML/Javascript

Some vs Every vs Filter – Easily Manipulate JavaScript Arrays

If you’ve been writing JS (or any language with a C-style for loops) then you’ve written code that involves looping through an array, and performing some sort of comparison test. 

Manipulation With Classical For Loops

Often times you’ll also have to create a new array like in this example.

arr = [1,2,3,4,5,6,7,8,9,10]
newArr = []
for (let i = 0; i < arr.length; i++) {
	if (arr[i] > 5) {
      newArr.push(arr[i])
    }
}
console.log(newArr)
// [6, 7, 8, 9, 10)

You can also do the same with the For…of loops:

arr = [1,2,3,4,5,6,7,8,9,10]
newArr = []
for (num of arr) {
	if (num > 5) {
      newArr.push(num)
    }
}
console.log(newArr)
// [6, 7, 8, 9, 10)

This is where the newer JavaScript array methods, some, every, and filter come in.  Using these methods along with arrow functions you can write cleaner and shorter code.

The filter() Method

First we’ll go into the filter method as it was introduced first in JavaScript ES5.  With the filter method you can apply a test to each element in an array and if True that element is added to a new array which is returned by the filter method.

arr = [1,2,3,4,5,6,7,8,9,10]
newArr = arr.filter(num => num > 5)
console.log(newArr)
// [6, 7, 8, 9, 10]

You can see that this is much shorter than our previous code.

The every() Method

The every method allows you to check if every element in a JS array passes a condition like this:

arr = [1,2,3,4,5,6,7,8,9,10]
answer = arr.every(num => num > 0)
console.log(answer)
// true

Replacing this for-loop code:

arr = [1,2,3,4,5,6,7,8,9,10]
result = true
for (num of arr) {
  if (!(num > 0))
  {
    result = false
    break
  }
}
console.log(result)

The some() Method

The some method allows you to check if any element in an array meets a certain criteria:

arr = [1,2,3,4,5,6,7,8,9,10]
answer = arr.some(num => num > 5)
console.log(answer)
// true

Replacing this programming pattern:

arr = [1,2,3,4,5,6,7,8,9,10]
answer = false
for (num of arr) {
	if (num > 5) {
      answer = true
      break
    }
}

console.log(answer)

Why No For Each?

You might be wondering why I didn’t use a for each in the looping examples, and the reason for that is that for each should be avoided unless you absolutely want to run through every element in an array otherwise the time cost is as much as running through each element (unless you throw an error).

Should You Always User Filter() Some() and Always()?

You should absolutely use these methods on shorter arrays.  On very large arrays the classical for loop can actually outperform these loops, as always, it’s best to test to see how much time it really takes.

Conclusion

Using the some() every() and filter() methods are a great way to shorten your code and make it more readable.  While the same can be accomplished with good old for loops, being able to shorten your code is always good and it can be really handy on programming tests where your time is limited.