Build a new array from two other arrays in Javascript

I have two arrays:

alphabet is composed of letters (e.g. the English alphabet). dictionary is a list of objects with words and definitions, 'word' being the key for the word value.

I want to build a new array called frequency which would contain the number of words that start with each letter in the alphabet array, with indices corresponding to the alphabet array.

I’ve managed to come up with the following:

alphabet.forEach(function(letter) {
        frequency = dictionary.filter(item => item['word'].toLowerCase().startsWith(letter)).length;
    });

This gets me individual values for frequency. What is the best syntax in Javascript for building an array of those values? Is it another filter? Or should the code use the current forEach manually with a incremental index?

Answer

First, let’s get some example data. We’ll ignore anything that isn’t related to the question.

const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('')
var dictionary = [{'word': 'alpha'}, {'word': 'beta'}, {'word': 'balloon'}]

Then we’ll create a results variable, which will hold an array of all results in alphabetical order.

var results = []

Now we loop over the same way you did before, but we’ll push each result to our list.

alphabet.forEach(function(letter) {
  frequency = dictionary.filter(item => item['word'].toLowerCase().startsWith(letter)).length;
  results.push(frequency);
});

As an alternative solution that allows us to more easily look through our results, we’ll make results an object, and use letters as keys.

var results = {};
alphabet.forEach(function(letter) {
  frequency = dictionary.filter(item => item['word'].toLowerCase().startsWith(letter)).length;
  results[letter] = frequency;
});