What is the method for generating a 2D array in JavaScript when the array's length is unknown?

Question

What is the method for generating a 2D array in JavaScript when the array's length is unknown?

I'm trying to create a 2D array that groups animals by their first letter of the alphabet. However, the output is not what I expected. I want each letter to have its own sub-array with corresponding animal names. Here's the code I tried:

function groupAnimals(animals) {
  var sort = [];
  var alphabet = 'abcdefghijklmnopqrstuvwxyz';
  var temp = [];
  
  for(var i = 0; i < alphabet.length; i++){
    for(var j = 0; j < animals.length; j++){
      if(animals[j][0] == alphabet[i]){
        temp.push(animals[j]);
      } 
    }
  }
  
  sort.push(temp);
  return sort;
}

console.log(groupAnimals(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupAnimals(['elephant', 'fish', 'horse', 'bird', 'flamingo', 'dog', 'ant']));

However, the output does not match my expected format. I want to achieve the following instead:

[ ['bear'], ['chicken', 'cat'], ['dolphin'], ['tiger'] ]
[ ['ant'], ['bird'], ['dog'], ['elephant'], ['fish', 'flamingo'], ['horse'] ]

My attempt to manually create sub-arrays based on the first letter of each animal proved to be inefficient and produced unexpected results. I want to achieve this using arrays and loops, but I'm struggling to figure out how to do it. Any suggestions or solutions would be greatly appreciated.

function groupAnimals(animals) {
  var sort = [];
  var alphabet = 'abcdefghijklmnopqrstuvwxyz';
  
  for(var i = 0; i < alphabet.length; i++){
    var tempArr = [];
    
    for(var j = 0; j < animals.length; j++){
      if(animals[j][0] == alphabet[i]){
        tempArr.push(animals[j]);
      } 
    }
    
    sort.push(tempArr);
  }
  
  return sort;
}

When I tried the above code, the output was:

[ ['bear'], ['chicken', 'cat'], ['dolphin'], ['tiger'], [], [], []]
[ ['ant'], ['bird'], [], ['dog'], ['elephant'], ['fish', 'flamingo'], ['horse']]

I'm looking for a more efficient solution using arrays and loops to achieve the desired output.

javascript arrays loops

Answer 1

Answer №1

Transform the array of words into an object of arrays based on the first letter of each word, then convert it back into an array of arrays using Object.values:

const groupWords = (words) => {
  const sorted = words.slice().sort();
  const groupedObj = sorted.reduce((a, word) => {
    const key = word[0];
    if (!a[key]) {
      a[key] = [];
    }
    a[key].push(word);
    return a;
  }, {});
  return Object.values(groupedObj);
};

console.log(groupWords(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupWords(['elephant', 'fish', 'horse', 'bird', 'flamingo', 'dog', 'ant']));

If you're concerned about the order of properties in the resulting arrays, you can sort them after grouping:

const groupWords = (words) => {
  const groupedObj = words.reduce((a, word) => {
    const key = word[0];
    if (!a[key]) {
      a[key] = [];
    }
    a[key].push(word);
    return a;
  }, {});
  return Object.values(groupedObj)
    .sort((a, b) => a[0][0].localeCompare(b[0][0]));
};

console.log(groupWords(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupWords(['elephant', 'fish', 'horse', 'bird', 'flamingo', 'dog', 'ant']));

Answer 2

Transform the array of words into an object of arrays based on the first letter of each word, then convert it back into an array of arrays using Object.values:

const groupWords = (words) => {
  const sorted = words.slice().sort();
  const groupedObj = sorted.reduce((a, word) => {
    const key = word[0];
    if (!a[key]) {
      a[key] = [];
    }
    a[key].push(word);
    return a;
  }, {});
  return Object.values(groupedObj);
};

console.log(groupWords(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupWords(['elephant', 'fish', 'horse', 'bird', 'flamingo', 'dog', 'ant']));

If you're concerned about the order of properties in the resulting arrays, you can sort them after grouping:

const groupWords = (words) => {
  const groupedObj = words.reduce((a, word) => {
    const key = word[0];
    if (!a[key]) {
      a[key] = [];
    }
    a[key].push(word);
    return a;
  }, {});
  return Object.values(groupedObj)
    .sort((a, b) => a[0][0].localeCompare(b[0][0]));
};

console.log(groupWords(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupWords(['elephant', 'fish', 'horse', 'bird', 'flamingo', 'dog', 'ant']));

Answer 3

Answer №2

Condensed CertainPerformance's response and converted all text to lowercase initially to ensure sorting accuracy.

function groupStrings(strings) {
    return Object.values(strings.sort().reduce((a, str) => {
        const s = str.toLowerCase();
        const f = s[0];
        a[f] = a[f] ? [...a[f], s] : [s];
        return a;
    }, {}));
}

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

Edit

Below are multiple methods utilizing arrays and for loops exclusively. Detailed explanations can be found within the comments:

function groupStrings(strings) {

    // sort the array first
    var sortedStrings = strings.slice().sort();

    // initialize the 2d array with the first word
    var twoDArray = [[sortedStrings[0]]];

    for (var i = 1; i < sortedStrings.length; i++) {

        // obtain the last child array in the 2d array
        var currentArray = twoDArray[twoDArray.length-1];

        // if the initial letter of the current string matches the initial letter of a string in the current child array,
        // append the current string to the current child array
        if (sortedStrings[i][0] === currentArray[0][0]) {
            currentArray.push(sortedStrings[i]);
            currentArray = currentArray.sort();

        // otherwise, create a new child array with the current string
        } else {
            twoDArray.push([sortedStrings[i]])
        }

    }
    
    return twoDArray;
};

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

function groupStrings(strings) {

    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var twoDArray = [];

    for (var i = 0; i < alphabet.length; i++) {

        // create a temporary array for all words starting with the current letter
        var letterArray = [];

        for (var j = 0; j < strings.length; j++) {

            // if the initial letter of the current string matches the current letter,
            // add it to the letter array
            if (strings[j][0] === alphabet[i]) {
                letterArray.push(strings[j]);
            }
        }

        // if any strings were added, include the letter array in the 2d array
        if (letterArray.length) {
            twoDArray.push(letterArray);
        }
    }

    return twoDArray;
};

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

Answer 4

Condensed CertainPerformance's response and converted all text to lowercase initially to ensure sorting accuracy.

function groupStrings(strings) {
    return Object.values(strings.sort().reduce((a, str) => {
        const s = str.toLowerCase();
        const f = s[0];
        a[f] = a[f] ? [...a[f], s] : [s];
        return a;
    }, {}));
}

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

Edit

Below are multiple methods utilizing arrays and for loops exclusively. Detailed explanations can be found within the comments:

function groupStrings(strings) {

    // sort the array first
    var sortedStrings = strings.slice().sort();

    // initialize the 2d array with the first word
    var twoDArray = [[sortedStrings[0]]];

    for (var i = 1; i < sortedStrings.length; i++) {

        // obtain the last child array in the 2d array
        var currentArray = twoDArray[twoDArray.length-1];

        // if the initial letter of the current string matches the initial letter of a string in the current child array,
        // append the current string to the current child array
        if (sortedStrings[i][0] === currentArray[0][0]) {
            currentArray.push(sortedStrings[i]);
            currentArray = currentArray.sort();

        // otherwise, create a new child array with the current string
        } else {
            twoDArray.push([sortedStrings[i]])
        }

    }
    
    return twoDArray;
};

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

function groupStrings(strings) {

    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var twoDArray = [];

    for (var i = 0; i < alphabet.length; i++) {

        // create a temporary array for all words starting with the current letter
        var letterArray = [];

        for (var j = 0; j < strings.length; j++) {

            // if the initial letter of the current string matches the current letter,
            // add it to the letter array
            if (strings[j][0] === alphabet[i]) {
                letterArray.push(strings[j]);
            }
        }

        // if any strings were added, include the letter array in the 2d array
        if (letterArray.length) {
            twoDArray.push(letterArray);
        }
    }

    return twoDArray;
};

console.log(groupStrings(['bear', 'chicken', 'dolphin', 'cat', 'tiger']));
console.log(groupStrings(['chevrolet', 'buick', 'dodge', 'bmw', 'mercedes', 'jaguar', 'landrover', 'audi', 'volkswagen', 'cadilac', 'ford', 'toyota', 'tesla']));

What is the method for generating a 2D array in JavaScript when the array's length is unknown?

Answer №1

Answer №2

Edit

Similar questions

Adding the location of the onClick event to the hook - a step-by-step guide

An automated feature that smoothly transitions a large image onto the screen

Include previous input as a "phantom" thumbnail to the slider element of type "range"

What could be the issue with my interactive dropdown menu?

JavaScript property counterparts

A comprehensive guide on utilizing the ngFor directive for looping through objects

How can users change the displayed Twitch channel?

Clicking on the user will reveal a modal containing all of the user's detailed information

What might be causing the attribute of this Backbone model to be undefined when attempting to access it?

Initiating a click function for hyperlink navigation

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

Modifying the CSS design of specific columns within a table created using JavaScript

Is Storybook webpack stuck in a loop, rebuilding and reloading constantly?

Dynamically expanding an array by adding new rows

encountering a glitch while using console.log(util.format

Incorporate React Pages into Discord Js integration

Exploring File Reading and 2-Dimensional Array with Array Bound Caution

Having Trouble with Your Instafeed Script

Exploring nested list iteration in Python

store events in a MySQL database using a servlet callback and display them on a full calendar