JavaScript and Array Cardio

This is day 4 in my #javascript30 journey. This is the free course from Wes Bos that lets you brush up on your JavaScript skills via 30 projects.

Yesterday we explored an updating CSS variables with JS. You can keep track of all the projects we’re building here.

Today we’re doing some hardcore Array Cardio.

via GIPHY

Day 4 - Cardio Arobics

Today is about getting into the nitty gritty of Array methods. We will be working up a sweat going through filter, map, sort, and reduce.

“Filter, map, sort, reduce. These are kind of like the gateway drug to functional programming.” - Wes Bos

Inventors

Most of the work we’re doing today will be around reading and sorting out the data in an array of inventors:

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: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 },
]

Filter by Century of Birth

The first task is to Filter the list of inventors for those who were born in the 1500's. To do this we use the filter method:

const fifteenHundreds = inventors.filter(  
  inventor => inventor.year >= 1500 && inventor.year < 1600,
)
console.table(fifteenHundreds)  

I didn’t know about console.table before Wes mentioned it but it provides an easy way to read data in the console:

Array of Full Names

The second task is to Give us an array of the inventors' first and last names. To do this we use the map method:

const fullNames = inventors.map(  
  inventors => `${inventors.first} ${inventors.last}`,
)

We are using the ES6 template strings to concatenate the first and last names together.

Oldest to Youngest

The third task is to Sort the inventors by birthdate, oldest to youngest. To do this we use the sort method:

const chronological = inventors.sort((a, b) => (a.year > b.year ? 1 : -1))

A sort function takes in two elements of the array at a time and compares them. This sorts the values in place.

Total Years of All Inventors

The fourth task is to find out How many years did all the inventors live. To do this we use the reduce method:

const totalYears = inventors.reduce((total, inventor) => {  
  return total + (inventor.passed - inventor.year)
}, 0)

Years Lived Shortest to Longest

The fifth task is to Sort the inventors by years lived. To do this we use the sort method:

const longevity = inventors.sort(  
  (a, b) => (a.passed - a.year > b.passed - b.year ? 1 : -1),
)

Boulevards in Paris

The sixth task is to create a list of Boulevards in Paris that contain 'de' anywhere in the name.

To run this we will navigate to https://en.wikipedia.org/wiki/Category:BoulevardsinParis & run the following in the console:

const links = Array.from(document.querySelectorAll('.mw-category a'))

const de = links  
  .map(links => links.textContent)
  .filter(streetName => streetName.includes('de'))

The first line collects an Array from the dom selecting all of the links.

The second line uses map and filter. First the Array is cleaned up to only contain the textContent found in the links then it is filtered to only return the elements that include de in the name.

Very cool.

Alphabetically Sort

The seventh task is to Sort the people alphabetically by last name.

The people array that was provided appears to already be in order so I created a new one:

const people = [  
  'Torrie Overfelt',
  'Stuart Timmer',
  'Deena Tippens',
  'Noreen Tourville',
  'Amalia Clyburn',
  'Douglass Sturtevant',
  'Guy Strahan',
  'Gena Gerson',
  'Hiroko Culver',
  'Chanda Laskey',
  'Filomena Ugarte',
  'Glennie Eddie',
  'Alexis Saunder',
  'Kaleigh Brugnoli',
  'Elbert Capuano',
  'Melynda Klassen',
  'Martine Raulston',
  'Clorinda Pederson',
  'Jonie Pickerel',
  'Armida Engman',
]

To put this in alphabetical order we use the sort function:

const abc = people.sort((a, b) => {  
  const [aFirst, aLast] = a.split(' ')
  const [bFirst, bLast] = b.split(' ')
  return aLast > bLast ? 1 : -1
})

We needed to identify the last name. To do this we used the split function.

Count the Instances

The eighth and final task asks that we Sum up the instances of each of these:

const data = [  
  'car',
  'car',
  'truck',
  'truck',
  'bike',
  'walk',
  'car',
  'van',
  'bike',
  'walk',
  'car',
  'van',
  'car',
  'truck',
]

To sum up the data we need to use the reduce function:

const counter = data.reduce((obj, type) => {  
  if (type in obj) {
    obj[type]++
  } else {
    obj[type] = 1
  }
  return obj
}, {})

That’s all there is for today. No project worth publishing but some good reps on using Array methods. Time for a cooldown.

via GIPHY

You can keep track of all the projects in this JavaScript30 challenge here.