Atividade gráfico Dificuldade coma função for() e uso de arrays

<canvas width="600" height="400"></canvas>

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    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;
        }
    }

    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

</script>

Bom dia, Anailton! Tudo bem?

Vamos por partes...

1) "ele declarou variáveis"

Lembre-se que uma variável serve para armazenar um dado. Depois que uma variável é declarada, nós conseguimos usar o nome desta variável para poder acessar e manipular o valor que ela guarda, certo?!

2) "declarou as variáveis com os arrays ele colocou como nome dos arrays "serie2015", "serie2016" e "Cores"

Sim, conforme você explicou, ele fez a** declaração das variáveis** do tipo array (um tipo de dado que que consegue agrupar vários valores). O trecho do código foi:

var cores = ['blue','green','yellow', 'red'];
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];

3) "Já quando foi chamar o array a ser varrido dentro do for() ele usou apenas a seguinte expressão, serie.length, o que no código serviu para todos os arrays antes declarados nas variaveis."

Lembra que as variáveis servem para armazenar valores para depois a gente acessar e usar eles? Então, o que aconteceu foi:

Primeiro o professor chamou uma função criada, que se chama "desenhaBarra". Ao chamar esta função, ele precisou passar para a função algumas informações entre parênteses. Essas informações são chamadas de parâmetros. Veja no trecho do código do professor:

desenhaBarra(50, 50, serie2015, cores, '2015');
desenhaBarra(150, 50, serie2016, cores, '2016');

Então a primeira vez que ele chama a função 'desenhaBarra' ele passa os valores (50, 50, serie2015, cores, '2015') como parâmetros. E o que acontece após isso? Analise o trecho do código da funçã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;
    }
}

Percebe que ela espera receber valores entre parênteses? (x, y, serie, cores, texto). São exatamente os valores que o professor passa como informação quando ele chama a função. Então na primeira vez que a funçao foi chamada os valores de x, y, serie, cores, texto são, respectivamente, 50, 50, serie2015, cores, '2015'. Então, a nível de estudo, vamos substituir eles visivelmente e ver como fica?

Vou reescrever o código da função, com os parâmetros passados, somente para visualizar como ela ficaria:

function desenhaBarra(50, 50, serie2015, cores, '2015') {

    desenhaTexto(50, 50 - 10, '2015');

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

Consegue visualizar o que acontece? As variáveis da função irão receber valores que a gente passar. Neste caso foi:

 x = 50;
 y = 50;
 serie = serie2015;
 cores = cores;
 texto = '2015';

Agora vamos analisar a segunda vez que ele chama a função. Na segunda vez ele escreveu: desenhaBarra(150, 50, serie2016, cores, '2016');. Logo, desta vez, os valores passados como parâmetros da função "desenhaBarra(x, y, serie, cores, texto)", agora são, respectivamente, "150, 50, serie2016, cores, '2016'".

Reescrevendo a função só para visualizar como ela vai funcionar, com estes valores, ficaria assim:

function desenhaBarra(150, 50, serie2016, cores, '2016') {

    desenhaTexto(150, 50 - 10, '2016');

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

Consegue entender o que acontece? Novamente as variáveis receberam valores. Neste caso foi:

 x = 150;
 y = 50;
 serie = serie2016;
 cores = cores;
 texto = '2016';

A vantagem aqui é que nós não precisamos escrever códigos repetidos (igual eu fiz ao reescrever a função duas vezes para ver como ficaria). Porque podemos criar um trecho de código isolado, que será a nossa função.

Depois nós podemos chamar esta função, quantas vezes a gente quiser, usando o nome da função (neste caso desenhaBarra) e passar pra ela as informações, ou seja, os parâmetros, que queremos que ela use. Assim, ela irá fazer a funcionalidade, sem que a gente precise escrever todas aquelas linhas de código repetidamente, pois a função fará todo o papel ao receber os valores e irá executar a funcionalidade que a gente instruiu ela a fazer.