filter Array Method | JavaScript Tutorial

the array filter method creates a new array by removing all the elements for which the callback function returns a faulty value consider it as a test on the items of an array if the item from the array turns true for a callback then we keep it otherwise we remove it well actually it will create a new array and we won't modify the original array let's see how that looks in code we have here a numbers array with numbers from 1 to 6 and let's say we want to create an array with only the even numbers from this array so for that let's create even and we're going to call the filter function on the numbers which needs a callback function this function will get a value and index and the array which is called upon I'm going to write this function here is even we're going to get the value and also the index and array but we don't need it in this case this will go as a callback function here and we're going to return the value modulus 2 equals to 0 now if the remainder of the division of the value e2 is 0 that means we have an even number let's console that flock even and see what we get we get an array of two four and six which is perfect that's what we want another example could be if we have an array of objects representing different persons having a name and an age and we want to see if the person is an adult so it has the age bigger or equal to 18 so let's see how we can do that I'm going to paste in the array of objects and then we can continue alright we have here the array we get name the age the name de genève age and we want to remove the ones that are under 18 so for that let's create an adult array which will be people that filter and let's write this time the callback function as an arrow function here so we get the person person that age greater than equals 18 and now let's console that flog adult and you can see that we only have two remaining buried and Evon because they are at least 18 years old another use case for the filter method is to remove all the duplicates from an array this is more of a fun exercise it's not that here's the practice because we have better options but it's good to understand how the filter function works so let's create an array of numbers again we're going to have 1 2 3 2 1 3 3 4 5 whatever 6 something like that and we want to remove all the duplicates from this array let's it cost nums or something like that and we're going to call the filter function here on the numbers and this time we're going to need all the three parameters so the value the index and the array let's call it array like that and we're going to return something interesting return array that index of value is equal to index let's cancel that work the numbers and see if it works all right look at that so we have an array of all the numbers and removed all the duplicates but how does this work well let's look at the function here with the array we get the initial array on which this filter method is called upon and we're checking if the index of the value is equal to the index provided so let's say for example here the 1 goes here and it will return a 0 as the index right because it's the first index here we're going to check if that is equal to 0 which is the index so that's true the same for - the same for 3 but now when we're checking the index of value 2 because the index of method returns the first occurrence of a value inside of an array it will return the index of these two so then this will return false because index one is not equals with index three from here and then we're going to not push it inside the nums right here I hope this makes sense I hope you enjoyed this tutorial and I see you in the next one bye [Music]

Channel: Florin Pop

Views: 12,640

Rating: 4.9384613 out of 5

Keywords: javascript, javascript tutorial, javascript tutorial for beginners, array method, javascript arrays, higher order function, learn javascript, javascript array methods, filter, javascript filter, filter array method, learn filter, filter HOF

Id: mJGv12UHqXc

Length: 5min 20sec (320 seconds)

Published: Fri Apr 03 2020