Loops while e for loops. Parte 5 Curso de JavaScript do iniciante ao avançado em 10 posts

Esta é a parte 5 da série de postagens do blog JavaScript que o levará do iniciante ao avançado. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a codificar em JavaScript. Sem mais delongas, vamos começar com o quinto tutorial.

Loops while e for loops – índice:

1. Estruturas de Controle (continuação)
2. Enquanto loops
3. Para loops

Este tutorial pressupõe que você tenha seguido o 4º tutorial da série, tanto em termos de configuração quanto em termos de conhecimento. Continuaremos com a configuração que temos no 4º tutorial, portanto, se você o fechou por algum motivo, pode conferir o tutorial anterior para obter as instruções passo a passo completas. Como resultado teremos nosso Google Chrome aberto, e mais especificamente a parte de snippets aberta para escrever e executar nosso código. Se você tem isso pronto, você é bom para ir com este tutorial.

Estruturas de Controle (continuação)

No tutorial anterior vimos o uso de if, else if e else para controlar o fluxo do nosso código. É ótimo que agora tenhamos mais controle sobre nosso código, mas se você perceber, só podemos executar tudo uma vez. Por exemplo, se você quiser dizer "Olá, tudo bem!" dez vezes, você precisaria escrever 10 linhas de código diferentes que dizem exatamente a mesma coisa. Não existe uma maneira melhor de conseguir isso? Você realmente precisa se repetir no código tantas vezes? A resposta é não, de jeito nenhum.

Como programador, você quer que seu código seja DRY. DRY aqui significa Don't Repeat Yourself. Sim, você pode ocasionalmente repetir algumas partes do código se fizer sentido no momento, mas como objetivo geral você deve ter como objetivo ter um código DRY. Dessa forma, na maioria das vezes você terá um código mais limpo e com menor possibilidade de erros.

Para não nos repetirmos no código, usaremos loops. Mais especificamente “loops while” e “loops for”. Vamos começar com loops while e do que se trata.

Enquanto loops

Enquanto os loops seguem uma lógica simples. E fica da seguinte forma:

Execute o código fornecido entre parênteses, enquanto a condição for verdadeira.

Dito isso, também devemos ter cuidado com o código que escrevemos com loops while, porque se a condição nunca se tornar falsa, esse código dentro do parêntese será executado para sempre, a menos que a execução seja interrompida. É por isso que vamos querer implementar algum tipo de mudança que faça com que o loop do porquê pare. Vamos ver isso com um exemplo.

let hungry = true;
while (hungry) {
    alert("Eat food");
    hungry = false;
}

No exemplo acima, executaremos o código de alerta que nos diz para comer apenas uma vez. Isso ocorre porque no início definimos o faminto como verdadeiro, então começaremos a executar o código dentro do loop while. Mas ao executar o código, uma linha define o estado com fome como falso. Então, após a primeira execução, agora temos o estado com fome definido como falso, e nisso sabemos que o código while não será executado novamente. Agora vamos ver outro exemplo onde o código é executado várias vezes.

let targetNumber = 10;
let currentNumber = 0;
while (currentNumber < targetNumber) {
    alert("Hello User!");
    currentNumber++;
}

O que você acha que vai acontecer com esse código? Vai mostrar ao usuário algum alerta? Se sim, quantos alertas vamos mostrar ao usuário?

Se você adivinhou que alertaremos o usuário 10 vezes no total, acertou! Se não, pense novamente e veja se você consegue desta vez. O que fazemos neste código é começar com um currentNumber para rastrear quantas vezes exibimos o alerta para o usuário. Cada vez que exibirmos o alerta para o usuário, também o incrementaremos em um. O símbolo ++, se você se lembra, é usado para incrementar um determinado número em um. No início, ainda não exibimos ao usuário nenhum alerta, então começamos com zero e continuamos até atingir um número de exibição de 10.

Uma coisa que você deve prestar atenção aqui é que, como estamos verificando um número menor que 10, o código dentro dos parênteses não será executado quando o número atual atingir 10, pois não satisfaz mais a condição de ser menor que o targetNumber.

Embora tenhamos aumentado o número em um no final de cada loop, não existe uma regra que diga que você só pode aumentá-lo ou diminuí-lo dentro de um loop while. E esta é uma grande vantagem de usar loops while. Eles são usados ​​em lugares onde você não sabe necessariamente quantas vezes você vai executar o código. Por exemplo, você pode criar um jogo e manter um jogador no jogo, desde que ele não perca o jogo. Durante esta sessão de jogo, o usuário pode ganhar pontos ou perder pontos por um período de tempo indeterminado e você pode encerrar o jogo quando estiver abaixo de um determinado ponto, como zero.

De vez em quando também pode haver momentos em que você deseja executar o código dentro dos parênteses pelo menos uma vez dentro de um loop while. Por exemplo, imagine um cenário em que você primeiro faz um lanche e eles decidem se você está com fome ou não. Você sabe que quer comer alguma coisa, mas não sabe necessariamente por muito tempo. Em casos como esses, podemos usar um tipo de loop while chamado “do while loops”.

