Loops avançados: for…in e for…of
Seja bem-vindo à segunda aula do módulo 4! Nesta etapa, você explorará dois tipos de loops avançados em JavaScript: for…in e for…of. Aprenda como iterar sobre objetos e arrays de maneira mais eficiente e flexível, expandindo seu repertório de ferramentas para controlar o fluxo de seus programas.
For…in
O loop for…in é uma estrutura em JavaScript que nos permite percorrer as propriedades de um objeto.
Ele é especialmente útil quando queremos realizar alguma ação com base nessas propriedades. Vamos entender melhor como funciona.
Imagine que você tem uma caixa com vários objetos dentro. Cada objeto tem suas próprias características, como cor, tamanho, forma, etc.
O loop for…in funciona como um olhar atento para cada objeto dentro da caixa, um de cada vez. Ele pega um objeto, verifica suas propriedades e permite que você faça algo com elas.
Para utilizar o for…in, você precisa definir uma variável para representar cada objeto da caixa.
Essa variável será atualizada a cada iteração do loop, permitindo que você acesse e manipule as propriedades do objeto em questão.
Aqui está a estrutura básica do for…in:
for (variavel in objeto) {
// código a ser executado para cada propriedade
}
Dentro do loop, você pode realizar as operações desejadas usando a variável que representa cada propriedade do objeto.
Essas operações podem incluir exibir a propriedade, modificar seu valor, realizar cálculos com base em suas características, entre outras.
É importante destacar que o for…in não é recomendado para percorrer arrays, pois ele itera sobre as propriedades enumeráveis do objeto e não necessariamente na ordem dos índices do array.
Para arrays, o for…in pode não garantir a ordem correta dos elementos.
Portanto, o for…in nos permite percorrer as propriedades de um objeto de forma organizada e realizar ações com base nessas propriedades.
É como inspecionar cada objeto em uma caixa e fazer algo com suas características individuais.
For…of
O loop for…of é uma estrutura em JavaScript que nos permite percorrer elementos de uma coleção, como um array, de forma mais simplificada.
Ele é especialmente útil quando queremos iterar sobre os valores de uma coleção, sem nos preocuparmos com os índices ou propriedades associadas.
Podemos imaginar o for…of como um professor que pega uma lista de alunos e os chama um por um, permitindo que você faça algo com cada um deles.
Em vez de se preocupar com a posição de cada aluno na lista, você pode se concentrar apenas em interagir com eles individualmente.
Aqui está a estrutura básica do for…of:
for (variavel of colecao) {
// código a ser executado para cada elemento
}
A variável definida no for…of representa cada elemento da coleção, um de cada vez, à medida que o loop avança.
Você pode usar essa variável para acessar e manipular os valores dos elementos da coleção.
Uma vantagem do for…of é que ele lida automaticamente com a iteração sobre coleções iteráveis, como arrays, strings, mapas, conjuntos, entre outros.
Ele percorre cada elemento da coleção, executando o código dentro do loop para cada um deles, de forma simples e direta.
Ao usar o for…of, você não precisa se preocupar com a obtenção de índices ou acessar as propriedades dos elementos. Você pode se concentrar nas ações que deseja realizar em cada elemento individualmente.
Em resumo, o for…of é uma forma simplificada de percorrer os elementos de uma coleção, permitindo que você interaja com eles sem se preocupar com os índices ou propriedades associadas.
É como um professor chamando os alunos um por um para que você possa se concentrar neles individualmente.
Desafio:
- Crie um script JavaScript que cria um objeto com as informações de um cliente (nome, idade, cidade).
- Itere sobre as propriedades do objeto e exiba cada informação na tela.
- Crie um array com as compras de um cliente (produto, preço).
- Itere sobre os elementos do array e calcule o total das compras.
Agora que você já aprendeu sobre os loops for…in e for…of, está pronto para explorar ainda mais a iteração em arrays com os métodos forEach, map, filter e reduce.
Essas poderosas ferramentas permitirão que você manipule e transforme os elementos de um array de maneira mais concisa e eficiente.
