Fluxo, loops e exercício

O programa da Casa da Restinga nem sempre segue em linha reta. Às vezes escolhe um caminho. Às vezes repete um passo. Este capítulo ensina if, comparação, let, while e for, e termina com um exercício de repetir um caractere.

O exemplo está em exemplos/15-fluxo-loops/. Natal, fictício. Este volume tem 23 capítulos. Abra index.html e o console (F12).

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Escolher com if, else if e else.
• Distinguir = (atribui) de === (compara).
• Evitar == neste volume.
• Repetir com while e for.
• Usar let quando o valor muda.
• Reconhecer o laço infinito.

Se, senão

if pergunta. Se a resposta for verdadeira, o bloco entre { } corre. else é o outro caminho.

const ceuAzul = true;

if (ceuAzul) {
  console.log("Céu azul na Ponta Negra.");
} else {
  console.log("Céu… não tão azul?");
}

A pergunta fica entre parênteses. Um bloco corre; o outro é pulado. Você pode omitir o else: se a pergunta for falsa, nada acontece.

Mude uma coisa. Troque true por false. Preveja a segunda frase. Recarregue e leia o console.

Erro comum: esquecer as chaves e deixar duas linhas “dentro” do if. Só a primeira pertence à decisão.

Atribuir não é comparar

Um = guarda um valor no nome. const lotado = true lê: lotado recebe verdadeiro.

Três iguais === perguntam se os dois lados são o mesmo valor e o mesmo tipo.

if (2 + 2 === 4) {
  console.log("A conta de xícaras ainda fecha.");
} else {
  console.log("Pânico na Restinga?");
}

== (dois iguais) converte tipos no silêncio. "2" == 2 passa. "2" === 2 falha. Neste volume, use ===.

!== pergunta se é diferente. Com números também existem >, >=, <, <=.

Mude uma coisa. Troque === 4 por === 5. Preveja a frase de pânico. Recarregue e confira.

Erro comum: if (lotado = true). Um = sozinho atribui e a pergunta vira “sempre verdadeiro”, além de falhar com const.

Mais de dois caminhos

else if testa uma segunda pergunta quando a primeira falhou.

const amigosNaCasa = 10;

if (amigosNaCasa === 0) {
  console.log("O pão de queijo é todo meu.");
} else if (amigosNaCasa <= 4) {
  console.log("Mesa da varanda, conversa baixa.");
} else {
  console.log("Abre a playlist da Restinga.");
}

Só um bloco corre. A ordem das perguntas importa: a primeira verdadeira ganha.

Mude uma coisa. Ponha amigosNaCasa em 3. Preveja a frase da varanda. Recarregue e confira.

Erro comum: três if soltos em vez de else if. Dois blocos podem correr juntos e a mensagem se contradiz.

let quando o valor muda

const não deixa reatribuir. Para um contador que sobe, use let.

let amigosNaCasa = 0;
amigosNaCasa = amigosNaCasa + 1;
amigosNaCasa += 1;
amigosNaCasa++;
console.log(amigosNaCasa);

+= 1 soma e guarda. ++ soma um. -=, *= e /= existem. Prefira i++ (depois do nome), que é o hábito em JavaScript.

var é o jeito antigo. Neste volume, const por padrão e let quando precisa mudar. Sem var.

Princípio: use a ferramenta menos poderosa que resolve. Tesoura, não tesoura de jardim, para o cabelo.

Mude uma coisa. Troque o let por const na primeira linha e mantenha as reatribuições. Preveja um erro no console. Recarregue. Volte para let.

Erro comum: let amigosNaCasa; sem valor e já usar na conta. O nome existe, o valor é undefined, a conta quebra.

while: enquanto for verdade

while parece um if que se repete. Enquanto a pergunta for verdadeira, o bloco corre de novo.

let amigosNaCasa = 0;
while (amigosNaCasa < 10) {
  amigosNaCasa = amigosNaCasa + 1;
}
console.log(amigosNaCasa);

