Page Link
Introduction
Slightly different, this is a set of practical exercises applying filter, sort, map, and reduce to objects, websites (navigating the DOM), and arrays.
Process
Generally speaking, these are all completely new to me so it was a process of following along and trying to work ahead as applicable. Conceptually these are familiar, syntactically very different especially with sort.
Filter was used with an iterator argument which is fed into an arrow function, and for each item we’re simply looking to return true or false. The end result is a an array of all items for which the function returns true.
Map returns an array of the same length, again taking an iterator argument which is fed into an arrow function, the output of this arrow function defines each item in the returned array. In this case, it was applied to an object and used to combine last name and first name for each element in an array through a backtick string.
Sort returns an array of the same length, sorted by the function. This one I found unusual- a sorting function is required which has two arguments indicating the previous and next items. Essentially his sorting function returns a -1 or 1 indicating which order two items in the array being compared should be ordered. I’m assuming this is some kind of high-level abstraction of a recursive sorting function. I’m confident I know how to write it, but I’m not at all confident that I understand how this function works behind the scenes.
Reduce returns a single output as the result of looping through all items in the array. In this case, it was used to take a rolling sum initially.
These functions were also used in additional exercises:
The first involves using a filter on an array which has to be extracted out of a wikipedia page. These are links inside divs, and are pulled out either using a querySelector to select the div, and a querySelectorAll on the querySelector results to select the links, or a single querySelectorAll. Either way, a map is then used to extract the textContent from the array, and then filtered.
The second involves a sort on a list. Because data manipulation is required, this is demonstrated inside of the sort function and doesn’t require any external copying and keying between multiple arrays.
The third involves a classic count each unique occurence of elements in an array using reduce, instead of a for loop. Demonstrates that the reduce doesn’t just return values, but in this case can return an object.
Things Learned
- All the functions: filter, sort, map, reduce. (Albeit at a very introductory level.)
- console.table() function
- Conditional (ternary) operators. Very abstract syntax.
Deceptively short list, a ton to unpack in here.