Exercises: Array Reduce - Javascript In Depth

[@tomboolery]

Passing these exercises feels so good, I seriously think I’m retaining more with this playlist than I did with my Udemy course. This is saint-work. Thank you so much.

[@TechWithNader]

Thank you, Tom! I'm glad you're finding these so helpful! I'd love to hear what you think as you progress through the series - don't hesitate to spam questions 🥳

[@404React_Media]

I Agree

[@saroebe]

I was pounding my head against the wall when it kept printing the "A's". OMG! case sensitivity! I love it when things click! Love your channel, and thank you so much for these videos, Nader :D

[@TechWithNader]

You're very welcome, Michelle! Such is the life of a dev, haha! 😂

[@NadezhdaMemelova]

Hi, Nader! I love love love what you do! Found your channel thanks to the mock interview video, and now I'm watching one video a day from the very beginning. Hope to catch up in a couple of months. Very solid, kind and patient explanations of the basics, fun exercises. Please, keep going, I'm a huge fan.

[@TechWithNader]

Hey Nadezhda! Thanks a lot - that really means a lot to hear 😊 Keep up with that schedule because at the end of the day it's the consistency that matters and you'll look back and wonder how you got so far so fast 🚀

[@relja_]

Hey Nader, I love your style of teaching its so intuitive. Been going trough this playlist to refresh my knowledge of JS and to learn new stuff. I hope your channel grows because you really deserve it. Can't wait to go trough DOM videos and for the React series. 🤗

[@snowboardroks]

I usually never comment on youtube videos, but i really wanna thank you for your videos! I was completly stumped onf m!p, filter and reduce and in 2 days i watched all your videos on it and could do the excercised withour seeing your solucions before solving, all thanks to your clear explanation and the well though increase in difficulty in each excercise

[@TechWithNader]

Wow, thanks for sharing this! It really means a lot 😊 I'm also glad the exercises help solidify the knowledge! Don't hesitate to ask more questions or join us on the Discord to chat as you go through the course 🚀

[@nguyennguyen-nm3oq]

I enjoy the progressive structure of each exercise and how you bring bits of the previous exercise forward. This really helps the viewer pick up on the pattern in functional methods within arrays. Thankyou Sir.

[@TechWithNader]

You’re very welcome! 😊 Love seeing these comments from you and the appreciation 🥳 Keep it up!

[@senniagordinskaya4051]

So many thanks for creating such an insightful lesson!

[@JoeMilneEnglish]

Thanks again! Quick Q: For the bonus exercise (not bonus bonus, just bonus, haha). I had this included: const over1000 = squares.filter((squared) => { return squared > 1000; }); but you had: const over1000 = squares.filter((squared) => { if (num > 1000) { return true } return false; } Is yours better?

[@TechWithNader]

Great question! “Better” is definitely context dependent and sometimes subjective haha. But in this case yours is definitely better in my opinion. You can further shorten it too with the arrow function expression syntax 😉

[@Pharizer]

You can also shorten it this way: const nums = [10, 20, 50, 70, 90] .map((num) => Math.pow(num, 2)) .filter((num) => num > 1000) .reduce((sum, num) => sum + num);

[@TechWithNader]

@@Pharizer Yup exactly! Nice! 🤓

[@Pharizer]

For excercise 1 with the code result you provided, if you add a string that starts with "a" as the last element of the companies array, then the "-" will still show up at the end of the returned value from the recude function

[@TechWithNader]

Nice catch! You're totally right, how would you propose it would be best to fix our reduce for this case? 🤓

[@Pharizer]

@@TechWithNader That is a good question! hahha

[@ab_semi]

I added filter() before the reduce and then it worked: const companies = ["apple", "tesla", "nursat", "amazon", 'ebay', "spaceX", "Gail", "aqua"] const filtered = companies.filter((company) => { if (company.startsWith("a")) { return false; } return true; }) console.log(filtered) const modded = filtered.reduce((concatinatedUnity, item, i) => { if (i === filtered.length - 1) { return concatinatedUnity + item } return concatinatedUnity + item + " - "; }, '') console.log(modded)

[@ssolym]

you can add slice() - it removes the last character (which is the dash) from the string. console.log(modded.slice(0,-1))

[@randerins]

On the bonus exercise, this (literally "this", they keyword) worked for me, with the same result: const nums = [10, 30, 50, 70, 90] .map((num) => { return num ** 2 }) .filter((num) => { if (num > 1000) { return this } }) .reduce((result, num) => { return result + num }, 0) console.log(nums) I just impressed myself cause I just threw the keyword there for intuition, I just thought it would make sense!

[@TechWithNader]

Ah, that's a very interesting solution! I didn't even think of this, haha! (No pun intended) 🎉

[@davidkabyemera7454]

Great work brother, keep it up:)

