Desenvolvimento Front-end Javascript Estruturas condicionais e estruturas de repetição em JavaScript

Neste artigo veremos como utilizar as estruturas condicionais (if, else) e as estruturas de repetição (while, for) no JavaScript.

Wesley Gado 23 de fevereiro de 2021

Neste artigo vamos focar na utilização das estruturas condicionais e estruturas de repetição em JavaScript e de seus conceitos.

JavaScript - Fundamentos
Curso de JavaScript - Fundamentos
CONHEÇA O CURSO

As 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").

Utilizando estruturas - IF

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:

Utilizando estruturas condicionais - ELSE IF

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:

Utilizando estruturas condicionais no Javascript - ELSE

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:

Utilizando estruturas condicionais - Switch Case

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Estruturas 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 estruturas de repetição - While

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:

Utilizando do-while

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:

Utilizando estruturas de repetição no Javascript - FOR

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:

Utilizando estruturas de repetição no Javascript - FOR IN

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:

Acessando atributos for in

E por fim, podemos exibir o objeto por completo somente usando o for…in:

for (propriedade in carro) {
    console.log(propriedade + ': ' + carro[propriedade]);
}

Exibindo objetos for in

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:

Utilizando estruturas de repetição no Javascript - FOR OF

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:

Utilizando estruturas de repetição no Javascript - FOR OF

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 😀

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.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Wesley Gado
    Wesley Gado

    Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

    Posts desse Autor

Artigos relacionados