Multidimensional Array gives "wrong" answer

Question

I'm starting with coding and i have an example for a multi-dimensional array. But it don't give the expected answer.

I get just 'C' and I expected "JohnnyCash:Live at Folsom Prison". What's going wrong?

var music = []
    music[0] = "Country";
    music[1] = "Rock";
    music[2] = "Punk";
    music[0][0] = "JohnnyCash:Live at Folsom Prison";
    music[0][1] = "PatsyCline:Sentimentally Yours";
    music[0][2] = "HankWilliams:I'm Blue Inside";
    music[1][0] = "T-Rex:Slider";
    music[1][1] = "Nirvana:Nevermind";
    music[1][2] = "Lou Reed:Tranformer";
    music[2][0] = "Flipper:Generic";
    music[2][1] = "TheDeadMilkmen:Big Lizard in my Backyard";
    music[2][2] = "PattiSmith:Easter";

    console.log(music[0][0]);

Answer 1

You've already got some useful explanations. Your array step-by-step building can also be fixed with these minimal changes:

var music = []
    music[0] = ["Country"];
    music[1] = ["Rock"];
    music[2] = ["Punk"];
    music[0][0] = "JohnnyCash:Live at Folsom Prison";
    music[0][1] = "PatsyCline:Sentimentally Yours";
    music[0][2] = "HankWilliams:I'm Blue Inside";
    music[1][0] = "T-Rex:Slider";
    music[1][1] = "Nirvana:Nevermind";
    music[1][2] = "Lou Reed:Tranformer";
    music[2][0] = "Flipper:Generic";
    music[2][1] = "TheDeadMilkmen:Big Lizard in my Backyard";
    music[2][2] = "PattiSmith:Easter";

    console.log(music[0][0]);

Answer 2

You have

music[0] = "Country";

and so when you get to this line:

music[0][0] = "JohnnyCash:Live at Folsom Prison"

music[0] is "Country" (because of the earlier assignment), so music[0][0] is "C" and since strings are immutable, assigning to music[0][0] is disallowed.

If you want to have an array at music[0], you need to put an array there, not a string.

You can create that multi-dimensional structure all at once:

var music = [
    [
        "JohnnyCash:Live at Folsom Prison",
        "PatsyCline:Sentimentally Yours",
        "HankWilliams:I'm Blue Inside"
    ],
    [
        "T-Rex:Slider",
        "Nirvana:Nevermind",
        "Lou Reed:Tranformer"
    ],
    [
        "Flipper:Generic",
        "TheDeadMilkmen:Big Lizard in my Backyard",
        "PattiSmith:Easter"
    ]
];

You'll need to hold the category labels ("Country", etc.) separately. One way would be to use objects:

var music = [
    {
        label: "Country",
        entries: [
            "JohnnyCash:Live at Folsom Prison",
            "PatsyCline:Sentimentally Yours",
            "HankWilliams:I'm Blue Inside"
        ]
    },
    {
        label: "Rock",
        entries: [
            "T-Rex:Slider",
            "Nirvana:Nevermind",
            "Lou Reed:Tranformer"
        ]
    },
    {
        label: "Punk",
        entries: [
            "Flipper:Generic",
            "TheDeadMilkmen:Big Lizard in my Backyard",
            "PattiSmith:Easter"
        ]
    }
];

for (var i = 0; i < music.length; ++i) {
  var category = music[i];
  console.log(category.label + ":");
  for (var j = 0; j < category.entries.length; ++j) {
    console.log("* " + category.entries[j]);
  }
}

/* Make the Stack Snippets console full size */
.as-console-wrapper {
  max-height: 100% !important;
}

Or using ES2015+ features:

const music = [
    {
        label: "Country",
        entries: [
            "JohnnyCash:Live at Folsom Prison",
            "PatsyCline:Sentimentally Yours",
            "HankWilliams:I'm Blue Inside"
        ]
    },
    {
        label: "Rock",
        entries: [
            "T-Rex:Slider",
            "Nirvana:Nevermind",
            "Lou Reed:Tranformer"
        ]
    },
    {
        label: "Punk",
        entries: [
            "Flipper:Generic",
            "TheDeadMilkmen:Big Lizard in my Backyard",
            "PattiSmith:Easter"
        ]
    }
];

for (const category of music) {
  console.log(`${category.label}:`);
  for (const entry of category.entries) {
    console.log(`* ${entry}`);
  }
}

/* Make the Stack Snippets console full size */
.as-console-wrapper {
  max-height: 100% !important;
}