16.8: Array Functions: filter() - Topics of JavaScript/ES6 

How’s the Programming world now

@@olatunbosunopeyemiademola1761 🤣🤣

Right I’m fairly sure reduce just iterates through the values of the array and passes them through a function, but filter quite literally filters out (in? I don’t know)

Often readability comes with experience. The first time you see a ternary or an arrow function it may look insane. Then you see it a few more times and it’s no big deal. As an engineer you have to know the syntax. It’s the logic that must be reasonable. You can abuse functionality to do weird things. It’ll work, but it’s bad practice. This makes code less readable.

The Underscore _ Identifier A convention has also developed regarding the use of _, which is frequently used to preface the name of an object's property or method that is private. This is a quick and easy way to immediately identify a private class member, and it is so widely used, that almost every programmer will recognize it. This is particularly useful in JavaScript since defining fields as private or public is done without the use of the private and public keywords (at least this is true in the versions of JavaScript used in web browsers - JavaScript 2.0 does allow these keywords). Note that again, as with $, the use of _ is merely a convention and is not enforced by JavaScript itself. As far as JavaScript is concerned, $ and _ are just ordinary letters of the alphabet. Of course, this special treatment of $ and _ applies only within JavaScript itself. When you test for alphabetic characters in the data, they are treated as special characters no different from any of the other special characters.

Behind the scenes they would use a for loop. Not all are the same. Some of these like .find() does not iterate until the end. When it finds what it’s looking for it will return early. Makes it more efficient than a filter or a forEach or a map. Additionally, a lot of these create a new array. There are space and time costs associated with that.

Write a function to check if one string matches the results. Call that function with filter. const heroFunc = str => (do work); arr.filter(heroFunc) So long as heroFunc looks at a string and returns true if it meets requirements and false otherwise, that will iterate over each element in your array and run the heroFunc on it. If it returns true, then it goes into the new array of filtered elements to be returned.

Filter is higher order. You can pass it any function. The function you pass it can use a for of loop. 👍

How long it takes will depend on the work being done. You have to loop over every element. You will need to make a new array. The work required to identify what to place into the new array is the only thing that can make this more costly. If you have to reference another array this won’t be O-N. Unless you can convert the second array to a set or object to give you constant look up … or maybe a heap or a tree to give you O-Log access.

arr.filter( subArr => subArr[2] === true) You have matrix. The array has a bunch of elements. Each of those elements is an array. If each of those ALWAYS has a 3rd element (index 2) that is a Boolean and you want the true values …. Iterate through the matrix (with filter) At each element check index 2 to see if that element at index true is a Boolean of true.

This workflow video might help: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HZ4D3wDRaec.html Also: sublime text: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UCHzlUiDD10.html atom editor: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d3OcFexe9Ik.html

great job, That video helped me a lot. Love your effort

I think it might actually be slower! From what I understand, these features do not increase performance.

@@TheCodingTrain ooh good to know! I might need to do some more research on it then just go be sure :)

It may even not matter as this question was posted 1 year back, but first we will filter,then use map...

You can use them in any order. You have stuff …. Do you want to make a new array with the same number of elements? Map them. You have stuff … do you want to eliminate some of the elements? Filter them. If you need to run a function on everything to get it into the right state before you filter …. Map then filter. If stuff is already in the right state for you to filter and you need to run a function on the filtered things (like … who has today as their birthday? Wish those people happy birthday. That saves work because otherwise you would wish everyone happy birthday then filter down to the people who have today as a birthday) What you need to do will depend on your situation.

Bad habit to call a thing data, then iterate over what data contains and call each thing within data by the same variable name. const leaveTypes = new Set([‘vacation’, ‘sick’ ….]); const onLeave = people.filter(person => leaveTypes.has(person[2])); Sorry I’m on my phone and I can’t refer to your question while answering. Put the strings that are the status you’re searching for in a set. This gives you constant look up for them. One computation instead of checking 3 things iteratively. If that sounds scary you could instead use .find() or .includes() but those take longer to run. Once you have your set Array.filter(element => set.has(element[index])) You’re saying …. I’m looking over an array. I’m looking at an element. I want to know if this element at this index has anything inside this set of data.

​@@zero11010 Thanks for your answer. I have solved the problem and got the solution from another comment on another channel about a year ago, here it is: var leaveFilter = data.filter(data => {return [ "Annual Leave", "Vacation leave", "Sick", "Important leave"].includes(data[1])});

@@ConsulthinkProgrammer that works. With that soliton you have a nested loop you’ve built. With so few things to iterate through it doesn’t matter a ton. Using a set would offer better performance. But, both work!

@@zero11010 thanks again for your tips, I will learn and practice to use set also for this case :)

It’s pretty simple. It would be exactly what you think. Make an array to return. A for loop. Run function on element If the output is true Place element into array to return. When loop is complete return array. There isn’t another way to do it. The code isn’t magic.

Filter runs a check on each element to see if it’s true. If it is true, it is placed into a new array and returned. So this will loop over an array. It will look at an element and run Boolean on it. That will compare return true if the element is truthy. 1, true, ‘Cat’, [9] are truthy An empty string, the number 0, undefined, null and false are all falsey type elements. Run the code in node.

Start with the MDN docs. Those are not the same in output. Map runs a function on each element and returns an array of the same size. In your example you make a new array with the same size and each element is a Boolean. In the second array you filter out the odd numbers. You could use forEach to do what either of those do.

num%2 where "%" is modulus, meaning if the number is divisible by 2 and the remainder is 0, then the condition is True. So return true. But notice later at 5:12 he says x%2==1, meaning if the remainder is 1, then return True. Remainder 1 would be any odd numbers. Hope that helps a bit

@@jcjobin Hey man, thanks for the reply. My question is directed towards why there seems to be a hidden "if condition" when you write (num%2==0) after return because you didn't actually write the "if" words there. My question is not directed towards what is the modulus operator or how it works.

@@brucelee7782 Oh I see, yeah, the statement "num%2==0" will result to either "true" or "false", so returning a boolean is all we want to do in that case

@@jcjobin my question is WHY will it? Nevermind I found out that it is because of the == operator. Kinda obvious but I never considered putting this expression after the return statement.