Quando chega a 10, 10 < 10 é falso. O laço para. Sem a linha que soma, a pergunta nunca muda: laço infinito. A aba trava.

// não rode: nunca termina
// let n = 1;
// while (n > 0) {
//   n = n + 1;
// }

Mude uma coisa. Troque < 10 por < 3. Preveja 3 no console. Recarregue e confira.

Erro comum: copiar o while infinito “para ver”. Feche a aba se o navegador congelar.

for: três peças no parêntese

for é o laço mais comum. Dentro dos parênteses: início; pergunta; passo no fim de cada volta.

let amigosNaCasa = 0;
for (let i = 0; i < 10; i++) {
  amigosNaCasa++;
}
console.log(amigosNaCasa);

i é o nome tradicional do contador. Poderia ser volta. Em programação, a contagem costuma começar em 0. O quinto item de uma lista é o índice 4.

i < 10 com i começando em 0 dá dez voltas: 0 a 9.

Mude uma coisa. Troque i < 10 por i <= 10. Preveja onze voltas e o número 11. Recarregue e confira.

Erro comum: esquecer o i++. i não anda, a pergunta permanece verdadeira, o laço não acaba.

Exercício: repetir um caractere

Em experimentos.js (ou no arquivo do exemplo):

1. Declare caractere e vezes.
2. Com um laço, some o caractere a um texto vazio, vezes vezes.
3. console.log do texto final.

Se caractere for "f" e vezes for 5, o console mostra fffff. Teste também "a" e 10, "c" e 100, "☕" e 3.

Não olhe as respostas ainda. O objetivo é traduzir a frase em código. O programa em si não serve café: serve para você treinar.

Mude uma coisa. Depois de acertar, troque só vezes para 1. Preveja um único caractere. Recarregue e confira.

Erro comum: começar o texto com um espaço ou com o caractere já preenchido. O ponto de partida é a string vazia "".

Atividades

1. Qual a diferença entre = e ===?
2. Por que este volume evita ==?
3. No for (let i = 0; i < 3; i++), quais valores i assume?
4. No exercício do caractere, qual o valor inicial do texto que vai crescendo?

Respostas comentadas

1. = guarda. === pergunta se valor e tipo são os mesmos.
2. == converte tipos. "4" == 4 passa e esconde o erro. === mostra a diferença.
3. 0, depois 1, depois 2. Quando i vira 3, a pergunta falha e o laço para.
4. A string vazia "". Cada volta faz texto = texto + caractere. Com "f" e 5, o console mostra fffff. Um for típico: for (let i = 0; i < vezes; i++) { texto = texto + caractere; }.

Referências

• if…else
• Igualdade estrita
• let
• while
• for

O arquivo completo

Referência do exemplo 15-fluxo-loops, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Experimentos JS — Casa da Restinga</title>
<link href="assets/stylesheets/main.css" rel="stylesheet"/>
<script defer="" src="experiments.js"></script>
<style>body{overflow-wrap:anywhere}img,input,textarea,select{max-width:100%}img{height:auto}fieldset,main{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}</style></head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header>
<div class="wrap">
<a class="brand" href="index.html">Casa da Restinga</a>
<nav aria-label="Principal">
<ul>
<li><a aria-current="page" href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Experimentos JavaScript</h1>
<p>Abra o console (F12). Você deve ver manhã, 10 e fffff.</p>
</main>
<footer>
<div class="wrap">
<p>Casa da Restinga — Natal. Conteúdo fictício. Nada é enviado a um servidor.</p>
</div>
</footer>
</body>
</html>

experiments.js

const hora = 8;
if (hora < 12) {
  console.log("manhã");
}
let amigosNaCasa = 0;
while (amigosNaCasa < 10) {
  amigosNaCasa = amigosNaCasa + 1;
}
console.log(amigosNaCasa);
const caractere = "f";
const vezes = 5;
let texto = "";
for (let i = 0; i < vezes; i++) {
  texto = texto + caractere;
}
console.log(texto);