JavaScript 30 Day 6 Study Notes
JavaScript 30 Day 6 leveled up the difficulty compared to the previous lessons. It involves extensive use of JavaScript for processing and organizing input, using fetch to access an API, and matching up input and data. Not to mention, some foreign(to me) syntax and a new term, regular expressions. Wow, a whole lot of things I was not too familiar with.
The first step accessed the API and pushed the data to an array.
const cities =[];fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data))
Okay, so far so good. I haven’t used fetch very much but at least this was familiar to me.
Next, Bos wrote a function to match input from the form with data in the array. To do this, he needed to convert the data into a regular expression. Huh? I vaguely remember hearing the term, regular expression, before. But I had no idea what it meant. Bos only mentioned the term to explain the code.
function findMatches(wordToMatch, cities){ return cities.filter(place => { const regex = new RegExp(wordToMatch, 'gi'); //g=global, i= case insensitive return place.city.match(regex) || place.state.match(regex) });}
Jumping down the regular expressions rabbit hole
According to Eloquent JavaScript, regular expressions “are a way to describe patterns in string data”. They are a type of an object. One way of declaring them is by using a constructor as Bos did.
const regex = new RegExp('wordToMatch','gi');This converts the input into a regular expression as the variable regex.
Great. But WTF is the second argument ‘gi’? I couldn’t find anything in Eloquent JavaScript which made any sense of it. Finally, I did a google search that led me to the Mozilla Developer Network(MDN) website. The RegExp object has 6 flag properties that are used for advanced searches. Two of those properties are g referring to a global search and i referring to a case insensitive search.
Next Bos used the match method to match the input to the data.
return place.city.match(regex) || place.state.match(regex)Whew. That was a difficult chunk of code to interpret.
Bos then made an array with the matches and used the map method to convert the elements to HTML.
function displayMatches(){//get data matches const matchArray = findMatches(this.value, cities);//loop over array to display const html = matchArray.map(place => {
Using template literals to create a display with the text from the form input highlighted.
const cityName = place.city.replace(regex, `<span class ="hl">${this.value}</span>`);const stateName = place.state.replace(regex, `<span class ="hl">${this.value}</span>`)
The function returned a template literal with HTML.
return `<li><span class ="name">${cityName}, ${stateName}</span><span class ="population">${numberWithCommas(place.population)}</span></li> `;
And Bos added code to turn the array into a string. This is something I never would have thought to do.
}).join('');Finally, adding the return to innerHTML to the class .suggestions.
suggestions.innerHTML = html;I needed to do some extra studying to fully understand this program. The lessons are designed to be done each day. However, I found taking an extra day or two to research what I learned works better for me. I could just roar through a lesson a day, but I don’t think my retention would be as good.
View my JavaScript 30 study notes from the beginning.
