{"id":35054,"date":"2024-05-13T12:19:43","date_gmt":"2024-05-13T15:19:43","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&#038;p=35054"},"modified":"2024-05-15T10:20:23","modified_gmt":"2024-05-15T13:20:23","slug":"for-javascript","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/for-javascript\/","title":{"rendered":"For JavaScript: como usar o loop da linguagem?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Os loops s\u00e3o fundamentais em qualquer linguagem de programa\u00e7\u00e3o, e em <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-javascript\/\"><span style=\"font-weight: 400;\">JavaScript<\/span><\/a><span style=\"font-weight: 400;\"> n\u00e3o \u00e9 diferente!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neste artigo, vamos explorar o uso do<\/span><b> loop &#8220;for&#8221; em JavaScript,<\/b><span style=\"font-weight: 400;\"> entender como ele funciona e ver exemplos pr\u00e1ticos do seu uso. Al\u00e9m disso, discutiremos as diferen\u00e7as entre <\/span><b>for\/in<\/b><span style=\"font-weight: 400;\"> e <\/span><b>for\/of<\/b><span style=\"font-weight: 400;\">. Vamos l\u00e1!\u00a0<\/span><\/p>\n<h2>O que \u00e9 um loop em JavaScript?<\/h2>\n<p><span style=\"font-weight: 400;\">Um loop em JavaScript \u00e9 uma estrutura de controle fundamental que permite a repeti\u00e7\u00e3o de um bloco de c\u00f3digo v\u00e1rias vezes. Essa repeti\u00e7\u00e3o \u00e9 executada enquanto uma condi\u00e7\u00e3o espec\u00edfica permanecer verdadeira. Em outras palavras, um loop permite automatizar tarefas repetitivas, evitando a necessidade de escrever o mesmo c\u00f3digo v\u00e1rias vezes.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Imagine que voc\u00ea precise executar uma determinada tarefa v\u00e1rias vezes, como imprimir uma mensagem no console cinco vezes seguidas. Em vez de escrever a instru\u00e7\u00e3o de impress\u00e3o cinco vezes, voc\u00ea pode usar um loop para fazer isso de forma mais eficiente.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/conheca-as-linguagens-de-programacao-mais-utilizadas-do-mercado\/\"><span style=\"font-weight: 400;\">linguagem de programa\u00e7\u00e3o<\/span><\/a><span style=\"font-weight: 400;\"> JavaScript oferece v\u00e1rias formas de implementar loops, mas todos eles seguem o mesmo princ\u00edpio b\u00e1sico: repetir um bloco de c\u00f3digo enquanto uma condi\u00e7\u00e3o for verdadeira.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essas condi\u00e7\u00f5es podem ser baseadas em contadores, valores de arrays, propriedades de objetos ou qualquer outra express\u00e3o que possa ser avaliada como verdadeira ou falsa.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A capacidade de usar loops \u00e9 fundamental para escrever c\u00f3digo JavaScript eficiente e elegante. Eles permitem lidar com grandes conjuntos de dados, processar listas, realizar c\u00e1lculos repetitivos e muito mais, tudo de forma automatizada e concisa.\u00a0<\/span><\/p>\n<h3>O que \u00e9 o For?<span style=\"font-weight: 400;\">\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">O &#8220;for&#8221; em JavaScript \u00e9 uma estrutura de controle de loop utilizada para repetir um bloco de c\u00f3digo v\u00e1rias vezes, com base em uma condi\u00e7\u00e3o espec\u00edfica. Ele \u00e9 uma das estruturas de loop mais comuns e vers\u00e1teis na linguagem JavaScript.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00c9 frequentemente utilizado quando se sabe exatamente quantas vezes deseja-se executar um bloco de c\u00f3digo, tornando-o ideal para itera\u00e7\u00f5es sobre arrays, manipula\u00e7\u00e3o de dados ou execu\u00e7\u00e3o de tarefas repetitivas.<\/span><\/p>\n<h2>Como funciona o For em JavaScript?<span style=\"font-weight: 400;\">\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A estrutura do &#8220;for&#8221; \u00e9 composta por tr\u00eas partes essenciais: <\/span><b>a inicializa\u00e7\u00e3o, a condi\u00e7\u00e3o e o incremento.<\/b><span style=\"font-weight: 400;\"> Essas partes s\u00e3o definidas entre par\u00eanteses logo ap\u00f3s a palavra-chave &#8220;for&#8221;, proporcionando um controle preciso sobre o fluxo do loop.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inicializa\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> A primeira parte do &#8220;for&#8221; \u00e9 a inicializa\u00e7\u00e3o, onde voc\u00ea define e inicializa uma vari\u00e1vel de controle do loop. Esta vari\u00e1vel \u00e9 geralmente utilizada como um contador, que ser\u00e1 atualizado a cada itera\u00e7\u00e3o do loop.\u00a0<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">for (let i = 0; i &lt; 5; i++) { <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Neste exemplo, a vari\u00e1vel &#8220;i&#8221; \u00e9 inicializada com o valor 0. Isso geralmente representa o \u00edndice inicial de uma cole\u00e7\u00e3o ou o contador do loop.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Condi\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\"> A segunda parte do &#8220;for&#8221; \u00e9 a condi\u00e7\u00e3o, onde voc\u00ea especifica a condi\u00e7\u00e3o que determina se o loop deve continuar ou n\u00e3o. Enquanto essa condi\u00e7\u00e3o for verdadeira, o bloco de c\u00f3digo dentro do loop continuar\u00e1 a ser executado.\u00a0<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">for (let i = 0; i &lt; 5; i++) { <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Neste caso, a condi\u00e7\u00e3o \u00e9 &#8220;i &lt; 5&#8221;. Enquanto &#8220;i&#8221; for menor do que 5, o loop continuar\u00e1 a ser executado.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Incremento\/Decremento:<\/b><span style=\"font-weight: 400;\"> A terceira parte do &#8220;for&#8221; \u00e9 o incremento ou decremento, onde voc\u00ea atualiza a vari\u00e1vel de controle do loop a cada itera\u00e7\u00e3o. Isso geralmente envolve aumentar ou diminuir o valor do contador.\u00a0<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">for (let i = 0; i &lt; 5; i++) { <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Aqui, &#8220;i++&#8221; significa que o valor de &#8220;i&#8221; ser\u00e1 incrementado em 1 a cada itera\u00e7\u00e3o.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O loop &#8220;for&#8221; \u00e9 extremamente vers\u00e1til e pode ser usado em uma variedade de situa\u00e7\u00f5es. Desde percorrer arrays e objetos at\u00e9 repetir a\u00e7\u00f5es espec\u00edficas um n\u00famero determinado de vezes, o &#8220;for&#8221; \u00e9 uma ferramenta indispens\u00e1vel para muitos desenvolvedores JavaScript.\u00a0<\/span><\/p>\n<h2>Exemplos do uso de for em JavaScript<span style=\"font-weight: 400;\">\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Vamos ver alguns exemplos do uso do loop &#8220;for&#8221; em JavaScript (2 mais simples e 1 mais complexo):\u00a0<\/span><\/p>\n<h3><b>Exemplo 1: Imprimir n\u00fameros de 1 a 5<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/h3>\n<pre><span style=\"font-weight: 400;\">for (let i = 1; i &lt;= 5; i++) { <\/span>\r\n<span style=\"font-weight: 400;\">  \u00a0 console.log(i);\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">Neste exemplo, estamos utilizando um loop &#8220;for&#8221; para imprimir os n\u00fameros de 1 a 5 no console.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>let i = 1;<\/b><span style=\"font-weight: 400;\">: Aqui, inicializamos a vari\u00e1vel <\/span><b>i<\/b><span style=\"font-weight: 400;\"> com o valor 1. Este ser\u00e1 o nosso contador, come\u00e7ando do n\u00famero 1.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>i &lt;= 5;<\/b><span style=\"font-weight: 400;\">: Esta \u00e9 a condi\u00e7\u00e3o do loop. Enquanto <\/span><b>i<\/b><span style=\"font-weight: 400;\"> for menor ou igual a 5, o loop continuar\u00e1 a ser executado.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>i++<\/b><span style=\"font-weight: 400;\">: Ap\u00f3s cada itera\u00e7\u00e3o do loop, incrementamos o valor de <\/span><b>i<\/b><span style=\"font-weight: 400;\"> em 1. Isso garante que o loop progrida para o pr\u00f3ximo n\u00famero.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Durante cada itera\u00e7\u00e3o do loop, o valor de <\/span><b>i<\/b><span style=\"font-weight: 400;\"> \u00e9 impresso no console usando <\/span><b>console.log(i)<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ent\u00e3o, o resultado desse c\u00f3digo ser\u00e1:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">1 <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">2<br \/>\n<span style=\"font-weight: 400;\">3<br \/>\n<span style=\"font-weight: 400;\">4 <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">5\u00a0<\/span><\/span><\/span><\/p>\n<h3>Exemplo 2: Iterar por um array<span style=\"font-weight: 400;\">\u00a0<\/span><\/h3>\n<pre><span style=\"font-weight: 400;\">const frutas = [\"ma\u00e7\u00e3\", \"banana\", \"laranja\", \"morango\"]; <\/span>\r\n<span style=\"font-weight: 400;\">for (let i = 0; i &lt; frutas.length; i++) { <\/span>\r\n<span style=\"font-weight: 400;\">\u00a0 \u00a0 console.log(frutas[i]); <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Neste exemplo, estamos utilizando um loop &#8220;for&#8221; para iterar sobre os elementos do array <\/span><b>frutas<\/b><span style=\"font-weight: 400;\"> e imprimir cada elemento no console.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>let i = 0;<\/b><span style=\"font-weight: 400;\">: Aqui, inicializamos a vari\u00e1vel <\/span><b>i<\/b><span style=\"font-weight: 400;\"> com o valor 0. Esta vari\u00e1vel ser\u00e1 o nosso \u00edndice para acessar cada elemento do array.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>i &lt; frutas.length;<\/b><span style=\"font-weight: 400;\">: A condi\u00e7\u00e3o do loop verifica se o valor de <\/span><b>i<\/b><span style=\"font-weight: 400;\"> \u00e9 menor que o comprimento do array <\/span><b>frutas<\/b><span style=\"font-weight: 400;\">. Enquanto essa condi\u00e7\u00e3o for verdadeira, o loop continuar\u00e1 a ser executado.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>i++<\/b><span style=\"font-weight: 400;\">: Ap\u00f3s cada itera\u00e7\u00e3o do loop, incrementamos o valor de <\/span><b>i<\/b><span style=\"font-weight: 400;\"> em 1 para acessar o pr\u00f3ximo elemento do array.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Durante cada itera\u00e7\u00e3o do loop, usamos <\/span><b>console.log(frutas[i])<\/b><span style=\"font-weight: 400;\"> para imprimir o elemento atual do array <\/span><b>frutas<\/b><span style=\"font-weight: 400;\"> correspondente ao \u00edndice <\/span><b>i<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ent\u00e3o, o resultado desse c\u00f3digo ser\u00e1:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ma\u00e7\u00e3 <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">banana <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">laranja <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">morango\u00a0<\/span><\/p>\n<h3>Exemplo 3 (Mais complexo): Criar uma tabela HTML com dados<span style=\"font-weight: 400;\">\u00a0<\/span><\/h3>\n<pre><span style=\"font-weight: 400;\">&lt;body&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Dados do Usu\u00e1rio&lt;\/h2&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;table id=\"tabela-dados\"&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;thead&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;tr&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;th&gt;Nome&lt;\/th&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;th&gt;Idade&lt;\/th&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;th&gt;Profiss\u00e3o&lt;\/th&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;\/tr&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;\/thead&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;tbody id=\"corpo-tabela\"&gt;&lt;\/tbody&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/table&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;script&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">const usuarios = [\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">{ nome: \"Jo\u00e3o\", idade: 30, profissao: \"Engenheiro\" },\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">{ nome: \"Maria\", idade: 25, profissao: \"Designer\" },\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">{ nome: \"Pedro\", idade: 35, profissao: \"Programador\" }\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">];\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">const corpoTabela = document.getElementById(\"corpo-tabela\");\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">for (let i = 0; i &lt; usuarios.length; i++) {\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">const usuario = usuarios[i];\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">const tr = document.createElement(\"tr\");\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">tr.innerHTML = `\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;td&gt;${usuario.nome}&lt;\/td&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;td&gt;${usuario.idade}&lt;\/td&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">&lt;td&gt;${usuario.profissao}&lt;\/td&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">`;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">corpoTabela.appendChild(tr);\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span> <span style=\"font-weight: 400;\">}\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/script&gt;\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Aqui \u00e9 definido um array chamado usuarios, contendo objetos que representam dados de usu\u00e1rios. Cada objeto possui propriedades como nome, idade e profissao.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O loop \u201cfor\u201d come\u00e7a declarando uma vari\u00e1vel i igual a 0. A condi\u00e7\u00e3o especificada \u00e9 i &lt; usuarios.length, o que significa que o loop continuar\u00e1 enquanto o valor de i for menor que o n\u00famero de elementos no array usuarios.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A cada itera\u00e7\u00e3o do loop:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">const usuario = usuarios[i];: \u00c9 criada uma vari\u00e1vel usuario que recebe o objeto atual do array usuarios na posi\u00e7\u00e3o i.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">const tr = document.createElement(&#8220;tr&#8221;);: \u00c9 criado um elemento &lt;tr&gt; (linha da tabela) para cada objeto de usu\u00e1rio.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">tr.innerHTML = &#8230;;: \u00c9 definido o conte\u00fado HTML da linha da tabela. Aqui, o template string \u00e9 usado para inserir os valores das propriedades do objeto usuario dentro das c\u00e9lulas &lt;td&gt; (colunas) da tabela.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">corpoTabela.appendChild(tr);: A linha da tabela \u00e9 adicionada ao corpo da tabela.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">E o resultado \u00e9 esse:\u00a0<\/span><\/p>\n<table style=\"height: 270px;\" width=\"553\">\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">Nome\u00a0\u00a0\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Idade\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Profiss\u00e3o\u00a0\u00a0\u00a0\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Jo\u00e3o\u00a0\u00a0\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">30<\/span> <span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Engenheiro\u00a0\u00a0\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Maria\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">25<\/span> <span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\"> \u00a0 \u00a0 Designer<\/span> <span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Pedro\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">35<\/span> <span style=\"font-weight: 400;\">\u00a0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Programador\u00a0<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Aproveite todo o potencial do JavaScript com a Hospedagem da Locaweb!<span style=\"font-weight: 400;\">\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Quer desenvolver aplica\u00e7\u00f5es incr\u00edveis em JavaScript e garantir que elas estejam sempre dispon\u00edveis na web?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Conhe\u00e7a nossos servi\u00e7os de <\/span><a href=\"https:\/\/www.locaweb.com.br\/hospedagem-de-sites-com-dominio-gratis\/\"><span style=\"font-weight: 400;\">Hospedagem de Sites<\/span><\/a><span style=\"font-weight: 400;\"> e conte com toda a estrutura necess\u00e1ria para impulsionar seus projetos!\u00a0<\/span><\/p>\n<p><b>Como funcionam for\/in e for\/of?<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m do tradicional &#8220;for&#8221;, JavaScript oferece outras formas de loops, como o &#8220;for\/in&#8221; e o &#8220;for\/of&#8221;, cada um com sua pr\u00f3pria finalidade e aplica\u00e7\u00e3o.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">for\/in: Este loop \u00e9 utilizado para iterar sobre as propriedades enumer\u00e1veis de um objeto. Ele percorre todas as propriedades de um objeto, incluindo as propriedades herdadas da cadeia de prot\u00f3tipos.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Por exemplo:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">const carro = {marca: \"Ford\", modelo: \"Focus\", ano: 2010};\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">for (let chave in carro) {\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">\u00a0 \u00a0 console.log(chave + \": \" + carro[chave]);\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Neste exemplo, o loop &#8220;for\/in&#8221; itera sobre as chaves do objeto carro. A cada itera\u00e7\u00e3o, a vari\u00e1vel chave cont\u00e9m o nome de uma propriedade do objeto, que \u00e9 usada para acessar o valor correspondente.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">for\/of: Este loop \u00e9 utilizado para iterar sobre os valores de um objeto iter\u00e1vel, como arrays, strings, mapas, sets, entre outros. Ele retorna os valores em si, em vez dos \u00edndices ou chaves.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Por exemplo:\u00a0<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">const cores = [\"vermelho\", \"verde\", \"azul\"];\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">for (let cor of cores) {\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">\u00a0 \u00a0 console.log(cor);\u00a0 <\/span>\r\n<span style=\"font-weight: 400;\">}\u00a0<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Neste caso, o loop &#8220;for\/of&#8221; itera sobre os valores do array cores. A cada itera\u00e7\u00e3o, a vari\u00e1vel cor cont\u00e9m o valor atual do array.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O &#8220;for&#8221; \u00e9 uma ferramenta poderosa em JavaScript, permitindo a repeti\u00e7\u00e3o de um bloco de c\u00f3digo v\u00e1rias vezes. Entender como usar o &#8220;for&#8221;, juntamente com as varia\u00e7\u00f5es &#8220;for\/in&#8221; e &#8220;for\/of&#8221;, \u00e9 essencial para o desenvolvimento eficaz em JavaScript. Experimente esses loops em seus pr\u00f3prios projetos e explore todo o potencial da linguagem.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Aproveite que est\u00e1 nessa jornada de conhecimento sobre JavaScript e confira nossos conte\u00fados sobre <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/timestamp\/\"><span style=\"font-weight: 400;\">Timestamp<\/span><\/a><span style=\"font-weight: 400;\"> e <\/span><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/foreach-javascript\/\"><span style=\"font-weight: 400;\">ForEach JavaScript<\/span><\/a><span style=\"font-weight: 400;\">!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os loops s\u00e3o fundamentais em qualquer linguagem de programa\u00e7\u00e3o, e em JavaScript n\u00e3o \u00e9 diferente! Neste artigo, vamos explorar o uso do loop &#8220;for&#8221; em JavaScript, entender como ele funciona e ver exemplos pr\u00e1ticos do seu uso. Al\u00e9m disso, discutiremos as diferen\u00e7as entre for\/in e for\/of. Vamos l\u00e1!\u00a0 O que&#8230;<\/p>\n","protected":false},"author":30,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[107],"ht-kb-tag":[],"class_list":["post-35054","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-criador-de-sites"],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/35054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/comments?post=35054"}],"version-history":[{"count":5,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/35054\/revisions"}],"predecessor-version":[{"id":35066,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/35054\/revisions\/35066"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/media?parent=35054"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-category?post=35054"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-tag?post=35054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}