Qual a diferença entre for in e for of em JavaScript

Neste artigo você vai aprender qual a diferença entre for in e for of em JavaScript, e também como utilizar cada uma das instruções

Fala programador(a), beleza? Bora aprender mais sobre estas duas estruturas de repetição de JavaScript!

Tanto for in quanto for of vão iterar em uma lista, para nos entregar valores das mesmas

Porém o for in nos retorna os índices de cada elemento, já o for of nos retorna nos elementos da lista

Isso pode ser facilmente observado no código a seguir:

let arr = [1, 2, 3];

for (let i in arr) {
   console.log(i); // "0", "1", "2",
}

for (let i of arr) {
   console.log(i); // 1, 2, 3
}

Ou seja, para acessarmos os itens em for in precisamos colocar o nome do array e acessar o elemento pelo índice dinâmico

Veja um outro exemplo:

let arr = [1, 2, 3];

for (let i in arr) {
   console.log(arr[i]); // "1", "2", "3",
}

Agora sim conseguimos acessar os elementos da lista!

Uma outra utilização do for in é iterar em objetos, veja:

const obj = {name: "Matheus", age: 30}

for(let i in obj) {
	console.log(i)
}

Conseguimos desta maneira obter facilmente os nomes das propriedades

E consequentemente obter os valores, utilizando a notação de colchetes

Conclusão

No artigo de hoje você aprendeu a diferença entre for in e for of em JavaScript

Em for of conseguimos iterar os arrays para receber os valores dos elementos

Já em for in recebemos apenas os índices, que podem ser utilizados para receber os valores de cada um dos elementos do array

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!