Tag: Loop

Publicado em

Diferenças entre for…of e for…in

Você conhece o loop For…Of?

Este loop é específico para iterar entre os elementos de uma lista. Ele percorre objetos iterativos, chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.

Sintaxe:

for (variavel of iteravel){
   //Seu código aqui
}

Você pode fazer a leitura como: “Para cada item de uma lista”. No exemplo, dia começará com o valor “segunda” e o último valor será “sexta”.

O for…of percorre a lista de forma crescente, então ele irá mostrar de forma crescente os valores do seu vetor. Simples, não?

E o for..in?

O laço de repetição for…in interage sobre as propriedades enumeradas de um objeto, em sua ordem original de inserção. O laço pode ser executado para cada uma das propriedades distintas do seu objeto. É recomendável não adicionar, remover ou alterar propriedades do objeto durante a execução do laço for…in, pois, se uma propriedade é deletada durante a execução do loop, ela se torna indisponível para ser acessada depois. O loop for in retorna uma string com o nome das propriedades e seus respectivos valores

A sua sintaxe é:

for (variavel in objeto) {
    //Seu código aqui
}

Mas e quais são as suas diferenças entre os dois laços?

for…in

O loop for…in é usado para percorrer as propriedades de um objeto. Por exemplo:

let objetoComum = {
    nome: 'Nome',
    idade: '30'
}
for (let propriedade in objetoComum){
    console.log("Propriedade " + propriedade + "=" + objetoComum[propriedade])
}

for…of

Já o loop for…of é usado para percorrer objetos iteráveis, como Array, Map etc.

Utilizando o mesmo exemplo, mas usando o for…of:

let objetoComum = {
    nome: 'Nome',
    idade: '30'
}
for (let propriedade of objetoComum){
    console.log(propriedade)
}

Teremos a saída:

objetoComum is not iterable

Temos essa saída pois o nosso objeto não é iterável.

Agora, se obtivermos um objeto iterável, seria o seguinte:

let arrayComum = [10, 20, 30, 40, 50]

for (let elemento of arrayComum){
    console.log(elemento)
}

Nossa saída seria:

10
20
30
40
50

Gostou deste artigo? Comente abaixo!

Publicado em

Laço FOR em JavaScript

O laço FOR é uma estrutura de repetição muito utilizada em JavaScript. Este laço de repetição utiliza uma variável, que controlará a contagem do loop, podendo ser utilizada na forma de incremento ou decremento. É um comando que se faz muito útil quando se sabe de antemão quantas vezes a repetição será executada.

No JavaScript, o laço de repetição FOR poderá ser utilizado de quatro formas diferentes, sendo a mais usual:

PRIMEIRA FORMA (FOR)

Laço for com INCREMENTO:
// O laço de repetição for utiliza uma variável de varredura
// e irá retornar os valores do vetor, de forma crescente ou decrescente
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index++) {
    console.log(vetor[index]);
}

Sendo nesta forma, normalmente serão passados como parâmetros uma variável auxiliar, que será utilizada para a varredura no laço, uma condição de saída/pause no laço e um incremento, que realizará uma varredura de forma crescente.

Laço for com DECREMENTO:
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index--) {
    console.log(array[index]);
}

Nesta forma, o laço executará o loop de forma decrescente.

SEGUNDA FORMA (FOR…OF)

// O laço de repetição for...of percorre de forma iterativa e crescente
// e retorna os valores do vetor
let vetor=[11, 22, 33, 44];
for (const item of vetor) {
    console.log(item);
}

Nesta forma, chamada for…of, o laço percorre objetos de forma iterativa e crescente, chamando a função personalizada com instruções a serem executadas para o valor de cada objeto.

TERCEIRA FORMA (FOR…IN)

// O laço de repetição for...in percorre de forma iterativa e crescente
// e retornará quais são as posições em que os valores se encontram no vetor
let vetor=[11, 22, 33, 44];
for (const item in vetor) {
    console.log(item);
}

Na chamada for…in, o laço de repetição irá iterar sobre as propriedades do objeto de modo arbitrário. O loop irá iterar sobre todas as propriedades do próprio objeto, enumerando-as. Em suma, este laço enumerará quantas posições estão dispostas no vetor, retornando as suas posições.

QUARTA FORMA (FOREACH)

// O laço forEach usará de forma iterativa uma função
// para retornar os valores do vetor.
vetor.forEach(item => {
    console.log(item);
});

O laço forEach funciona de maneira semelhante ao laço for…of, pois, de maneira iterativa e crescente, percorre os itens do laço e retorna os valores do vetor.