Neste artigo vamos focar na utilização das estruturas condicionais e estruturas de repetição em JavaScript e de seus conceitos.
Curso JavaScript - Fundamentos
Conhecer o cursoAs estruturas condicionais estão ligadas à tomada de decisão de um algoritmo. Ao utilizar expressões que retornam verdadeiro ou falso, o algoritmo executa o bloco de comandos relativos a este resultado.
Já no caso das estruturas de repetição, elas são úteis quando precisamos repetir N vezes a execução de um bloco de comandos até que uma condição seja atendida.
Caso você não esteja familiarizado com os conceitos de estruturas condicionais e estruturas de repetição, aconselho a leitura de nosso artigo Estruturas condicionais e de repetição.
Os exemplos serão executados utilizando o console do navegador, caso você não saiba executar um código JavaScript, leia nosso artigo Executando seu primeiro código com JavaScript.
Estruturas condicionais no JavaScript
Como utilizar a estrutura condicional ‘if(se)’ no JavaScript
Vamos aprender a utilizar as estruturas condicionais no JavaScript, começando pelo uso do if(se), else if e else(senão).
Primeiramente precisamos entender a sintaxe, podemos simplificar com o exemplo abaixo:
if (idade > 18){
console.log("Você é obrigado a votar");
}
No exemplo nós utilizamos a palavra if seguido da condição idade > 18 . Ou seja, caso a variável idade seja maior que 18 (verdadeiro), os comandos que estarão no bloco serão executados, se tratando do exemplo, será executado o comando console.log("Você é obrigado a votar").
Porém este exemplo não está completo, afinal, há quem não pode votar e também o voto opcional. Podemos utilizar os operadores lógicos na condição para deixar mais robusto o nosso exemplo:
if (idade > 15 && idade < 18 || idade > 70){
console.log("O voto é opcional");
}
Agora nós criamos uma estrutura condicional utilizando if e os operadores lógicos && (E) e ||(OU), mas ainda podemos deixar mais completo o nosso exemplo utilizando a estrutura else if :
if (idade > 15 && idade < 18 || idade > 70) {
console.log("O voto é opcional")
}else if (idade < 16) {
console.log("Você não pode votar");
}
Como se pode ver, utilizamos o else if para impor outro bloco de comandos caso a primeira condição do if não fosse atendida, neste caso nós teremos o seguinte resultado:
Contudo, para finalizar o nosso exemplo, precisamos também informar quando o voto é obrigatório. Percebe-se que é, justamente, o intervalo de idade que as condições que estão em nosso if / else if não estão abrangendo, portanto, podemos somente adicionar um else, ficando desta forma:
if (idade > 15 && idade < 18 || idade > 70) {
console.log("O voto é opcional")
}else if (idade < 16) {
console.log("Você não pode votar");
}else {
console.log("Você é obrigado a votar");
}
Obtendo o seguinte resultado:
Neste exemplo mostramos como é possível atribuir um comportamento de tomada de decisão utilizando as estruturas condicionais if, else if e else no JavaScript.
Em algumas situações onde trabalhamos com inúmeros if / else e com valores pré-definidos nas condições, podemos utilizar a instrução Switch Case.
Como utilizar Switch Case no JavaScript
Outra estrutura condicional do JavaScript que podemos utilizar é o Switch Case.
O Swith Case é uma instrução que se comporta de forma semelhante ao if / else, porém possui uma estrutura mais organizada e de fácil compreensão. Lembrando que só é aceito valores pré-definidos e não expressões condicionais.
Podemos analisar a estrutura do Switch Case no seguinte exemplo:
let signo = 'Leão';
switch (signo) {
case 'Áries':
console.log("De 21 março a 20 abril");
break;
case 'Touro':
console.log("de 21 abril a 20 maio");
break;
case 'Gêmeos':
console.log("de 21 maio a 20 junho");
break;
case 'Câncer':
console.log("de 21 junho a 22 julho");
break;
case 'Leão':
console.log("de 23 julho a 22 agosto");
break;
case 'Virgem':
console.log("de 23 agosto a 22 setembro");
break;
default:
console.log("Signo não registrado");
break;
}
Neste caso nós temos uma variável que recebe um signo, e então, devemos exibir qual o intervalo de nascimento referente a esse signo. Seria muito mais complexo utilizar if / else para este exemplo do que o switch case.
Ao analisar o exemplo, ao lado do switch atribuímos a variável signo, neste caso ele pede a expressão que será comparada a cada case. Sendo verdadeiro com alguma das opções, os comandos do bloco são executados até atingir a palavra-chave break. Caso nenhuma das opções seja verdadeira, a instrução irá executar os comandos que estarão na opção default.
Ao executar o exemplo acima, obtemos o seguinte resultado:
Curso React - Dominando Componentes Funcionais
Conhecer o cursoEstruturas de repetição no JavaScrpit
Agora vamos aprender a utilizar as estruturas de repetição no JavaScript, como: while, for, for…in e for…of.
Como utilizar while(enquanto) no JavaScript
Podemos utilizar a estrutura de repetição while caso seja necessário repetir um bloco de comandos por N vezes.
let i = 0;
while(i < 11){
console.log('5 x ' + i + ' = ' + 5*i);
i++;
}
A sintaxe do while, como vemos no exemplo acima, é bem simples. Utilizamos a palavra reservada while , logo em seguida precisamos passar uma condição que será atendida enquanto ela retornar true, ou seja, verdadeiro.
Neste caso, simulamos a tabuada do 5, a variável i é o nosso contador, iniciamos ela com o valor 0 , portanto a condição será verdadeira até que ela atinja o valor 11, e por isso ela é iterada a cada repetição - i++, ao atingir tal valor o laço é quebrado.
Executando o código acima teremos o seguinte resultado:
Utilizando Do-While
O do-while tem o mesmo conceito que o while com uma única diferença, a condição é verificada após os comandos do bloco serem executados, ou seja, mesmo que a condição seja falsa, é garantia que o bloco será executado ao menos uma vez.
Podemos testar da seguinte forma:
let contador = 0;
do{
console.log("O contador vale: " + contador);
contador++;
}while(contador == 1)
A variável contador foi inicializada com o valor 0 e o while está com a condição contador == 1 ou seja, a condição é falsa e utilizando o while nosso bloco de comandos não seria executado. Porém podemos perceber que ao utilizar do-while, o bloco vem antes da verificação da condição, com isso ele garante que o bloco de comandos seja executado ao menos uma vez.
Desta forma vamos obter o seguinte comportamento:
Como utilizar For(para) no JavaScript
A estrutura de repetição for no JavaScript segue o mesmo princípio que o while, porém este recurso é mais utilizado quando se sabe o número de iterações da repetição, como ao percorrer um vetor, por exemplo.
Podemos replicar o exemplo acima da tabuada, porém utilizando for:
for(let i = 0; i < 11; i++){
console.log("5 x " + i + " = " + 5*i);
}
Para utilizar o for, usamos a palavra-chave for seguida de três declarações, primeiramente iniciamos a variável que será o controlador do nosso laço de repetição, logo em seguida precisamos informar a condição a ser atendida e, por último, uma expressão que será executado ao final de cada iteração do for, normalmente utilizamos para incrementar a variável que será utilizada como controlador do nosso laço.
Ao executar o código teremos o resultado semelhante ao exemplo utilizando while:
OBS: Vale ressaltar que o while é mais indicado para situações onde não temos conhecimento do número de iterações do laço, já o for é mais adequado para situações que o número de iterações está definido previamente.*
Utilizando for…in e for…of
No JavaScript, nós temos mais duas variações da utilização do for, o for…in e for…of.
O for…in é utilizado para percorrer as propriedades de um objeto, por exemplo:
let carro = {
marca: 'ford',
modelo: 'fiesta',
cor: 'prata',
}
for (propriedade in carro) {
console.log(propriedade);
}
Criamos uma instância do objeto carro, onde temos como propriedade a marca, modelo e cor.
Ao utilizar o for, passamos a variável que irá percorrer as propriedades do objeto e logo em seguida, de qual objeto.
O resultado esperado:
Também podemos acessar os atributos de cada propriedade, para isso basta usarmos propriedadecomo índice do nosso objeto, desta maneira:
for (propriedade in carro) {
console.log(carro[propriedade]);
}
Vamos obter a seguinte saída:
E por fim, podemos exibir o objeto por completo somente usando o for…in:
for (propriedade in carro) {
console.log(propriedade + ': ' + carro[propriedade]);
}
O for…of nós podemos utilizar para percorrer objetos iteráveis como Maps, Sets e Vetores de forma simples e eficaz, da seguinte forma:
let carros = [ 'fiesta', 'onix', 'fusca', 'saveiro' ];
for (let carro of carros) {
console.log(carro);
}
Neste caso, vamos obter os valores de cada índice:
Também é possível exibir o índice referente a cada item usando o método entries()da seguinte forma:
for (let [index, carro] of carros.entries()) {
console.log(index, carro);
}
Desta maneira vamos obter os índices e os respectivos valores:
Existem outras maneiras que podemos utilizar para percorrer vetores, aconselho a leitura de nosso artigo Métodos de Arrays que você deve conhecer aqui da TreinaWeb :D
Conclusão
Neste artigo aprendemos a utilizar as estruturas condicionais if, else if e else, e as estruturas de repetição while, for, for…in e for…of no JavaScript.
Lembrando que são conceitos fundamentais para o seu desenvolvimento no estudo de qualquer linguagem de programação.
Formação Desenvolvedor JavaScript
Conhecer a formaçãoPor fim, caso queira aprender mais sobre JavaScript saiba que aqui na TreinaWeb temos o curso JavaScript - Fundamentos que possui 07h13 de vídeos e um total de 93 exercícios. Conheça também nossos outros cursos de JavaScript.
Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:
- Como os computadores funcionam;
- O primeiro código no navegador e no Node.js;
- Declaração de variáveis e operadores;
- Tomadas de decisão e laços de repetição;
- Trabalhando com Numbers, Strings, Arrays, Objects e Functions;
- Vários exercícios;
- Vários desafios de programação direto no navegador;
- Projeto prático para fixar o que foi aprendido.
