Ever wanted to filter an array by using certain conditions in javascript without having to use a for loop or the map method? I’m going to show you how to use Javascript .filter() method like a pro. Learn how to use Javascript Filter Method on Arrays with Objects, Strings, and Numbers.




Javascript Filter Method Syntax

let newArray = array.filter((item) => condition)
// or 
let newArray = array.filter((item) => {
 return condition
)
// u can also pass in 2 other arguments which are index and array which has the original array.
let newArray = array.filter((item, index, array) => condition)

Filter array of strings in Javascript

Let’s say you have a list of names but you wanted to remove all the names that don’t match the name ‘Rob’

let names = [
  'James',
  'Billy',
  'Raul',
  'Bob',
  'Rob' // remove all names except 'Rob'
]

So to filter out everything except ‘rob’ from this array we will use the filter method and inside we will pass in a function (callback) with an argument called name and name will represent each item in the array. Then we will return our condition if the name does match ‘rob’ keep in the array and the rest remove it from the array. Also, what’s interesting about the filter method is that it will return a new array so the original.

let names = [
  'James',
  'Billy',
  'Raul',
  'Bob',
  'Rob'
]

names = names.filter( (name) => name == 'Rob')

console.log(names)
// this will return
// [ 'Rob' ]

We can also reverse this by putting the condition if the name doesn’t match Rob return a new array with all names except Rob.

let names = [
  'James',
  'Billy',
  'Raul',
  'Bob',
  'Rob'
]

names = names.filter( (name) => name != 'Rob')

console.log(names)
// this will return
// [ 'James', 'Billy', 'Raul', 'Bob' ]

Filter array of numbers (integers) in Javascript

The same thing I just showed you with a string you can do with numbers(integers). For example we have 6 numbers in an array from 1 to 100 but we want to keep only the numbers above or equal to 50.

let numbers = [
  1,
  23,
  48,
  50,
  77,
  100
]

numbers = numbers.filter( (number) => number >= 50)

console.log(numbers)

// will return
// [ 50, 77, 100 ]

Filter array of objects in Javascript

The most useful way to use the filter method is when you have to filter an array of objects, especially when dealing with data and API results. So let’s say we have a group of users but you want to remove all the ones that are younger than 18 years old. This is easy with the filter method because all we need to do is return a condition that matches the user’s age property to 18 years old or older and then it will remove everyone under 18 from the array.

let users = [
  {
		name: 'Billy',
		age: 16,
		city: 'NYC'
	},
	{
		name: 'Ben',
		age: 21,
		city: 'CT'
	},
	{
		name: 'Brody',
		age: 46,
		city: 'FL'
	}
]

users = users.filter( (user) => user.age >= 18)

console.log(users)
// will return
// [ { name: 'Ben', age: 21, city: 'CT' }, { name: 'Brody', age: 46, city: 'FL' } ]

Need More Info?

Check the Mozilla documentation for more information

Conclusion

As you guys can see learning to the Javascript Filter Method is not that difficult and can be used for some many different situations so I recommend getting used to using it. Now if you like this tutorial and looking to learn how to code Javascript I would suggest you sign up to codingphase.com where we give you over 50 courses everything from HTML, CSS, Javascript, PHP, Node, Ruby, Python, and many more courses for just $20 dollars. Try codingphase.com and get your first month 50% OFF!