Array Filter - Javascript In Depth

[@timothyrees6318]

I don't always comment on every video, but please know that you are doing an amazing job, you are providing so much insight and clarity and every single video is incredibly helpful! Thank you for sharing your knowledge with us!

[@TechWithNader]

Thanks Timothy! You're very welcome - I'm glad you're powering through these and learning a lot! Keep at it! 🥳😊

[@senniagordinskaya4051]

Thank you for your dedication and patience in creating these videos! Just know that you are helping so many people. There will be a day when all of them go viral!

[@nanlunglongtau2076]

I am liking and commenting on each video so that this channel can get more views

[@IEddits]

Thanks again for these Nader the level of effort in these videos is insane! I have struggled with map and filter before today but it has finally clicked :) Having watched you explain the diagrams, documentation, your own code examples and then trying the exercises by myself is really the best way to learn. Can not wait to catch up with the rest of the videos! keep up the amazing work!

[@TechWithNader]

Thanks so much - really it means a lot and helps me keep going with these! I'm really glad the format is working out well as it's very different from other content like it on youtube, haha. Thanks again for the encouragement and I can't wait to see you crush Javascript and start building some cool projects to show off 😉

[@TopG-r3y]

Great Job Nader!!! Keep It Up

[@OXIDE777-is6gs]

great video, thanks a bunch!

[@Cl8tn0822]

Love watching your content Nader! Thanks

[@JoeMilneEnglish]

From the MDN documentation (love MDN now, thanks to you!), I noticed that we could simplify the example code you gave us, couldn't we? Let's say: const cities = ["madrid", "vancouver", "mumbai"," new york", "lima"]; We could simplify the array filter from: const mCities = cities.filter((city) => { return city.startsWith("m"); // .startsWith is an inbuilt method }) to: const mCities = cities.filter(cities => cities.startsWith("m")); but is it OK that there isn't a return statement?

[@TechWithNader]

Yup you’re right! This is a newer “arrow function expression” syntax that works perfectly for examples like map and filter or reduce. Just didn’t want to add too much at once 😄 This style works with functions that have one parameter and one expression that is immediately returned.

[@JoeMilneEnglish]

@@TechWithNader Perfect, thanks!

[@stephybro888]

Is this a valid solution Nader? I suppose the function returns true or false without explicitely writing it. I consoled.log typeof (num % 2 === 0) in every iteration and it returns a boolean in every single case. Why writing an if-else statement which is much longer? const nums = [5, 6, 7, 8, 9, 10]; const numEven = nums.filter((num) => { return num % 2 === 0; }); console.log(nums); console.log(numEven);

[@JoeMilneEnglish]

Sorry, another question... // Let's say: const nums = [5, 6, 7, 8, 9, 10]; const evenNums = nums.filter((num) => { if (num % 2 === 0) { return true; } return false; }) console.log(evenNums); // [ 6, 8, 10 ] // why not [ 5, true, 7, true, 9, true ]? // why doesn't it return the booleans as the conditional statement suggests? // Also, this is a shorter version, isn't it?: const nums = [5, 6, 7, 8, 9, 10]; const evenNums = nums.filter(nums => nums % 2 === 0); console.log(evenNums); // [ 6, 8, 10 ] Sorry! Full of questions!

[@TechWithNader]

Good question! Filter will look at the return value of the function to either keep or not keep the item (true and false respectively). It never actually puts true or false in the array spot (like map might). A result with the Boolean’s and the numbers is kinda more like map, where you’d do this: nums.map(num => { if (num % 2 === 0) return true; return num; }); Here’s the docs for the shorter arrow function expression syntax courtesy of our friends at MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[@JoeMilneEnglish]

@@TechWithNader Now I get it 100%! Thanks! On to the exercises!

[@TechWithNader]

@@JoeMilneEnglish 100%! What a statement, haha! Love it! These really are used everywhere so that brings me comfort to hear that (as it hopefully does to you haha).

[@comminatinmarkitingdealwit5614]

if my code doesn't return anything then what's happened in my new array. I am going to get an empty array. Can you clean about how the filter work like shallow copy

[@kewner8556]

If the callback function doesn't explicitly return anything, it automatically returns undefined. And since undefined is a falsy value, the current item will not be added to the new array.