Exercises: Array Filter - Javascript In Depth

We go through several practice exercises on arrays and filtering over arrays with Array.filter() in Javascript.
This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: • Javascript In Depth
Chapters:
00:00 Introduction
00:12 Warmup Exercise
04:55 Exercise 1
12:01 Exercise 2
15:57 Exercise 3
20:50 BONUS Exercise
30:40 Next Steps
📦 Github Repository with the notes and exercise code+solutions: github.com/Nooder/javascript-...
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader

[@Psycho360x]

These videos aren’t getting enough views, the explanation is easy to understand with a great learning pace. You should be more popular:)

[@OXIDE777-is6gs]

HiNader and everyone else, I solved the last exercise in one line : let nums = [10, 20, 30, 40, 50].map((num) => num * 2).filter((num) => num > 50); ↑ this is because, for the arrow functions, if it can be written in one line, you do not need to use {} as well for return kw, it will return by default. Awesome video, thanks! I worked individually on every exercise.

[@nanlunglongtau2076]

It works but it is not clean code

[@nanlunglongtau2076]

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

[@JoeMilneEnglish]

Some people like sunsets, we like const nums = [10, 20, 30, 40, 50] .map((num) => { return num * 2; }) .filter((num) => { if (num > 50) { return true; } } );

[@TechWithNader]

Hah! When you learn and add a .reduce, it might even beat ice cream! 😲 Also, Try it with the shorter function syntax since it applies well in this case and it will become one truly beautiful sunset 🌅

[@akram5960]

1) Incase of filter - we have to explicitly return true or false in required cases. 2) we are not manipulating the elements of an array (as in case of array.map), we are trying to get rid off certain elements of an array.

[@MauFerrusca]

Bonus answer, as short as I could: const result = nums.map(num=>num*2).filter((num)=>(num>50?true:false))

[@JoeMilneEnglish]

As I said in the practice array filter video, I learned the shorter code. So, for the bonus exercise I had: const nums = [10, 20, 30, 40, 50]; const timesTwo = nums.map((num) => num * 2); const over50 = timesTwo.filter((num) => num > 50); console.log(nums); // [10, 20, 30, 40, 50] console.log(timesTwo); // [20, 40, 60, 80, 100] console.log(over50); // [60, 80, 100] My question is... is this bad practice? Is it better to make the code longer and therefore a bit more explicit (with return statements)? Or does it depend? Cheers, Nader!

[@TechWithNader]

It’s an important question! You can probably assume that people who are working with JS know the shorter syntax. Though, sometimes you’ll see people try a bit TOO hard to fit it in to the shorter expression when it’s definitely clearer without. So it really depends on how much logic is happening in the line or evaluation 😃 This and similar short evaluations is an example where I’d argue the shorter syntax is preferred.

[@JoeMilneEnglish]

@@TechWithNader Understood. Thanks a lot, mate!

[@404React_Media]

If possible could you do a video on the forEach method Array.

[@TechWithNader]

Great question! I actually purposely skipped forEach because it can get super confusing and it’s functions can be done by other methods relatively easily. The most glaring limitation is that you can’t break out of a forEach loop easily if you need to 😄

[@issamchaaban9843]

const nums = [10, 20, 30, 40, 50] .map((multiple) => multiple * 2) .filter((overFifty) => (overFifty > 50 ? 1 : 0)); console.log(nums);

[@KRAKENBACK..]

Hey nader, on exercise 2 I decided to challenge myself and see if I could make a function that would determine the sales tax if u gave it 2 inputs (tax and price) and then I used the function inside the lowPrices array. I just wanted to see if the way I set it up was good practice or if i should change anything. const prices = [1.23, 19.99, 85.2, 32.87, 8, 5.2]; const taxedPrice = (tax, price) => { decimalTax = tax / 100; taxedTotal = decimalTax + price; return taxedTotal; }; console.log(taxedPrice(15, 1.23)); //seems good const lowPrices = prices.filter((price) => { if (taxedPrice(15, price) < 10) { console.log(taxedPrice(15, price)); return true; } return false; }); console.log(prices); console.log(lowPrices);

[@KRAKENBACK..]

not sure if i need to add decimalTax = (tax / 100) + 1; this was just an experiment of mine to see if we could call functions inside of arrays while we are using a function method on them.

[@KRAKENBACK..]

ALSO THESE EXERCISES WE SUPER HELPFUL

[@TechWithNader]

Good question about the function with filter! This is totally acceptable - actually I'd say it's even preferred once the function is too long to inline in to the filter arrow function itself. I'd say anything over like 5-10 lines should probably be extracted to a separate function like you did 😃

[@sheryianirfan]

This is my solution for no 3 i thing we dont need if statement here. const values = [[1,2,3], [0,0,1], [3,6,9], [0,1,2]]; const hasTwo = values.filter((two)=>{ return two.includes(2) }) console.log(values) console.log(hasTwo)

[@comminatinmarkitingdealwit5614]

const nums = [10, 20, 30, 40, 50] .map((num) => num * 2) .filter((num) => num > 50); this is my bunnies problem result. You told to us that this is not good for understanding purposes. If i write like this then i remove the extra 2 return statements right. By doing this the code become more efficient or same?

[@user-bw4yi7oc4y]

Hi! My solution for prob 2 and bonus prob: prob 2: const prices = [1.23, 19.99, 85.2, 32.87, 8, 5.2]; const lowPrices = prices.filter(price=>{ let billAmt = price + (price*15)/100; console.log(billAmt); return billAmt < 10.00 ? true :false // used ternary operator }) console.log(lowPrices); console.log(prices); bonus prob: const over50 = nums.map((num)=>{ return num *2 }).filter((num)=>{ return num > 50 ? true : false // used ternary operator }) console.log(over50);

[@TechWithNader]

Nice work! Here's something cool you can do if you find yourself doing the true/false ternary, you can shorten it to something like this: return billAmt < 10.00

[@user-bw4yi7oc4y]

@@TechWithNader sure i will try this

[@battleyt7655]

One-liners 😂 const numbers=[10,20,30,40,50] const over50=numbers.map(num=>num*2).filter(check =>check>=50); console.log(over50)

[@sheryianirfan]

my solution for ex... 5 const nums = [10,20,30,40,50]; const timesTwo = nums.map((num)=>{ return num*2 }) const over50 = timesTwo.filter((val)=>{ if(val >= 50){ return true } }) console.log(nums) console.log(timesTwo) console.log(over50)