Dificuldade de entender a lógica dos laços

Oi, pessoal, eu tenho tido muita dificuldade de entender a lógica dos laços de repetição.

function desenhaBarra (x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto)

        var somaAltura = 0;

        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }

    }

Eu não consigo compreender qual é o papel que as variáveis i e somaAltura têm dentro dessa função. A somaAltura puxa o valor de somaAltura + altura, e essa altura corresponde aos valores de [50, 25, 20, 5] ou [65, 20, 13, 2] (das variáveis serie2015 e serie2016)? E a variável i é de índice, e corresponde ao tamanho de 4 índices que aparecem dentro dos colchetes (pelo length puxado de serie)?

Pensando nisso, fiz dessa maneira:

function desenhaBarra (x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto);

        var somaAltura = 0;
        var indice = 0;

        while(indice < serie.length) {

            var altura = serie[indice];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[indice]);
            somaAltura = somaAltura + altura;
            indice = indice + 1;

        }

    }

Deu certo, e eu acho que entendi que o indice ou i, quando dentro do [i] de serie puxa os valores do colchete das variáveis. É isso? Se alguém puder detalhar esses conceitos lógicos pra mim, eu agradeço; acho que a aula não foi o suficiente.