4
Jan

Filter Arrays in JavaScript


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. 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 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. 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. 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.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

One Comment

  • Brianna Marie says:

    WOW ! You made this so simple , I instantly subscribed. I plan to use these videos to help with my programming as I am a new learner, Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *