Oi Eduardo

O que acontece é que você tem um laço dentro do outro, para cada execução do primeiro laço ele vai rodar tudo do segundo.

O primeiro for na primeira execução nesse caso vai rodar o segundo for que está dentro dele 10 vezes.

O exercício é sobre desenhar linhas e colunas com asterisco mas um laço dentro do outro é utilizado também para outras funcionalidades como percorrer um segundo nível de uma matriz (array), por exemplo:

10    20   30   40  (primeira linha)
100   200  300  400  (segunda linha)

O primeiro FOR iria definir a linha e o segundo iria percorrer item a item como o exemplo acima (10, 20, 30, 40) ai depois que o FOR do centro terminasse ele voltaria para o FOR que está englobando o outro e iria para segunda linha e ai o FOR do centro iria exibir (100, 200, 300, 400)

Pode parecer confuso agora mas com o tempo irá ficar mais fácil o entendimento, quando chegar em array por exemplo você poderá fazer alguns exercícios para praticar.

Boa noite Guilherme, estou com a mesma dúvida do Eduardo e mesmo com a sua explicação não consegui entender com o JS entende que o primeiro FOR são as linhas e o segundo são as colunas. E se eu fizesse um terceiro FOR? Tem algum padrão de primeiro inserir linha, segundo coluna e assim por diante?

Oi Wesley

Não é o Javascript que irá entender, na programação precisamos codificar alguma lógica para resolver algum problema, nesse caso um FOR dentro do outro foi para resolver o exercício de linhas e colunas, vou dar um exemplo diferente aqui pra você entender que não se trata de linhas e colunas e também não é o Javascript que entende isso e sim a lógica que você aplicou para algum problema.

O exemplo será adicionar números decimais a uma variável, lembre-se que esse não é o único jeito ou o melhor jeito, é só para exemplo de um FOR dentro do outro:

<script>
  var numero = 0;
  // o primeiro for é para a casa dos números inteiros
  for (var inteiro = 1; inteiro <= 9; inteiro++) {
    numero = inteiro; // aqui estou atribuindo o valor da variável do primeiro for
    document.write(numero); 
    document.write('<br>');

    // aqui no segundo for estou inserindo o decimal imprimindo o número, a virgula e o decimal
    for (var decimal = 1; decimal < 10; decimal++) {
      document.write(numero + ',' + decimal);
      document.write('<br>');
    }
  }
</script>

Veja que no exemplo não se trata agora de linhas e colunas, está só contando de 1 a 9,9.