Arrays Multidimensionais | JavaScript

Olá, pessoal. Preciso iterar um Array Multidimencional como este em JS, que eu consiga exibir no html os dados das listas separados por Gênero. Alguém poderia me dar uma dica, e também me indicar um curso que ensine sobre isso? O Array seria este:

var locadora = Array();

    locadora['Terror'] = Array('O Exorcista', 'It: A Coisa', 'A Profecia', '1408', 'Drácula');
    locadora['Drama'] = Array('Perfume de Mulher', 'O Poderoso Chefão', 'Estrelas Além do Tempo', 'Gênio Indomável', 'Sociedade dos Poetas Mortos');
    locadora['Ação'] = Array('Identidade Bourne', 'Código de Conduta', 'O Novato', 'A Soma de Todos os Medos', 'Caçada ao Outubro Vermelho')
    locadora['Infantil'] = Array('Toy Story', 'Hotel Transilvânia', 'Space Jam', 'Uma Cilada para Roger Rabbit', 'Vida de Inseto')

Fala Ricardo! Cara, você está tentando indexar seu array com strings e isso não é exatamente legal de se fazer. Na verdade, quando você escreve por exemplo locadora['Terror'] = X, ao invés do seu array ter uma posição chamada 'Terror' com valor X, ele terá uma propriedade na instancia do seu array chamada 'Terror' cujo valor será X, trocando em miúdos, isso certamente não é o que você quer, pois dessa forma seu array terá um comportamento totalmente inesperado e não servirá ao seu propósito original de ser uma lista de dados indexada por inteiros.

Vou colocar aqui pra você uma solução html/js bem mequetrefe que fiz só pra ilustrar o que você pediu na pergunta. Esses tópicos costumam ser abordados em cursos de estruturas de dados, é uma matéria super importante e o conteúdo é reutilizável em todas as linguagens de programação, vai fundo nesse assunto que é sucesso. Espero ter ajudado cara!

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <div id="estante"></div>

        <script>
            var estante = document.querySelector("#estante");

            var locadora = [];

            locadora[0] = ['O Exorcista', 'It: A Coisa', 'A Profecia', '1408', 'Drácula'];
            locadora[1] = ['Perfume de Mulher', 'O Poderoso Chefão', 'Estrelas Além do Tempo', 'Gênio Indomável', 'Sociedade dos Poetas Mortos'];
            locadora[2] = ['Identidade Bourne', 'Código de Conduta', 'O Novato', 'A Soma de Todos os Medos', 'Caçada ao Outubro Vermelho'];
            locadora[3] = ['Toy Story', 'Hotel Transilvânia', 'Space Jam', 'Uma Cilada para Roger Rabbit', 'Vida de Inseto'];

            for(let genero = 0; genero < locadora.length; genero++){
                selecaoGenero(genero);
                for(let filme = 0; filme < locadora[genero].length; filme++){
                    renderizarElemento(locadora[genero][filme], 'p');
                }
            }

            function renderizarElemento(conteudo, tag) {
                let elemento = document.createElement(tag);
                elemento.textContent = conteudo;
                estante.appendChild(elemento);
            } 

            function selecaoGenero(codigoGenero){
                switch(codigoGenero){
                    case 0: 
                        renderizarElemento('Terror', 'h1');
                        break;
                    case 1: 
                        renderizarElemento('Drama', 'h1');
                        break;
                    case 2: 
                        renderizarElemento('Ação', 'h1');
                        break;
                    case 3: 
                        renderizarElemento('Infantil', 'h1');
                        break;
                }
            }
        </script>
    </body>
</html>

Mergulhe em programação