[@brians4265]

In the first exercise , the bonus part I used .slice(0,-1) and it has the same result. Not sure if that was correct but I thought I'd mention it because I founded a bit easier than using a third parameter (i) 😀

[@ab_semi]

as a not a native English speaker, I misunderstood the 2nd exercise. Then after watching how you solved the task, I understood that the term "a sum" actually means all the array-items put together...

[@TechWithNader]

Nice, thanks for this I should be more aware of some of these words for everyone 😊

[@mitesh5189]

Bonus exeprices:- const num = [10,30,50,70,90] const squ = num.reduce(((acc,curr)=>{ let s = curr *curr ; if(s>1000){ acc.push(curr*curr); } return acc; }),[]) console.log(squ);

[@TechWithNader]

Hey Mitesh! Nice work! Love the approach with this one as a comparison to splitting up the map/filter/reduce steps 🥳

[@OXIDE777-is6gs]

const nums = [10, 30, 50, 70, 90] .map((num) => num * num) .filter((square) => square > 1000) .reduce((sum, square) => sum + square) I just enjoy using the shortened versions of arrow functions 🤩

[@TheASAF1991]

תודה!

[@TechWithNader]

Thank you! 😊

[@accgig]

you're the best 🌟

[@hassanegal]

For exercise 2 this is how i did it, i got a few decimal places less than yours though: const prices = [1.23, 19.99, 85.2, 32.87, 8, 5.2]; const afterTax = prices.reduce((accumulator, index) => { if(prices 6){ return prices *1.2; } return accumulator + index; }, 0); console.log(afterTax);

[@TechWithNader]

Hey Hassan! This looks like a good attempt. You want to be careful not to use "prices" inside the reduce, as you should be relying only on "accumulator" and in this case what you called "index". However, your "index" variable in a reduce like this is actually the "currentValue" being iterated on. The index in the third parameter in the reduce function callback. It also looks like you're multiplying the whole prices array so might want to double check that too! If you'd like more help, we have a discord channel setup too for real-time chat and feedback: discord.gg/K4nkugP7Gd Good work so far, keep it up!

[@relja_]

The bonus exercise can be done with reduce only. const solution = [10, 30, 50, 70, 90].reduce((result, num)=>{ num_squared = num * num; if(num_squared > 1000){ return result + num_squared; } return result; },0); console.log(solution);

[@siancalebdomasig5067]

Great set of exercises as always! For exercise 1, I found an edge case when the last element starts with a, so I thought I'd just exclude the last -element- character ;) const modded = companies.reduce((acc, company) => { if (!company.startsWith('a')) return acc + company + "-"; return acc; }, "").slice(0, -1);

[@TechWithNader]

Hey Sian, good catch - well done! These are exactly the kind of questions and cases you should be looking for! 🤓 Can you think of a way to do this to have it work for this case?

[@siancalebdomasig5067]

@@TechWithNader Yeah, as per the code above, it would work as long as I remove the last character (-) on the string returned by reduce().

[@TechWithNader]

Ah I see what you mean - how would we still include the last company even if it starts with an “a” but without the last “-“ because in this case we skip the last if it starts with “a” haha 😂 🤯

[@siancalebdomasig5067]

@@TechWithNader After rereading my comment, I noticed a mistake🤦‍♂ I meant excluding the last character in the string, not the last element.

[@EliHacıyev-p7v]

Thank you so much

[@EliHacıyev-p7v]

Thanks

[@404React_Media]

