JavaScript30 — Day 18

Adding up times with .reduce()!

Today’s project covered a method of tallying total run time for a playlist given that the time values were represented as “minutes: seconds”. This was another project that helped me get closer to “thinking like a computer”, and realize how many steps are necessary to convert and interpret information in JavaScript.

Bits

• The first step of this project was converting our DOM elements with data attributes into a Node list, and then into an array. In other words, “gather and group all of the web elements you want access to, then turn them into the type of data you can manipulate with JavaScript methods.” In investigating this process, I learned that querySelector() and querySelectorAll() are browser APIs, and not JavaScript specific — because of this, they return Node lists (usable in other programming languages), and not arrays. To work with the data more effectively in JS, we need to turn those Nodes into arrays! The simplest way to do this is to wrap your “document.querySelector” code in the Array.from() method, pictured below.

• As I was trying to figure out the project prior to following along with the tutorial, I could not for the life of me figure out a succinct way to translate the minutes/seconds notated times (“6:53”) into just seconds. The teacher’s recommendation was to use the .split method on the time strings, which seems like the perfect solution! The syntax for using .split is to write the string, append .split, and specify the character you want to string to split around. For instance: / “6:53”.split(‘:’) /. The coolest part of this method is that it returns an array of the two split portions of the string: / [‘6’, ‘53’] /. Now that we can target array index numbers, I have a better sense of how we’ll use simple math to convert these values into seconds.

• We learned about the “mod” symbol today, which is the percentage sign “%”. Mod is used with math in JS to return a value that is essentially the remainder from an equation. If you wrote “11 % 5”, you would get a return value of 1 — this means “5 goes into 11 twice, and then you have a value of 1 remaining.”

Blindspots

• We used more ES6 “destructuring” in today’s project, so I want to make it a point to return on Monday to the cheatsheet I found yesterday and really break this down for myself!
• We used parseFloat to turn strings back into numbers in today’s project, which I’ve seen before, but is one of those terms who’s name does not make sense with it’s functionality. I could benefit from researching this method more.
• The code within the seconds variable is all readable to me, but at this point I would never have thought to stick so much functionality inside of a variable. My instinct probably would’ve had me write a function called “toSeconds” or something, and then try to apply that function to the timeNodes array. It was a new phenomenon for me to see a variable defined with so many methods on it, and I’m curious about it.

Breakdown

We used .map() for so much in today’s project, and it was one of my blindspots yesterday! Here’s a little CodePen exercise I wrote using .map(). Essentially, you use .map() when you want to run a callback function for each element in an array, and return a new array based on the function you ran. What hasn’t clicked for me in the past is why this particular method is called “map”, so here’s my way of making it make sense to myself: it’s called “map” because you provide it “coordinates” (a callback function) and based on the coordinates you provided, you get location-specific results, in the form of a new array.

It’s a good idea to use .map() when you need to write other code that utilizes the new array. If you don’t need to integrate a new array, but rather just change an existing one, you can use .forEach() or for…in syntax instead. It was appropriate to use .map() in today’s project because we converted the dataset time values into a new format (seconds) and used the array created later in the code!

My commented code from today’s project is here, and I’ll be back on Monday for some “unreal webcam fun”. Alrighty!!!!