logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Aninhamento de loops e condicionais

Quando usamos loops dentro de loops e condicionais dentro de condicionais, isto é chamado de aninhamento (nesting). Vamos ver abaixo dois exemplos.

Aninhamento de Condicionais

Digamos que um formulário receba duas informações sobre uma pessoa: a idade e se ela é ou não sócia de um clube. Baseado nestas informações, temos que apresentar o preço de um evento para este perfil. Temos 4 faixas de preço:

  • Sócios: Grátis
  • Não sócios menores de 18 anos: R$ 6,00
  • Não sócios maiores de 18 maiores de 18 anos: R$ 12,00
  • Maiores de 65 anos: Grátis
  • Vamos primeiro abrir um condicional para testar se é sócio ou a idade é superior a 65 anos, se o teste retornar positivo, o ingresso é grátis. Senão, chegamos à situação de não sócios menores de 65 anos. Mas dentro desta condição ainda temos preços diferentes para maiores e menores de 18 anos, portanto teremos que aninhar um condicional.

                        
        var socio = false;
        var idade = 25;
        
        if (socio == true || idade >= 65) {
            console.log('O ingresso é grátis');
        } else {
    
            if (idade < 18) {
                console.log('O ingresso custa: R$ 6,00');
            } else {
                console.log('O ingresso custa: R$ 12,00');
            }
        }
    
        // O console mostrará 'O ingresso custa: R$ 12,00'
    
                        
                    
    Aninhamento de Loops

    Muitas vezes é comum ter que usar loops aninhados. Quando queremos percorrer os elementos de um array ou de um objeto, usamos um loop. Mas caso algum elemento deste array/objeto seja também um array ou objeto, teremos que aninhar outro loop para percorrer seus elementos.

    Como exemplo, temos uma lista de funcionários. Cada funcionário é um objeto com algumas propriedades. Uma destas propriedades é a lista de filhos. Para criar uma lista de filhos de funcionários, precisamos aninhar dois loops:

                        
        <p>
            Lista de filhos dos funcionários:
            <ul id="filhos">
    
            </ul>
        </p>
                        
                    
                        
        var funcionarios = [
            
            {
                'nome': 'Carlos Henrique da Silva',
                'idade': 45,
                'filhos': ['Mariana Alves da Silva', 'Fernanda Alves da Silva']
                
            },
    
            {
                'nome': 'Maria Helena Pereira',
                'idade': 32,
                'filhos': ['João Pedro Pereira de Souza']
                
            },
    
            {
                'nome': 'José Feliciano Maia',
                'idade': 39,
                'filhos': ['Felipe Ferreira Maia', 'Fábio Ferreira Maia', 'João Ferreira Maia']
                
            }
        
        ];
            
        var list_element = document.getElementById("filhos");
    
        for (var a = 0 ; a < funcionarios.length ; a++) {
            if (funcionarios[a].filhos) {
                
                var lista_filhos = funcionarios[a].filhos;
                
                for (var b = 0 ; b < lista_filhos.length ; b++) {
                    list_element.innerHTML += '<li>' + lista_filhos[b] + ' - Filho(a) de ' + funcionarios[a].nome + '</li>';
    
                }
            }
        }
    
                        
                    

    Lista de filhos dos funcionários:


    Índice de Aulas