{"id":846,"date":"2024-05-05T18:02:27","date_gmt":"2024-05-05T21:02:27","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=846"},"modified":"2025-11-13T12:11:00","modified_gmt":"2025-11-13T15:11:00","slug":"loops-no-javascript","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/loops-no-javascript\/","title":{"rendered":"Loops no Javascript"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Loops no Javascript<\/strong>: Em programa\u00e7\u00e3o, o conceito de Loop<\/strong> \u00e9 fundamental. Essas estruturas de controle permitem que um bloco de c\u00f3digo seja executado repetidamente enquanto uma condi\u00e7\u00e3o Booleana<\/strong> for verdadeira. Os loops<\/em> automatizam tarefas, processam cole\u00e7\u00f5es de dados e evitam a repeti\u00e7\u00e3o manual de c\u00f3digo.<\/p>\n\n\n\n

Em JavaScript, dividimos os loops<\/em> em duas categorias principais: Controladores de Contagem\/Condi\u00e7\u00e3o<\/strong> e Iteradores de Cole\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Loops Cl\u00e1ssicos: Controlando a Contagem ou Condi\u00e7\u00e3o<\/h2>\n\n\n\n

Estes loops<\/em> exigem que o desenvolvedor gerencie a condi\u00e7\u00e3o e a vari\u00e1vel de controle manualmente.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. for<\/code>: Para Contagens Conhecidas<\/h3>\n\n\n\n

O for<\/code> \u00e9 o loop<\/em> mais comum, usado quando se sabe o n\u00famero exato<\/strong> de repeti\u00e7\u00f5es. A l\u00f3gica de controle \u00e9 condensada em tr\u00eas partes no cabe\u00e7alho:<\/p>\n\n\n\n

    \n
  1. Inicializa\u00e7\u00e3o:<\/strong> Define a vari\u00e1vel de controle (Ex: let i = 0<\/code>).<\/li>\n\n\n\n
  2. Condi\u00e7\u00e3o:<\/strong> A regra para continuar (Ex: i < 10<\/code>).<\/li>\n\n\n\n
  3. Incremento\/Decremento:<\/strong> Atualiza a vari\u00e1vel ap\u00f3s cada itera\u00e7\u00e3o (Ex: i++<\/code>).<\/li>\n<\/ol>\n\n\n\n

    JavaScript<\/p>\n\n\n\n

    for (let i = 0; i < 5; i++) {\n  console.log(\"Itera\u00e7\u00e3o: \" + i); \n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. while<\/code>: Para Condi\u00e7\u00f5es Flex\u00edveis<\/h3>\n\n\n\n
    O while<\/code> executa o bloco enquanto<\/strong> a condi\u00e7\u00e3o for verdadeira. \u00c9 ideal quando o n\u00famero de repeti\u00e7\u00f5es \u00e9 desconhecido e depende de fatores externos (Ex: leitura de um arquivo, intera\u00e7\u00e3o com o usu\u00e1rio).<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    \n
    Aten\u00e7\u00e3o:<\/strong> Voc\u00ea deve garantir que a condi\u00e7\u00e3o se torne falsa dentro do bloco para evitar um loop<\/em> infinito.<\/p>\n<\/blockquote>\n\n\n\n
    <\/div>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    let contador = 0;\nwhile (contador < 3) {\n  console.log(\"Passo: \" + contador);\n  contador++; \/\/ A instru\u00e7\u00e3o de mudan\u00e7a \u00e9 manual\n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    C. do...while<\/code>: Execu\u00e7\u00e3o Garantida<\/h3>\n\n\n\n
    Semelhante ao while<\/code>, mas a condi\u00e7\u00e3o \u00e9 verificada ap\u00f3s<\/strong> a primeira execu\u00e7\u00e3o. Isso garante que o bloco de c\u00f3digo seja executado pelo menos uma vez<\/strong>.<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    let i = 10;\ndo {\n  console.log(\"Eu rodo primeiro.\");\n  i++;\n} while (i < 5); \/\/ Condi\u00e7\u00e3o falsa, mas executou uma vez.\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    2. Iteradores Modernos: Simplificando Cole\u00e7\u00f5es<\/h2>\n\n\n\n
    Estes loops<\/em> foram introduzidos para tornar a itera\u00e7\u00e3o sobre cole\u00e7\u00f5es (Arrays e Objetos) mais limpa e menos propensa a erros de \u00edndice.<\/p>\n\n\n\n
    <\/div>\n\n\n\n
    A. for...of<\/code>: Iterando Valores<\/strong> (Arrays, Strings)<\/h3>\n\n\n\n
    O for...of<\/code> itera diretamente sobre os valores<\/strong> dos elementos de qualquer objeto iter\u00e1vel (como Arrays<\/strong>, Strings<\/strong> e Mapas<\/strong>).<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    let frutas = [\"ma\u00e7\u00e3\", \"banana\"];\n\n\/\/ Itera sobre o VALOR do elemento\nfor (const fruta of frutas) {\n  console.log(\"Comprando: \" + fruta); \n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. for...in<\/code>: Iterando Chaves<\/strong> (Objetos)<\/h3>\n\n\n\n
    O for...in<\/code> itera sobre as chaves<\/strong> (nomes das propriedades) de um objeto.<\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
    let pessoa = { nome: \"Ana\", idade: 30 };\n\n\/\/ Itera sobre as CHAVES ('nome', 'idade')\nfor (let chave in pessoa) {\n  \/\/ Acesso ao valor da propriedade via nota\u00e7\u00e3o de colchetes\n  console.log(chave + \": \" + pessoa[chave]); \n}\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    \n
    Dica:<\/strong> Para iterar sobre arrays<\/em>, prefira for...of<\/code> ou o m\u00e9todo de array<\/em> forEach()<\/code>. O for...in<\/code> \u00e9 mais adequado e seguro para a itera\u00e7\u00e3o de propriedades de objetos<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
    <\/div>\n\n\n\n
    3. Controle de Loops<\/h2>\n\n\n\n
    Dois comandos s\u00e3o usados para modificar o fluxo de execu\u00e7\u00e3o dentro de um loop<\/em>:<\/p>\n\n\n\n