When interviewing new candidates the simple things throw people off. We usually do a “whiteboarding” question: Build a Word Frequency Diagram, where we do a live screen share and have them write some code.

  1. Can you think through converting the lyrics to the correct format
  2. Data structures, how would you count the words
  3. Can you use regex
  4. Are you using map/reduce or for loops
  5. Can you take advantage of libraries (We usually include lodash)
  6. Can you think in React Components

Full Lyrics

Take a song like “Inaudible Melodies” by Jack Johnson.

const lyrics = ['Brushfire fairytales',
		'Itsy bitsy diamond wells',
		'Big fat hurricanes',
		'Yellow bellied given names',
		'Well shortcuts can slow you down',
		"And in the end we're bound",
		'To rebound off of we'];

What’s the data structure you need to get count, and usually people easily identify hash/dictionary/object, keyed on word and with the count.

But are you dealing with case, are you combining and removing punctuation.

// usually this is done in a loop of some sort
const lyrics = lyrics.join(" ").toLowerCase();
// and then removing punctuation isn't always that easy
const words = _.compact(lyrics.split(/\s|[^a-zA-Z]/g))
// and then if they take advantage of libs, counting words with lodash is simple. 
const wordCount = _.countBy(songWords);
// or if we are lucky they reduce
const wordCount = songWords.reduce((counts, word) => {
  return {...counts, [word]: counts[word] ? counts[word] + 1 : 1}
});
// and of course that can be simplified (we don't really need the "return")

Getting here isn’t always so easy and once here we want react skills.

Now, the react part comes to light, which is just as important, so looking for use of components, prop types etc.

<WordFrequencyDiagram>
  <Title/>
 {words.map(line => <Line/>)}
</WordFrequencyDiagram>