JavaScript Array Cardio Practice - Day 1 -  

The Odin Project we grinding!

1) .filter(): 1:17 1.1) console.table(): 2:48 2) .map(): 3:55 3) .sort(): 5:16 4) .reduce(): 7:47 **Did this 'cause I come back constantly.

10:08 I've just the started files and the exact same code, but instead of 523, I get 861. It took me too long to realize that I have more people in my inventors. I'm going to post my comment in case someone else also has more inventors on their list and wonders why their answer is different too.

Here from the Odin Project. If you're having trouble understanding these, look at the documentation behind each method and really understand what its doing since he doesn't explain it in this video, he just explains what it does and how to use it. I spent 3 hours looking at the documentation for each one to truly understand the behind-the-scenes.

I might be late to the party but I found your videos via the Odin Project. I really like that this gives me a few things to practice as I try and learn how to make JavaScript do what I want it to do.

5 years, and this video still invaluable, best content of javascript to learn array methods

console.table!! Nice!!

congrats if you have made it this far in The Odin Project, a lot of people quit here as it gets harder keep going champ!

I LOOOOOVE seeing you tighten up/reduce the size of the code. That is so freaking helpful.

This guy is brilliant, he is very talented but still feels how tough it is for beginners and showcases his coding for all levels. Doesn't give it the big I AM like a lot of programmers do but is humble and helpful to all. Bravo.

I'm barely keeping up with what's happening in this video but I'm very impressed by it all! I hope I can learn and master all these skills with time and practice!

These array cardio videos as a FANTASTIC IDEA! What a great concept to improve on the fundamentals! Would love to see more videos likes this!

instead of returning 1 and -1 you can also do this using, // ordered list from oldest to youngest const ordered = inventors.sort((a, b) => a.year - b.year); console.table(ordered); // sort by years lived const oldest = inventors.sort( (a, b) => b.passed - b.year - (a.passed - a.year) ); console.table(oldest);

"Bennington, Chester" [starts crying]

Loved the video.But loved even more what the people from odin project are commenting. They share what is being missed here and what to do about it with respect to the course.Thank you to all these peeps.Thats how a healthy community should be.

For sorting the people by last name, since they have the last name first, just using people.sort() like that seems to work. It is nice to learn about splitting them up first and separating the specific parts to sort them.

this is just what I needed! Your way of explaining these subjects is great!

As a beginner, I really hope to be on your level one day. You look like a Dev God from where I am sitting right now lol.

The one working with information from Wikipedia was absolutely great. I felt nice doing it. Thank you

like!! Im not lying nor exaggerating when I say that I indeed learned more of than what we are supposed to learn with this perfectly done video thanks to each of those single little extra steps you bother to quickly show to us. VERY important ones, regards!

filter -> takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array. map -> used for creating a new array from an existing one, applying a function to each one of the elements of the first array reduce -> deduct the array into a single solution, can return anything depends on the accumulator you have (either a number, an array or an object...) sort -> arrange or reverse the original array based on the condition These are all array method that would not change the original array, but return a new array or solution. --> console.table is really nice way to show the data in console

This challenge is just what I have been looking for!

Thanks for the tutorial, i like when you use first function then when you make it arrow function, it makes it easy for beginners to follow and understand.

Just wanted to say these video's are great! I'm only a few months into learning anything programming and this one in particular has really helped me understand Array methods, Thank-you! :)

Your are Great and recommended by Steve Stiffith, most formidable javascript teacher. Thank you for doing all these for us.

Thank you, Wes Bos. These practices help a lot in my learning journey.

Thanks for your work, Wes. I'm learning a lot.

The Odin Project team, please keep going! If you are coding along please pay attention that your total years lived might not match - that is okay, unlike the video the correct answer is 861 for your case(because the number of inventors have gone up in the code.)

Hot tip for young players people.sort() works for 7. The default behaviour of sort() with no parameters is to sort by ASCII. Because the names Strings already start with the surname, literally all you need to do is use people.sort(); Also, for numerical sort, sort((a, b) => {return a - b}) works. Because if a is bigger, you return a negative number. If equal, you return 0. If smaller, you return a positive number. This is all in the docs.

For everyone saying he doesn't explain, yes he doesn't. Pause the video, go read about the method/function in the documentation, make stuff with what you have learned from it then start the video again, if you dont do this you wont learn. Also, shout-out to the Odin Project!

