JavaScript Array Methods: filter()

[MUSIC] 0:00 Hey everyone, Dustin here back with another quick array method guide. 0:09 This time we'll be covering filter() 0:12 It's pretty simple, and as the name suggests, 0:15 we can use this method to filter out array elements. 0:17 Check the description or teacher's notes below for extra resources, 0:20 as well as a related blog article if reading is more your thing. 0:24 If you're ready, let's write some code. 0:28 All I have is an empty project opened in VS Code, 0:30 I'll create an app.js, and run this file with Node. 0:33 If you're unfamiliar with Node or don't have it installed, you can run all of 0:38 the following code in your browser's console if you'd like to follow along. 0:41 I'll quickly go over how this method works with a simple demonstration. 0:46 And then I'll set up a bit more of a complex example and 0:49 have you figured it out. 0:52 So let's get started. 0:54 Let's create a variable called numbers and 0:56 set it equal to an array with some numbers. 0:58 We can use [10, 20, 30, 40, 50] 1:01 Let's say you wanted to get all numbers from this array that are greater than 22. 1:05 This is how we can do it. 1:09 Let's create a new variable named higherThan22, and 1:11 we'll set it equal to our numbers array with the filter() method. 1:14 Inside this filter method we'll write num with an arrow function, and 1:19 then num, followed by the greater than operator, and then 22. 1:23 Now, let's console.log this higherThan22 variable. 1:28 You can see we get back an array with 30, 40, and 50 inside. 1:42 So let's break down this code and figure out what we just wrote. 1:46 We have our numbers array and then the filter() method. 1:50 Inside the method you see num with an arrow function and then num, 1:53 the greater than operator, and then 22. 1:58 But where did this num word come from? 2:01 Well, this is the element parameter that we have access to with 2:04 the filter() method. 2:07 This is a variable that holds the reference to the current array element 2:08 being processed. 2:12 Filter basically loops through your array and performs the logic or 2:14 function that you provide. 2:17 Each time through this loop, the value of the current element being processed 2:18 will be referenced by this num variable. 2:22 You can name this anything you'd like, but it's best to be descriptive. 2:25 So the first time through the array, num holds the value of the first array item, 2:29 which in this case is 10. 2:33 It runs the logic we've written to test if num, or 10, 2:35 is greater than 22, and it's not. 2:39 So it then proceeds to the next array item, 20. 2:42 20 is also not greater than 22, so it moves to the next array item again. 2:46 30 is greater than 22, so it adds it to a new array and 2:51 stores it into our variable that we set up, higherThan22. 2:54 This process continues until there's no more items in our array to loop over. 2:58 The ending result is a new array with only the items that were a result of our 3:03 function. 3:07 So higherThan22 holds an array with the numbers 30, 3:07 40 and 50, excluding 10 and 20, pretty simple. 3:12 So, does filter work with strings? 3:17 You bet! Let's take a look at how we can filter array elements with strings. 3:20 We have here an array named students. 3:25 Inside of our array, we have an object for each student containing a name, age, and 3:27 eyeColor property. 3:31 We'll want to filter out all students with brown eyes. 3:33 So let's give this a try. 3:36 I'll create a variable named brownEyedStudents and 3:38 set it equal to our students array with the filter method. 3:41 Inside the filter method, I'll write student, an arrow function, and 3:46 then student.eyeColor. 3:49 We're writing .eyeColor because the element parameter that we are using, 3:52 which is set to student, holds a reference to the array element, 3:56 which is the entire object. 3:59 So we'll need to get the eyeColor property from this object. 4:02 Then we'll write is strictly equal to the string of brown. 4:06 We'll console.log our new brownEyedStudents variable, and 4:10 we'll see that we get back an object for George and Beth, 4:14 since both have the eye color of brown. 4:17 Pretty neat. 4:23 Now I wanna give you a challenge. 4:25 See if you can create a new variable named under30 and 4:26 have it equal to all the students that are under the age of 30. 4:30 Pause the video now and give it a shot. 4:34 Hey, so were you able to figure it out? 4:40 If so, awesome. 4:42 If not, that's totally okay, let's write the solution together. 4:44 The first step would be to set up a new variable and name it under30. 4:48 I'll set it equal to our students array .filter() 4:52 And inside this .filter method, we'll write student with an arrow function and 4:55 then student.age, the less than operator, and then 30. 5:01 I'll console.log our new under30 variable. 5:06 And sweet, we get back all the students that are under the age of 30, 5:13 which are Kelly and George. 5:17 That about wraps it up for this array method. 5:19 I use this method a ton in my projects and I think you will too. 5:22 Way too often you'll need to filter data based on certain conditions, and 5:25 this is the best way to do it. 5:29 I hope this guide helped and I'll see you in the next one. 5:31 Until then, have fun and happy coding. 5:33

You need to sign up for Treehouse in order to set up Workspace

Sign up