Sobre o Loop FOR | Lógica de programação: laços e listas com JavaScript

Eu sinceramente, não consegui entender NADA sobre o funcionamento do loop FOR, mesmo revendo as aulas

//codigo do carro

let yCarros = [40, 96, 150];
let xCarros = [600, 600, 600]
let velocidadeCarros = [2, 2.5, 3.2];


function mostraCarro() {
  for (let i = 0; i < imagemCarros.length; i = i + 1){
  image(imagemCarros[i], xCarros[i], yCarros[i], 50, 40);
  }
}

function movimentaCarro() {
  for (let i = 0; i < imagemCarros.length; i = i + 1){
      xCarros[i] -= velocidadeCarros[i];
  }
}

function voltaPosicaoInicialDoCarro(){
  for (let i = 0; i > imagemCarros.length; i = i + 1) {
      if (passouTodaATela(xCarros[1])) {
    xCarros[i] = 600;
    }
  }
}

function passouTodaATela(xCarro){
  return xCarro < -50;
}

Alguém poderia me explicar de uma vez por todas como funciona esse bendito Loop? agradeço.

Olá Marcos, sou iniciante na programação também mas vou tentar te ajudar.

O loop é um laço/ciclo como preferir, um exemplo é a rotina diária de boa parte das pessoas:

    Dia 1: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoais, dormir.

    Dia 2: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoais, dormir.

    Dia 3: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoais, dormir.

    Dia 4: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoais, dormir.

    Dia 5: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoais, dormir.

... Isso se repete até o fim do ciclo (Fim de semana kkk).

O "for" basicamente fica repetindo uma instrução, a rotina que escrevi acima poderia ter sido escrita desta forma:

for (i = 1; i < 6; i = i + 1) {
    Dia **i**: Acordar, fazer higiene pessoal, tomar café, ir para o trabalho, almoçar, ir para o trabalho, voltar para casa, tomar banho, jantar, atividades pessoas, dormir.
}

Em vez de eu ficar digitando isso várias vezes as rotinas do Dia 1, 2, 3 etc. o "for" cria um laço de repetição e segue a instrução que foi definida. Digitar uma repetição de 5 dias foi fácil, agora imagina imprimir na tela 1 ano (365 dias!!!) ou mais, é impraticável.

Depois dessa analogia vamos tentar olhar para uma parte do código:

function mostraCarro() {
  for (let i = 0; i < imagemCarros.length; i = i + 1){
  image(imagemCarros[i], xCarros[i], yCarros[i], 50, 40);
  }
}

Dá para perceber que o i começa em 0 e vai até o tamanho total da variável imagemCarros.length que é 3.

1 - No primeiro ciclo i = 0, portanto é VERDADE, imagemCarros.length que é 3 é menor que 0, o primeiro carro é mostrado na tela.

Então a instrução i = i + 1 é executada e i passa a valer 1.

2 - No segundo ciclo como o i = 1, portanto é VERDADE, imagemCarros.length que é 3 é menor que 1, o segundo carro é mostrado na tela.

Então a instrução i = i + 1 é executada e i passa a valer 2.

3 - No terceiro ciclo como o i = 2, portanto é VERDADE, imagemCarros.length que é 3 é menor que 2, o terceiro carro é mostrado na tela.

Então a instrução i = i + 1 é executada e i passa a valer 3.

4 - No quarto ciclo como o i = 3, portanto é FALSO, imagemCarros.length que é 3 é igual a 3, o loop (for) é finalizado.