Exercises: For ... Of Loops - Javascript In Depth

[@NadezhdaMemelova]

Pants are a must-have! Thanks for the video.

[@TechWithNader]

Hey again Nadezhda! You're very welcome, haha! "Must" is a strong word 😂

[@Proton_uio]

*Exercise3* I did find another way using maps with for of loops. Since usually maps only have a key-value pair every time we initialize it. This made me look over MDN and found that we can use [key, value] to directly access the key value pair, and as an alternative for a singular like parameter in the for-of-loop like for (const item of items){}. This is my solution: const backpack = new Map(); // object inside a map. We associate keys that are complex like objects. So map is more appropriate here // numeric keys 1-4, and object as value backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); console.log(backpack); /* Map(4) { 1 => { name: 'Sword', value: 300 }, 2 => { name: 'Banana', value: 5 }, 3 => { name: 'Gold Nugget', value: 10000 }, 4 => { name: 'Pants', value: 100 } } */ // Initialize to 0 prior to each iteration of the loop let totalValue = 0; for (const [key, item] of backpack) { console.log(`${item.name}: $${item.value}`); totalValue += item.value; } /* Sword: $300 Banana: $5 Gold Nugget: $10000 Pants: $100 */ console.log(`Total Value: $${totalValue}`); //Total Value: $10405

[@Dhiyaneshkr]

Hi Nader, For exercise 1 I tried this approach. const ages = [10, 42, 15, 22, 11, 74, 39, 2]; const results = []; for(const age of ages){ results.push({ age:age, name:"Dragon" }) } console.log(results);

[@JoeMilneEnglish]

My notes and code for exercise 3 (I basically had to see you do each one to help me step by step for this one... tough.) // Step 1: const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); console.log(backpack); // Step 2: for (item of backpack) { // console.log(item[1].name + ": $" + item[1].value); console.log(`${item[1].name}: $${item[1].value}`); // Uncommented console.log is a nice template string // Commented console.log is an ugly non-template string } // Sword: $300 // Banana: $5 // Gold Nugget: $10000 // Pants: $100 // Step 3: let totalValue = 0; for (item of backpack) { totalValue += item[1].value; } console.log(`Total: $${totalValue}`); // Total: $10405

[@TechWithNader]

Very nice work, good notes! The for of loop at the end must have felt a bit awkward having to index [1] to get the value part of of the pair, but we'll fix this nicely when you get to Destructuring ;) Onwards!

[@tomboolery]

I definitely feel like I may have taken a messier route to answer exercise 3, but I still got it in the end 👍🏼 (not including the lines of code where we created ‘new Map()’ and set the values to it…) Here’s what I drew up: let itemWorth = []; for (let items of backpack){ let backpackObj = items.pop(); console.log(`${backpackObj.name}: $${backpackObj.value}`); itemWorth.push(backpackObj.value); }; console.log(itemWorth); // just did this for myself to ensure the array populated let total = itemWorth.reduce((sum, price) => { return sum + price; }, 0); console.log(`$${total}`);

[@TechWithNader]

Nice work Tom, looks awesome! Don't worry about a messier route to start - a messier solution is better than no solution 😉 Over time, the gap between the messy and good and best solutions narrows as well 🤓

[@KRAKENBACK..]

After a long nights rest, forgetting how many days in I'm in now lol, and finishing my daily cup of blue berries I solved exercise 3 by myself without watching the solution. exercise 3) Firstly) I created a new map called back pack, and set the given entries. ~ const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 100000 }); backpack.set(4, { name: "Pants", value: 100 }); 2nd) let totalValue = 0; //Declaring totalValue and itializing to zero because we will have to find the total of values later on. ~ for (const item of backpack) { //I created a for of loop where it creates a const item everytime it loops over the backpack map. const itemItself = item[1] // We are creating a variable itemItself that contains the right half of the the map gives back so we can retrieve key-value pairs and call them with the property. console.log(`${itemItself.name}: $${itemItself.value}`); //Now we can log the template literal using itemItself calling the items name with .name and value with .value. total Value += itemItself.value; //We want to get the total value so we need to add all values together with totalValue = totalValue + itemItself.value (DONT FORGET TO DECLARE TOTAL VALUE) } console.log(`Total: ${totalValue}`) //Another trust old template literal calling the totalValue And we've found the solution!

[@TechWithNader]

Very nice work! Love the notes, totally spot on! It's awesome to see you get comfortable with this tricky topics! I can't tell if it's just the comment, but your "totalValue" variable would need to be outside the for-of loop for this to work 😀

[@KRAKENBACK..]

​@@TechWithNader Oh yea i think that was on me lol

[@JoeMilneEnglish]

For exercise-1, I got this: const ages = [10, 42, 15, 22, 11, 74, 39, 2]; let results = []; for (age of ages) { results.push({ age: age, name: "Dragon", }); } console.log(results); // [ // { age: 10, name: 'Dragon' }, // { age: 42, name: 'Dragon' }, // { age: 15, name: 'Dragon' }, // { age: 22, name: 'Dragon' }, // { age: 11, name: 'Dragon' }, // { age: 74, name: 'Dragon' }, // { age: 39, name: 'Dragon' }, // { age: 2, name: 'Dragon' } // ] I didn't create a const for the object to then push it to the "results" array, I just pushed it into the array outright. What do you think?

[@TechWithNader]

