Fluxo de controle: if, else, switch, for e while
Crie ramificações com if/else e switch, repita com for e while e use break e continue para controlar a iteração.
Fluxo de controle: if, else, switch, for e while é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é fluxo de controle?
O fluxo de controle determina qual código é executado e quantas vezes. JavaScript oferece condicionais (if/else, switch) e laços (for, while, do/while) para direcionar o caminho de execução com base em condições e dados.
se / senão se / senão
A condicional mais fundamental. A condição entre parênteses é avaliada como verdadeira ou falsa. Várias condições são encadeadas com else if. O else final trata todos os demais casos.
const score = 75;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else {
console.log('F');
}O operador ternário
O operador ternário é uma forma compacta, escrita em uma única linha, de uma condicional: condition ? trueValue : falseValue. Use-o em atribuições simples e expressões JSX. Evite aninhar operadores ternários — eles rapidamente se tornam ilegíveis.
const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';
// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>Instrução switch
switch compara um valor com vários casos usando igualdade estrita. Use break após cada caso para evitar a execução dos casos seguintes. default trata valores sem correspondência.
const day = 'Monday';
switch (day) {
case 'Saturday':
case 'Sunday':
console.log('Weekend');
break;
case 'Monday':
console.log('Start of work week');
break;
default:
console.log('Weekday');
}Laço for
O laço for clássico no estilo C: inicialização; condição; incremento. É ideal para iterar um número conhecido de vezes ou percorrer matrizes por índice.
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}Laço for...of
for...of percorre os valores de qualquer iterável (matrizes, cadeias de caracteres, mapas e conjuntos). É mais limpo que um laço for baseado em índices quando o índice não é necessário.
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
for (const char of 'hello') {
console.log(char); // h e l l o
}Laço for...in
for...in percorre as chaves de propriedade enumeráveis de um objeto. Não o use em matrizes — prefira for...of ou os métodos de matriz.
const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
console.log(`${key}: ${user[key]}`);
}Laço while
O laço while é executado enquanto sua condição for verdadeira. Use-o quando o número de iterações não for conhecido antecipadamente — por exemplo, para ler a entrada até que o usuário informe um valor válido.
let attempts = 0;
let success = false;
while (!success && attempts < 3) {
// try something
attempts++;
success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);Laço do...while
do...while executa o corpo pelo menos uma vez antes de verificar a condição. É útil quando o corpo precisa ser executado antes que seja possível avaliar a condição de saída.
let input;
do {
input = prompt('Enter a number:');
} while (isNaN(Number(input)));break e continue
break sai imediatamente do laço atual. continue ignora o restante da iteração atual e passa para a próxima. Ambos funcionam nos laços for, while e do/while.
for (let i = 0; i < 10; i++) {
if (i === 3) continue; // skip 3
if (i === 7) break; // stop at 7
console.log(i); // 0 1 2 4 5 6
}Avaliação por curto-circuito
&& retorna o primeiro valor falso ou o último valor. || retorna o primeiro valor verdadeiro ou o último valor. ?? (coalescência de nulos) retorna o lado direito somente se o lado esquerdo for nulo ou indefinido.
const name = user && user.name; // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000; // 3000 only if port is null/undefinedVerificação rápida
Qual laço tem a garantia de executar o corpo pelo menos uma vez?
Recapitulação: fluxo de controle do JavaScript
if/else para ramificações. switch para vários valores distintos. Laço for para iterações conhecidas. for...of para iteráveis. while para um número desconhecido de iterações. do...while para garantir pelo menos uma execução. break sai dos laços. continue ignora iterações. Operadores de curto-circuito para condicionais concisas.
Perguntas Frequentes
A aula “Fluxo de controle: if, else, switch, for e while” é grátis?
Sim — o texto completo de “Fluxo de controle: if, else, switch, for e while” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Fluxo de controle: if, else, switch, for e while”?
Crie ramificações com if/else e switch, repita com for e while e use break e continue para controlar a iteração. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Fluxo de controle: if, else, switch, for e while”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Variáveis: let, const, var e escopo
- Tipos de dados: string, number, boolean, null e undefined
- Funções: declarações, expressões e funções de seta
- Fluxo de controle: if, else, switch, for e while