00:00 Hey, it's Deeksha Sharma from bonsaiilabs. Welcome to the series on JavaScript. Today. In this video, we will cover how to filter elements from an array filter() is a method available on JavaScript arrays that allows us to filter elements and return a new array containing just the elements that meet the condition of the filtering. Let's look at the syntax now. To filter the elements from an array we call array.filter() and pass the callback function that is invoked for every element in the array. It then constructs a new array containing just the filtered results. Now this callback function contains the condition of filtering and only elements that meet the condition are added to the resulting array. A quick piece of information about filter is that it's a higher order function, which are those that accept another function as argument. Let's run through an example to see how filter works.

00:46 We have an array containing usernames. Our goal is to filter out user names that are valid strings and remove anything that's not a string filter() method allows us to do that. We call userNames.filter(), now filter() takes as argument a function that gets access to every element inside userNames array. This is our callback function. Our goal is just to filter out the valid strings and we do that using typeof operator in JavaScript. Once every element is checked for this condition, a new array is returned and if you notice we are able to filter out the undefined and null from the final result. A terse form of the above code would look like this. The callback is now an arrow function with no return statement. So now let's write some code on the editor to apply filter() method on the arrays. Let's say we have the same userNames array we saw in the example. Now our goal is to just filter out valid strings and remove everything else that's not a string. And to do that, we declare a variable called filtered where we want to store the results. We apply userNames.filter() method

01:52 and pass it a callback function, which is an arrow function. In our case, all we need to check is if type of this name is equals to, strict equality string. Now we also want to log the value of filtered and we do it using console.log() and now when we run this code, the resulting array just contain valid strings. It doesn't contain undefined or null values that were present in userNames array. Now to verify that we did not change the userNames array, let's log the value of userNames. Now when we run it, you can see that userNames array is as-is. filtered is a new array that got created and stored inside the filtered variable. Now let's try it another example where our goal is to filter out usernames that are at least seven characters long.

02:40 we will be using the same filtered variable to store the results. We will call userNames.filter() method passing a callback function, which is an arrow function in our case, we will check typeof name should be string and the length of that string should be greater than or equals to 7. We would also like to log the value of filtered variable, so we do that using console log. Now when we run it, it seems like all the usernames had a length greater than seven. Now let's try to work with another example. userSalaries is an array where every element is an object containing the username and its salary and our goal is to filter out the user salary objects where salary is greater than say 3000 we use the same variable filtered which stores the results and we call filter() method on userSalaries array, which takes in a callback function and this callback function will be executed on every item inside the array and we check if item.salary is greater than 3000 return the results.

03:44 We would also like to print the array that's returned by filter() method and we do that using console log and let's try to run it. As you can see, it filtered all the items in the array where the salary is greater than 3000 but the resulting array also contains items where user is null and an empty string. That's because we never applied any filter criteria on user. Let's filter them out. So right here we will check if item.user is truthy, which means it's not undefined, null or an empty string, and that's it. Now, when we run it, the resulting array contains just one object where user exists and the salary is greater than 3000 and these are some of the common scenarios where you will use the filter() method. I've added these examples in the description link below. Be sure to check them out. I hope this quick session was useful for you. If you have any questions, feel free to drop the comments below and subscribe to this channel if you haven't already, you will get these weekly byte-sized focused videos. Until then, keep learning and share your knowledge.