Yup, this is actually a "better" solution in this case since I never end up using my intermediary object anywhere in the loop apart from just adding it to results. So, might as well just add it directly like you did, nice work! Great questions, you're clearly getting better - keep it up! 🎉

[@JoeMilneEnglish]

@@TechWithNader Thanks a lot, bro! Really appreciate you.

[@senniagordinskaya4051]

Thank you!

[@raulbonillaclaramunt]

thanks Nader ;)

[@Daniel-v8o4t]

Hello Nader, my solution is a bit different, and I would like to know if at some point my solution would be, not wrong, but maybe it makes less sense than yours. My solution : const backpack = new Map() backpack.set(1, {name: 'Sword', value: 300}) backpack.set(2, {name: 'Banana', value: 5}) backpack.set(3, {name: 'Gold', value: 10000}) backpack.set(4, {name: 'Pants', value: 100}) for(const item of backpack) { console.log(item[1].name,`$${item[1].value}`) }

[@TechWithNader]

There are many different ways to do this, looks good!

[@franklicata175]

For exercise 3 i did the following, wondering if its a good practice in a simillar situations: const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); let totalValue = 0; for (const item of backpack.values()) { console.log(`${item.name}: $${item.value}`); totalValue += item.value; } console.log(`Total: $${totalValue}`);

[@TechWithNader]

Hey Frank - this is great! This is a perfect example of where .values makes way more sense, nice work! 😉

[@nobody20022]

for exercise 3 i did this const backpack = new Map() backpack.set(1, {name:'Sword', value:300}) backpack.set(2, {name:'Banana',value: 5}) backpack.set(3, {name:'Gold nugget' ,value: 10000}) backpack.set(4, {name:'Pants', value:100}) let totalItem =parseInt(0) for (const [maps,value] of backpack) { console.log(`${[value.name]}: ${value.value}`); totalItem += +[value.value] } console.log(totalItem); correct me if I am wrong

[@PauloRoque]

Hello Nader, I did the exercise "1" with just this code: const ages = [10, 42, 15, 22, 11, 74, 39, 2]; const results = []; for (const age of ages) { results.push({ age: age, name: "Dragon" }); } console.log(results); What do you think?

[@PauloRoque]

In the exercise 3 i come out with 3 solutions: Solution 1: ************************** const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); let i = 1; valueCounter = 0; for (const item of backpack) { console.log(`${backpack.get(i).name}: $${backpack.get(i).value}`); valueCounter += backpack.get(i).value; i++; } console.log(`Total value of all items is: $${valueCounter}`); Solution 2: ************************** const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); let i = 0; valueCounter = 0; const array = [...backpack]; for (const item of array) { console.log(`${item[1].name}: $${item[1].value}`); valueCounter += item[1].value; i++; } console.log(`Total value of all items is: $${valueCounter}`); Solution 3: ************************** const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banana", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); let i = 0; const array = [...backpack]; const valueCounter = array.reduce((acc, item) => { return acc + item[1].value; }, 0); for (const item of array) { console.log(`${item[1].name}: #${item[1].value}`); } console.log(`Total value of all items is: $${valueCounter}`); Please comment what do you think of this solutions. Thanks

[@keerthanarajamani-bv2mg]

Want for each exercise

[@vagabond887]

for exercise one I think I cheated, I did const ages = [10, 42, 15, 22, 11, 74, 39, 2]; const results = []; for (let age of ages) { results.push({age, name: 'Dragon'}); }; console.log(results); This worked, and printed out the same way. I was confused, because there was no object, and I didn't realize I could just make the object, I thought the goal was to NOT make a separate object.

[@sujeetraut154]

const backpack = new Map(); backpack.set(1, { name: "Sword", value: 300 }); backpack.set(2, { name: "Banna", value: 5 }); backpack.set(3, { name: "Gold Nugget", value: 10000 }); backpack.set(4, { name: "Pants", value: 100 }); let totalValue = 0; for (const item of backpack) { console.log(`${item[1].name} : $${item[1].value}`); totalValue += item[1].value; } console.log(`Total : $${totalValue}`);

[@Abulkhair1995]

I did it myself thanks to you Nader.....without looking at your solution ..... Thanks for being such a nice person const backpack = new Map() backpack.set(1,{name:"Sowrd",Value:300}) backpack.set(2,{name:"banana",Value:5}) backpack.set(3,{name:"gold nugget",Value:10000}) backpack.set(4,{name:"pants",Value:100}) for (const items of backpack){ console.log(items[1].name,items[1].Value) } console.log(`So the Total items in the backpack are ${backpack.size}`);

[@Ceszilla]

Not sure if my solution for #3 is any good :( const backPack = new Map(); let totalPrice = 0; backPack.set(1, { name: "Sword", value: 300 }); backPack.set(2, { name: "Banana", value: 5 }); backPack.set(3, { name: "Gold nugget", value: 10000 }); backPack.set(4, { name: "Pants", value: 100 }); for (const item of backPack) { totalPrice = totalPrice + item[1].value console.log(`Name: ${item[1].name} ${item[1].value}`) } console.log("------------------------------------") console.log(`Total of items in backpack is $${totalPrice}`)

[@TechWithNader]

Your solution look good! Nice work 🥳

[@Abulkhair1995]

Try this NADER const num =[10,42,15,22,34,8,90,8,77,] const results =[] for (const n of num){ results.push({age:n,name:"dragon"}); } console.log(results);