Why does this array never fill?

Question

Alright, I'm trying to keep brevity here but I'm not sure where things go wrong. So I have this program for generating random names. There's an HTML interface, with check boxes for three cultures (anglo, french, and spanish), as first names and last names. So if the user wanted to generate a name where the first name was anglo but the last name was anglo or spanish sounding (like Jason Gomez or Jason Smith), he could by checking the appropriate boxes.

The program is supposed to loop through the input elements, and check which ones are checked, then use that information to add a cultural array to an array of potential names.

This seems to chug along smoothly until the very end. What's the deal?

f_anglo = ["Stacey", "Jennifer", "Kelsey"];
f_french = ["Marie", "Claire", "Elise"];
f_spanish = ["Carmen", "Angelita"];

m_anglo = ["John", "Mike", "Jason"];
m_french = ["Pierre", "Jean", "Didier"];
m_spanish = ["Diego", "Jorge", "Jose"];

s_anglo = ["Smith", "Jones", "Jackson"];
s_french = ["Dupuis", "Trichet", "Brissont"];
s_spanish = ["Ramirez", "Ruiz", "Mendez"];

function genName(){
    let firstNameBoxes = document.getElementsByClassName("firstName");
    let surnameBoxes = document.getElementsByClassName("surname");
    if($("#gender").val() == "male") {
        //empty arrays that will be filled with cultural arrays based on what boxes are checked.
        let potentialFirstNames = [];
        let potentialSurnames = [];
        for(let x in firstNameBoxes) {
            //this runs through the boxes under "Last name:" and checks which ones are checked
            //depending on which are checked, it will add them to array of potential names
            if(firstNameBoxes[x].checked) {
                switch(firstNameBoxes[x].value) {
                    case "anglo":
                        potentialFirstNames.concat(m_anglo);
                        break;
                    case "french":
                        potentialFirstNames.concat(m_french);
                        break;
                    case "spanish":
                        potentialFirstNames.concat(m_spanish);
                        break;
                    }
                }
            }

            for(let x in surnameBoxes) {
                //same thing but with last names
                if(surnameBoxes[x].checked) {
                    console.log("checked")
                    //this console.log fires the appropriate amount of times.

                    console.log(surnameBoxes[x].value);
                    //these all show the proper values

                    switch(surnameBoxes[x].value) {
                        case "anglo":
                            potentialSurnames.concat(s_anglo);
                            break;
                        case "french":
                            potentialSurnames.concat(s_french);
                            break;
                        case "spanish":
                            potentialSurnames.concat(s_spanish);
                            break;
                    }
                }
            }

            //these never fill up
            console.log(potentialFirstNames);
            console.log(potentialSurnames);

[`.concat(...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) returns a new array, it doesn't mutate the array itself. So you need to re-assign the variable each time — Christian Vincenzo Traina, Aug 24 '23 at 21:31
The docs are your friends (as is the console). Try concatenating an array in the console. What’s returned? What happens to the original array? These types of problems are often solvable, quickly, with very minor experimentation. — Dave Newton, Aug 24 '23 at 21:33
Also please don't use GNU-style braces for coding JS as it plays poorly with ASI. Use [K&R-style braces instead](https://stackoverflow.com/a/12234136/3757232). — Jared Smith, Aug 24 '23 at 21:33
Instead of using concat use push `potentialSurnames.push(s_spanish);` — imvain2, Aug 24 '23 at 21:34
Also also don't use [for...in loops on arrays](https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea) (or NodeLists in this case). — Jared Smith, Aug 24 '23 at 21:35

score 0 · Answer 1 · answered Aug 25 '23 at 00:24

the problem that you're not assigning the new values to the array, when you used potentialFirstNames.concat(m_anglo); you wanted to add the values of m_anglo to potentialFirstNames, yes but in this case potentialFirstNames isn't actually changing.

it's like your calculating the exam's question but never write the answer, you should assign the concat result to the array potentialFirstNames like this :

potentialFirstNames = potentialFirstNames.concat(m_anglo);

or you can use this :

potentialFirstNames = [...potentialFirstNames, ...m_anglo];

Why does this array never fill?

1 Answers1