Starting Four Pt2— Javascript’s top methods
With my very first blog post at the beginning of my Software Engineering Bootcamp journey, I wrote about Ruby’s most common iterator methods: .each, .map, .select and .find. We called these four, the “Starting Four,” of the Ruby team, and deservedly so. They are the most powerful and useful methods of the group, used to iterate through data. In case you missed it, here’s my first blog post. “The Starting Four of Ruby’s Enumerable Methods.”
Ahhh, what a season it’s been — that is, both my bootcamp journey and the NBA season thus far! I published that post on the night of the NBA season opener, and here we are, half way through quite an interesting season! Since four months ago, I’ve learned Rails, Javascript, React, and officially graduated my full stack software engineering bootcamp a little over a week ago.
So, it only made sense to do a mid-season write up on “The Starting Four of Javascript’s Iterators.” AND ALSO — if you didn’t catch per my first post, I am a Philadelphia 76ers fan. Since then, they have been #1 in the Eastern Conference. So double-fingers-crossed that by way of me writing this 2nd half of the season post, it will keep them right where they are until playoffs.
Let’s go!
We will use stats for all 30 teams this time since we have enough data to go through. The data presented will be team stats as of games played through March 21, 2021. Below is my recreation of nba.com/stats/teams page and their sortable table.
I built this project using React. Instead of using an API, I added the team stats in a db.json file shown left and fetched the data by running the json server in my App.js file as shown below.
The first task is to create our table which will display our data. We create a StatsTable.js file that we passed the team data into after our fetch. Then we build the base of our table and the data columns we want. Since I am essentially doing a clone of the NBA Stats — Team Page, we create all the columns below within the <thead> of our table.
Once the base of the table is built, we want to display our data dynamically. There are actually several ways to do this. Instead of passing the actual data itself into another component, say called <Stats />, which I’ve typically done for more complicated projects with several models, since we only need this table for the purposes of this blog, I mapped through the data and rendered it below the row of headers.
I realized after typing up each header into it’s own <td> column, that there’s a shorter way by mapping through the keys of each object so that I’m not having to type each header on each line like above. So a refactor will be in the near future once I learn that way, but that’s for another day.
.map( )
One of the “starters” in Javascript methods is the .map() method. At this point, since we don’t want a specific team’s stats and just want ALL of our team’s original data, .map() is one our best options to accomplish this. This allows us to get all of the stats in our teams data that we fetched from our db.json file.
- Typically the map() method is used to iterate over an array and then it calls every element within that array.
- The data returned is also not mutated, meaning that it creates a new array and we get all of the original values.
The .map() method can also be used to guard positions one through five. Okay, jk — getting carried away with the basketball innuendos. But, essentially, the same thing — and what I mean by that is .map() is so versatile. I’ve used it to render lists, table data as shown above, cards, etc., etc.
Here, what we’re saying is, let’s map through all of our teamData. Then in each individual row of the table <tr>, display each team’s name, game’s played(GP), game’s won(W), and so on and so forth in each <td> or column that matches each header we created for the base of our table. Even though there are 30 teams in our data set, the map method allows us to only have to map once, and it will render all 30 teams in its own row <tr>. Here is what the result looks like.
As you can see, .map() is super useful and one of the most commonly used methods to display all of our data. Nice!! Our Sixers are still top of the East!
.filter( )
Let’s say I just want to show the top teams with a Win% of .600 or higher. We. can accomplish this with the .filter() method.
The .filter() method will create an array with all of our team’s data, and our desired data will be returned if the values are true, based on the specific callback function we have provided.
This method is similar to .find(), which we’ll talk about below. However, if you need to return multiple values, using .filter() is your best bet.
Above, we are saying, within our teamData, lets .filter() any team that has a .600 or higher win %. In my data, I named W_Percent as the key and each team’s win percentage is the value. This gives us back a list of the seven teams that currently hold winning records.
Hmm, that’s odd. Not sure what specific order this is coming back as, but I do know the Utah Jazz have the best record, then the Sixers are 2nd in the league. I would prefer to order the teams from highest Win% value to lowest. And Joel “The Process” Embiid agrees.
.sort
Here’s where the .sort() method comes in handy! Don’t worry Joel, we’ll get this right! As the name says, the .sort method sorts the items of an array. We can sort in any order we define in the function, either alphabetic or numeric order, and in ascending or descending order.
Here, we can add .sort to our original method, to sort the order amongst the seven teams we got back when we used the .filter() method. We sort using a basic comparison function. This takes in the value at index 0 as a, and then every other value thereafter as b, that is passed on the compare function. In other words, when the sort() method compares two values (a, b), it then sends the values to the compare function which we have above as a.W_Percent > b.W_percent. We add the ? -1 : 1 to show what order we want to the data to reflect, whether ascending or descending. Since we want the highest win% to lowest from top to bottom, we say -1 : 1.
Now the order of our teams are listed best Win% from top to bottom.
.slice
Let’s say we sort all of the teams by blocks per game. When we sort, we will still get a list of all 30 teams. If we want to only list the Top Five teams with the highest number of blocks per game, we can use the .slice() method to accomplish this.
- The .slice() method extracts the part of the array that we state in the parameter, and returns the extracted value in a new string, so it does not alter the original data. This is great, because we will want to use our teamData for other stats.
There are several ways you can alter data with .slice().
- slice( ) will return the original array since we don’t identify a specific parameter with an index at which to start extraction within the array.
- slice(start) will take the index and start extraction at that point.
Below, since we defined 3, it starts extracting at the Suns, since our index starts from 0 = Jazz, 1= Sixers, etc., etc.
- slice(start, end) will start extraction at the starting point through end point of the index. Below, we defined a start of 1, and end of 5, therefore our new array returns “Sixers”, “Nets”, “Suns”, Bucks”.
- slice(start) we can also start extraction at the end of a sequence by using a negative index. Below, we want to start at the end, with an index of -2, therefore our new array only returns the last two teams.
With that whole slice lesson out of the way, back to slicing the teams with the best record for blocks per game so far this season.
Above, we sort through all the teams by blocks per game. Then we add the .slice(0, 5) method to obtain the top teams, starting at the index of 0 for the first team, through 5, to get a total of five teams. And there we have it folks, the Sixers are on top again!
There are so many more useful methods within Javascript, but these are the ones I find used most commonly or are the most useful to get desired data. I hope you found this useful, and a more fun way of looking at array methods!
(Source: https://www.nba.com/stats/teams/)