I try it by only Capitalizing the 1st letter. const items = ['light', 'banana', 'phone', 'book', 'mouse']; const caps = items.map(items => { // return items[0].toUpperCase() + items.slice(1);

[@TechWithNader]

Nice, this would work to capitalize just the first letter of each item 😊

[@sdvasd]

awesime

[@anshsaryal3048]

i do not understand the exrcise 1 can anybody explain me

[@khalilmahmoodiyan975]

Cool

[@khalilmahmoodiyan975]

as I follow the Exercises so DEEP . I noticed that in "Ex 1" if the last index has a value that start with a the dash doesn't go away. 13 : 25

[@KRAKENBACK..]

day8) exercise 1) I used the slice method to get rid of the "-" at the end, but the built in 3rd parameter looks like a better way to do this, Is there any benefit to using the built in reduce parameter vs. using .slice? exercise 2) I got to use the built in function for tax again! The sum I got though was 153.69 vs. your sum of 153.776 so that has me confused but is it because of the limited amount of numbers a computer can process? exercise 3) I created a function that capitalizes the first letter of each word and used the function so it would map over each element in items inside the caps array onst capFirstLetter = (string) => { return string.charAt(0).toUpperCase() + string.slice(1); }; const caps = items.map((item) => { return capFirstLetter(item); everything together ~ const items = ["light", "banana", "phone", "book", "mouse"] .map((item) => { return capFirstLetter(item); }) .reduce((result, item) => { return result + item + " "; }, ""); console.log(items); AFTER WATCHING YOUR SOLUTION IT WAS LITTERALLY CAPPING ALL LETTER LOL FACEPALM🤦 Exercise BONUS) Last one was strait to the point and easy to follow my solution was ~ const nums = [10, 30, 50, 70, 90] .map((num) => { return num ** 2; }) .filter((square) => { if (square > 1000) { return true; } return false; }) .reduce((result, square) => { return result + square; }, 0); console.log(nums); Thank you again for these exercises Nader, spent all day trying to get the concept down and I think its starting to stick!

[@TechWithNader]

Nice work! Getting good at this 🥳 Could you share your code for the different sim you got from reduce? They might differ slightly but not by that much at such significant decimal places 🤔

[@KRAKENBACK..]

@@TechWithNader yea here's my code for exercise 2! const prices = [1.23, 19.99, 85.2, 32.87, 8, 5.2]; const taxedPrice = (tax, price) => { decimalTax = tax / 100; taxedTotal = decimalTax + price + 1; return taxedTotal; }; const afterTax = prices.reduce((result, price) => { if (price > 6) { console.log(result, price); return result + price; } console.log(taxedPrice(20, price), result); return taxedPrice(20, price) + result; }, 0); console.log(prices); console.log(afterTax);

[@TechWithNader]

@@KRAKENBACK.. Ah yes! Very very nice catch and find and question haha! So this is due to how computers process floating point numbers (decimals) and the accuracy degrades especially in calculations like this. It’s surprising to see even with such a simple example but you just proved why in any financial application, we don’t use floating point numbers but instead whole numbers and just multiply by 100 to account for “cents” so like: 1799 instead of 17.99. I’ll need to make a video on this in the future since this enters the realm of computer science and how binary works 🤓

[@KRAKENBACK..]

@@TechWithNader Oh that's why! I was curious why we outputted different results, so would we have to make another function that changes the decimal values of the starting array into whole numbers and then convert that back into a decimal value after taxes are applied to accurately use this in a financial application? or could we just make changes to the first function where we multiply price * 100 and at the end divide 100

[@TechWithNader]

@@KRAKENBACK.. we would probably just keep our entire system in Integers and never use floats at least for the financial parts. We can then just display it on a UI however we want and add the “.” 😂

[@ab_semi]

for the exerc.3 I tried to remove the last space (actually -- in my code), but it seems it is not possible when we squeeze everything into just 1 line, or maybe I am doing something wrong: const items = ["apple", "tesla", "amazon", 'ebay', "spaceX", "Gail"] .map((item) => { return item.toUpperCase() }) .reduce((result, mappedItem, i) => { if (i === mappedItems.length - 1) { return result + mappedItem; } return result + mappedItem + " -- "; }, "") console.log(items)

[@TechWithNader]

Hey Abdugapir! That's odd, this code seems to work? What you're "mappedItems"?

[@ab_semi]

@@TechWithNader , yes, that was a mistake. I replaced it with "items", but JS can not read this line: if (i === items.length - 1) { If I remove all of "if" , it works, without accomplishing my purpose

[@TechWithNader]

@@ab_semi That’s odd, doesn’t seem like anything should break with that line. Do you mind pasting the whole code with this updated line?

[@relja_]

​@@TechWithNaderIts not possible because when you put everything in one line items doesn't actually point to the array (it's not initialized) so it can't give you the items.length. You need to initialize items = ["apple", "tesla", "amazon", "ebay", "spaceX", "Gail"]; // Then do items.map().reduce(); Hope this helps :)

[@rafaelbraz1912]

Hi, I have a doubt, but if the last comapany start with "a", it will result tesla-spacex-meta-google-, then I tried result.slice(0, -1), to remove the "-", but didn't work. Is there some way to do it?