let reallyHungry = false;
do {
    alert("Eat some food.");
} while (reallyHungry);

Neste caso, embora não estivéssemos realmente com fome, comemos primeiro e depois decidimos se comíamos mais ou não. Isso é algo que podemos fazer com os loops do while. Observe que, como não temos um mecanismo para informar ao computador quando estamos cheios, esse código gostaria de ser executado para sempre se transformássemos o reallyHungry em true. É por isso que ainda é necessário implementar algum tipo de mecanismo de parada dentro do nosso bloco de código. Isso pode ser qualquer coisa, desde dar um nível de fome para que possamos aumentá-lo ou defini-lo como “true” em algum lugar em nosso código.

While loop é especialmente ótimo para condições em que não sabemos quantas vezes temos que executar nosso código. Mas há muitas vezes em que realmente sabemos exatamente quantas vezes devemos executar um pedaço de código. Para esses momentos, geralmente usaremos “For Loops”.

Para loops

Os loops for são muito semelhantes aos loops while, mas têm certas características que os tornam mais preferíveis em muitos casos. For loops introduz certos limites que você deve definir desde o início e esses limites podem tornar seu código mais seguro para executar. Com loops for, informamos ao computador exatamente quantas vezes queremos executar um pedaço de código. Dessa forma, sabemos que nosso código não se transformará em um loop infinito que deseja executar para sempre.

// greet the user 5 times, or 5 users once!
for (let numberGreeted = 0; numberGreeted < 5; numberGreeted++){
    alert("Hello User!");
}

No código acima saudamos o usuário por 5 vezes. Se você observar mais de perto o loop for, poderá ver que é quase um loop while especializado que é mais definido e mais seguro de executar. Por exemplo, com um loop while podemos obter exatamente a mesma saída com o seguinte código:

let numberGreeted = 0;
while (numberGreeted < 5) {
    alert("Hello User!");
    numberGreeted++;
}

Como você pode ver, com um loop for quase carregamos algumas partes do código dentro do parêntese que define as condições do loop for. Para que saibamos que as variáveis ​​que queremos usar definitivamente existem, sabemos que o valor que estamos verificando é incrementado e sabemos que a execução será interrompida antes de atingir o número de destino.

Vimos que podemos começar com um número para usar dentro de um loop for e incrementá-lo em um. Mas e se você quiser incrementá-lo em 5? ou se você realmente precisar decrementá-lo em um? Poderíamos também alcançar aqueles com loops for? Bem, sim podemos. Ao definir um laço for, desde que você comece com uma condição inicial e termine com outra condição de forma controlada, temos um laço for funcionando. Por exemplo, podemos criar uma contagem regressiva que começa em 5:

for (let countDown = 5; countDown > 0; countDown--){
    alert(countDown + "!");
}

Observe que, para que os números decrementados funcionem, precisamos começar com o número grande em primeiro lugar. Quando começarmos a executar este código, uma das primeiras coisas que acontecerá é que teremos uma variável countDown criada para nós, e o valor dessa variável será definido como número 5. O próximo passo é verificar a condição fornecida em relação as variáveis. Depois de criar a variável na iteração inicial do loop, a regra de iteração que colocamos será aplicada ao final de cada iteração.

No último exemplo, definimos “countDown — ” como “O que mudará no final de cada iteração?”. Neste caso, estamos diminuindo o número um. E antes de iniciar cada nova iteração, a condição que definimos também é verificada. A condição que definimos no último exemplo foi:

“countDown > 0”, o que significa que este loop for continuará a executar o código que fornecemos enquanto a variável countDown for maior que 0.

Também podemos incrementar o número em mais de um, na direção positiva ou negativa. Por exemplo, podemos começar com um número pequeno e aumentá-lo a uma taxa que queremos:

for (let someVariable = 0; someVariable < 15; someVariable = someVariable + 5){
    alert(someVariable);
}

A execução deste código resultará em alertar o usuário com: 0, 5 e 10.

Estas são as principais características dos laços for. Você acabou de ver os dois principais tipos de loop, ou seja, o loop while e o loop for. Ambos são bastante usados ​​tanto em programação em geral quanto em JavaScript. Usaremos esses loops dependendo de nossas necessidades, por isso é importante entender o básico deles. Se você acha que está um pouco confortável com esses tópicos, no próximo tutorial veremos outro conceito importante em JavaScript.

Autor: Robert Whitney

Especialista e instrutor em JavaScript que treina departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando outras pessoas a cooperar efetivamente durante a codificação.

Ver todas as postagens

Curso de JavaScript do iniciante ao avançado em 10 posts:

1. Como começar a codificar em JavaScript?
2. Noções básicas de JavaScript
3. Variáveis ​​e diferentes tipos de dados em JavaScript
4. Trechos e estruturas de controle
5. loops while e loops for
6. Matriz Java
7. Funções JavaScript
8. Objetos JavaScript
9. Métodos JavaScript e muito mais
10. Resumo do curso de JavaScript