Um For…Loop em minha mente

Pegar JavaScript pela primeira vez certamente pode ser desafiador, especialmente se você não tiver codificação em segundo plano. Se você está aprendendo JavaScript, já deve ter entendido que é uma linguagem orientada a objetos, o que significa que é baseada no conceito de objetos e suas propriedades e métodos. Trabalhar em JavaScript permite a fácil manipulação do Document Object Model (DOM), que representa a estrutura de uma página da web. O JavaScript também costuma ser usado em conjunto com outras tecnologias, como HTML e CSS, para criar páginas da Web interativas que você e eu usamos diariamente. Como uma das linguagens de programação mais usadas na web, há muito o que aprender enquanto você trabalha para se tornar um especialista em JavaScript.

Aprender uma linguagem de codificação tão complexa tem seus desafios. Como o JavaScript é orientado a eventos, o que significa que a execução do código é baseada em eventos como entrada do usuário, carregamento de página e solicitações de rede, é necessário um bom entendimento de como diferentes métodos de objeto e array funcionam para ser um criador bem-sucedido de JavaScript.

Se sua dificuldade pode estar em alguns métodos mais complexos dentro do JavaScript, vou nos levar de volta ao básico e detalhar como diferentes tipos de loops for funcionam dentro do JavaScript.

O que é um loop for…?

Um loop for em JavaScript é uma estrutura de controle que permite repetir um bloco de código um número especificado de vezes. A sintaxe básica para um loop for é a seguinte:

A seção de inicialização é executada apenas uma vez, no início do loop. É normalmente usado para inicializar uma variável de contador. A condição é verificada antes de cada iteração do loop e, se for avaliada como verdadeira, o bloco de código dentro do loop é executado. Se a condição for avaliada como falsa, o loop será encerrado. A seção de incremento é executada no final de cada iteração e normalmente é usada para atualizar a variável do contador.

Por exemplo, o código a seguir usa um loop for para imprimir os números de 1 a 10 no console:

Neste exemplo, a seção de inicialização inicializa a variável i para 1, a seção de condição verifica se i é menor ou igual a 10 e a seção de incremento incrementa i em 1 após cada iteração. Isso resulta na execução do loop 10 vezes, com o valor de i sendo impresso no console a cada iteração.

Além dos loops for, você também pode usar loops for…in e for…of em JavaScript, que são usados ​​para iterar sobre objetos e arrays, respectivamente.

Entendendo um loop for…in

Enquanto um loop for…in é usado para iterar sobre uma sequência de números ou uma matriz, um loop for…in é normalmente usado quando você deseja iterar sobre as propriedades de um objeto.

A sintaxe básica para um loop for…in é a seguinte:

A variável é uma nova variável que será criada a cada iteração do loop e receberá o nome da propriedade do objeto. O objeto é o objeto cujas propriedades serão iteradas.

Por exemplo, o código a seguir usa um loop for…in para iterar sobre as propriedades de um objeto e imprimir seus valores no console:

Neste exemplo, a variável “chave” é criada a cada iteração do loop e ela vai pegar o nome da propriedade do objeto “pessoa” e acessar o valor dessa propriedade usando a variável chave. A saída seria:

Lembre-se de que a ordem das propriedades no objeto pode não ser garantida, portanto, não confie em uma ordem específica ao usar um loop for…in. Além disso, um loop for…in não funciona com um array, caso em que você deve usar um loop for..of ou um loop forEach().

Entendendo um loop for…of

Um loop for…of em JavaScript é usado para iterar sobre os elementos de um objeto iterável, como uma matriz ou uma string.

A sintaxe básica para um loop for…of é a seguinte:

A variável é uma nova variável que será criada a cada iteração do loop e assumirá o valor do elemento atual no iterável. O iterável é o objeto cujos elementos serão iterados.

Por exemplo, o código a seguir usa um loop for…of para iterar sobre os elementos de uma matriz e imprimir seus valores no console:

Neste exemplo, a variável “number” é criada para cada iteração do loop e assumirá o valor do elemento atual no array. A saída seria:

Entendendo um loop forEach()

O método forEach() é um método de array que permite executar uma determinada função em cada elemento de um array. Tenha em mente que forEach() não pode ser usado em objetos, então este é um ótimo método se você quiser iterar em um array.

A sintaxe básica do método forEach é a seguinte:

O primeiro parâmetro da função é o elemento atual, o segundo parâmetro é o índice do elemento atual e o terceiro parâmetro é o array. Você também pode fornecer um parâmetro opcional thisValue para usar como a palavra-chave this dentro da função.

Por exemplo, o código a seguir usa o método forEach para iterar sobre os elementos de uma matriz e imprimir seus valores no console:

Se você deseja iterar sobre as propriedades de um objeto, pode usar um loop for…in ou pode usar o método Object.keys() que retorna uma matriz de nomes de propriedade do próprio objeto, na mesma ordem em que obtemos com circuito normal. E então você pode usar o método forEach para iterar sobre esse array.

Para loops Embrulhado

Em conclusão, for loops são uma ferramenta essencial em JavaScript para iterar sobre arrays e objetos. Eles fornecem uma maneira de executar um bloco de código várias vezes, tornando-os úteis para tarefas como percorrer os elementos de uma matriz ou iterar sobre as propriedades de um objeto.

O JavaScript oferece diferentes tipos de loops for, cada um com seus próprios casos de uso específicos:

• O loop for é usado para iterar sobre uma sequência de números ou uma matriz.
• O loop for…in é usado para iterar sobre as propriedades de um objeto.
• O loop for…of é usado para iterar sobre os elementos de um objeto iterável, como um array ou uma string.
• O método forEach() é um método de array que permite executar uma determinada função em cada elemento de um array.

Usar o tipo apropriado de loop para a tarefa em questão pode tornar seu código mais legível, eficiente e menos sujeito a erros. Portanto, entender os diferentes tipos de loops e quando usá-los é um aspecto importante do desenvolvimento com JavaScript.