Another invaluable video. I'm really enjoying this 30 day JS course. With every video, i understand how things work in JS. Plus I learn much simpler and better ways to do things with JS. I cannot thank enough!😁

Wow, Another seriously underrated JS tutorial. I also came here via Odin Project. Liked and subscribed. Thanks Wes Bos.

Love you Bos. You are the greatest teacher I've ever met. Truly. We appreciate your ability to spark the interest. Best regards!

Awesome video incredibly helpful !! Currently doing the Odin Project and this was just incredible!

Thank you so much!!!!!!!!!!! I screen-shotted each of the exercises to copy and practise in my own time..... I have been a bit overwhelmed by es6 probably because my javascript isn't yet rock solid

const inventors = [ { first: "Albert", last: "Einstein", year: 1879, passed: 1955 }, { first: "Isaac", last: "Newton", year: 1643, passed: 1727 }, { first: "Galileo", last: "Galilei", year: 1564, passed: 1642 }, { first: "Marie", last: "Curie", year: 1867, passed: 1934 }, { first: "Johanne", last: "Keppler", year: 1571, passed: 1630 }, { first: "Nicolous", last: "Corpenicus", year: 1473, passed: 1543}, { first: "Max", last: "Planck", year: 1858, passed: 1947}, ];

7:11 "ternary" is actually a simpler word than you're thinking. It's just Turn-Ary. Very similar to canary (the bird).

7:39 The sort() by birthday part can be written without even using ternary operator like this: const ordered = inventors.sort( (a,b) => a.year - b.year )

thank you so much,, love ur video series!

this was the next level content I needed for my javascript skills

I totally understand your videos, your speaking is very clear. Coming from TheOdinProject. Thank you so much for the content

Hands down one of the great teachers on JavaScript, now I understand why everybody I asked about who's course or material should I go for and everyone said 'Wes Bos'. Feeling lucky I found you and your courses.

So hot examples! Thanks, Wes Bos! ​👍 ✅

Well explained and great video, thank you!

the was awesome you're so efficient with your keystrokes my fingers were hurting a little trying to keep up without pausing too much.

About the sort function, you could actually shorten it event more by returning a.year - b.year and what is more important the sort function mutates the original variable so you could just console.table the inventors instead of assigning it to the new variable. Thanks for the video. Keep up the good work.

For #7, it still works if you remove everything within the sort method.

excellent and informative practice. thank you so much mate.

This was very useful. Thank you so much!

For #7, you can rewrite the code using the logical OR (||) operator to set a default value if the key doesn't exist in the object. If it doesn't exist, set its value to 0 then add one. Else, add one to whatever the value currently is. const transportation = data.reduce((obj, item) => { obj[item] = (obj[item] || 0 ) + 1; return obj; }, {}); console.log(transportation);

Thanks, man. Great job !!

People is already sorted by last name. Even if they weren't, people.sort(); would return what you wanted without any other work.

In the last task we don't need to create key with the value of 0 and then increase it to 1 at the second line. Just create it with 1 and put increment statement inside 'else' . Ternary is even simpler: !obj[ item ] ? obj[ item ] = 1 : obj[ item ]++

That was really good, thanks!

man.. just came back to this for review and that last one hit a new kinda way this time.. PSHH so helpful

The problem I have with these is that I always find the other way to solve the same problems without those methods so it's hard for me to remember all those methods when I'm working on my personal projects.

How to say ternary: turn-air-e. Thanks for the vids! : )

At 22:30. obj[item] = (obj[item]||0) + 1 would do the trick Also the sort function needs not to return 1 or -1, but merely a positive or negative value so ( a , b ) =>. a.year - b.year. would be ok

"sort inventors by birthdate, oldest to youngest" - keep in mind this means the lowest number (year) first, so ascending order. also if the sort returns less than 0, sort leaves a, b unchanged, but if it returns greater than 0, it sorts b before a. so if number 1 is greater than number 2, it sorts number 2 before number 1, otherwise if number 1 is less than number 2, it leaves them be. 4 - 2 = 2; => sort 2 before 4. 2 - 4 = -2 => leave 2 before 4.

i have a major crush on your code. I thought I already understood these methods, but I never wrote them the way you do.

For the 7th (sorting ppl by surnames) you don't need to split the data. You can simply sort it with a > b, since JavaScript would compare it char by char, according to the unicode table. Additional note: at first I was unsure how this would handle "," and " ", but since they have lower unicodes, it actually works well. I do think Wes's solution is cleaner/looks nicer, though.

