JavaScript - How to Map a list of names to a specified key using reduce

Question

I want to learn the javascript reduce function. I have implemented the following using a different solution, but want to achieve the same through reduce.

I have an alphabets array and names array.

alphabets: ['A','B','C','D','E','F','G','H','I','J','K','L',
        'M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

names: [{ name: 'Apple' },{ name: 'Apricot' },{ name: 'Avocados' },{ name: 'Almond' },
        { name: 'Blueberries' }, { name: 'Bing Cherry' },{ name: 'Breadfruit' },{ name: 'Bananas' },
        { name: 'Cherries' },{ name: 'Custard-Apple' },{ name: 'Carrot' },{ name: 'Cranberries' },
        { name: 'Dates' }, { name: 'Dragon Fruit' },{ name: 'Durian' },
        { name: 'Grapefruit' },{ name: 'Grapes' },{ name: 'Gooseberries' },{ name: 'Guava' },],

Using javascript reduce funtion, I want to map key value pair like,

A: 'Apple','Apricot','Avocados','Almond'
B: 'Blueberries', 'Bing Cherry', 'Breadfruit', 'Bananas'
C: 'Cherries', 'Custard-Apple', 'Carrot', 'Cranberries'
D: 'Dates', 'Dragon Fruit', 'Durian'

Key A should contain a list of fruits that start with A, Key B should contain a list of fruits that start with B. Kindly help me with this.

Answer 1

You could take a logical nullish assignment ??= operator fro assigning an array to a cetrain property and push the actual destrctured name.

const 
    names = [{ name: 'Apple' }, { name: 'Apricot' }, { name: 'Avocados' }, { name: 'Almond' }, { name: 'Blueberries' }, { name: 'Bing Cherry' }, { name: 'Breadfruit' }, { name: 'Bananas' }, { name: 'Cherries' }, { name: 'Custard-Apple' }, { name: 'Carrot' }, { name: 'Cranberries' }, { name: 'Dates' }, { name: 'Dragon Fruit' }, { name: 'Durian' }, { name: 'Grapefruit' }, { name: 'Grapes' }, { name: 'Gooseberries' }, { name: 'Guava' }],
    grouped = names.reduce(
        (r, { name }) => ((r[name[0].toUpperCase()] ??= []).push(name), r),
        {}
    );

console.log(grouped);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

You can just use first letter of name to be a key of value.

const groupedNames = names.reduce((acc, item) => {
  const firstLetter = item.name.charAt(0);
  if (!acc[firstLetter]) {
    acc[firstLetter] = [item.name];
    return acc;
  };
  acc[firstLetter].push(item.name);
  return acc;
}, {})