tried the last sum up by myself first creating 5 different vars for each type of vehicle with a switch-case and then saw the obj implementation that you did.... atleast I'm learning

Thanks for the help!!!

10:00 total is not undefined. If no accumulator is provided, it uses the first element in the array as default. The first element is an object and we are adding a number to that object. js converts that object to a string, and that's where [object Object] came from.

The video is 4 years old so I'm sure the methods have been updated since then, but it looks like the solution for 7: "Sort the people alphabetically by last name" would only need to be that complicated if the people array was not already structured as last name, first name, or if you needed to alphabetize by first name. Otherwise "people.sort()" will give you the same result without all the fuss.

Great video! Thanks :)

You inspired me to look up the pronunciation of Ternary operator: ter-ner-e

Great tutorials

for sort function you can also do: ((a,b) => {return a.year - b.year})

Ternary operator: ter-nar-y, 3 syllables lol. Thanks for the video

6 years old and still a great cardio exercise

thank you..pls keep it up !

Thanks a lot Wes

That was good cardio!

TOP thank you !

Alot of times I found the code written before it was made more concise far more readable. Maybe thats because Ive done some Java programming before so im used to things being verbose, but for me being concise in the JS way of things comes at the cost of readability which would cost me time down the road when debugging code.

thanks Bos, you're the man!

The inventors object in the exercises contains 11 inventors now, looks like it was 7 when this was filmed.

At 9:58 you said: "the first time around we don't have a total and it's equal to undefined". In fact, on the first call, the accumulator (total, in our case) value is equal to the first item in the array (the first inventor object, in our case). This why we got that weird log at first, because the function tried to add an object and a number. Now, if the initial value - the value passed as the second argument to the reduce function after the callback function - is provided, the accumulator value will be equal to this value (the zero, in our case).

Nice exercises! I was trying my own solutions before following along with yours. The reduce exercise is ambiguous about what it is asking for, however. The file asks to "sum up the instances of each of these." It might be more clearly worded as "return an object containing a key for each kind of vehicle with a value corresponding to the number of occurrences"

i dont understand how he can get access to all the links from an external page using DOM around minute 12:00 can someone explain?

10:09 Tripped out for a moment as I almost fell asleep just before he said this.

Holy gold mine

with #6 i'm getting errors saying querySelector is 'null.' Im confused as to how you can grab anything from a link that's commented out?

For anyone wondering why the end result of the exercise 7 is the same as the original array, it's because there is a confusion in the variable names inside the comparator function: const alpha = people.sort((personA, personB) => { const [lastA, firstA] = personA.split(', '); const [lastB, firstB] = personB.split(', '); return lastA > lastB ? 1 : -1; // We are comparing the FIRSTNAMES. }) // lastA = person A FIRSTNAME ; firstA = person A LASTNAME

for sorting oldest to youngest you could just do this: ordered = inventors.sort((a,b) => a.year - b.year; works just the same.

I don't know if the pun was intended at 9:42, but it made me laugh

hahaha, i did actually go for a drink. great practice!

why is the result of my reduce function 861 and yours is 523

Holy shit Wes you are on fire :D

The output is not alphabetically sorted as the naming is mistaken. It should be like this const[aFirst, aLast] = lastOne.split(', '); const[bFirst, bLast] = lastOne.split(', '); now, It will work fine. Btw, thanks for such a comprehensive tutorial. You are simply best :-O

Thanks Wes

If at 10:00 you're confused, there's a simpler (although a bit less succinct) way of doing the same thing: const yearsLived = inventors.map(inventor =>{ return (inventor.passed -inventor.year); }) const allTogether = yearsLived.reduce((a, b) => a + b); console.log(allTogether) So at first you create an array of years lived of each one with map, then on that array you do the simplest possible a + b. This way you don't have to add a 'starting'/default total value of 0.

incredible

A for loop reads much nicer to me than the reduce function

const ordered = inventors.sort((a,b) => (a.year - b.year)) also works.

I see some people say they couldn't do the Wikipedia one. It worked with this: let category = document.querySelector(".mw-category"); let links = Array.from(category.querySelectorAll("a")); let de = links .map((link) => link.innerText) .filter((streetName) => streetName.includes("de"));

18:06 reading the names made me laugh so much idk why xD

Great video as always, Wes! btw, for #7, "const alpha = people.sort();" will suffice since alphabetical sorting is the default behavior for Array.prototype.sort()

Odin project gang