JavaScript Tutorial Series: Looping through Arrays and Objects

In previous articles we discussed objects, loops and arrays and how to use them. In this post we'll explore how to use loops with objects and arrays.

If you need a refresher about arrays objects and loops, check out my articles linked below.

• JavaScript Tutorial Series: Arrays

• JavaScript Tutorial Series: Objects

• JavaScript Tutorial Series: Loops

Loops & Arrays

As we already know, arrays are capable of storing multiple values in a single variable. The "for" loop can be used to iterate through an array.

Let's look at an example.

let animals = ["cat", "duck", "penguin"];

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

Output

"cat"
"duck"
"penguin"

Let's break down this block of code.

The "for" loop in this example iterates through each element of the array by iterating over the three values that make up the "animals" array.

The "for" loop has three parts: initialization (set i = 0), condition (i animals.length), and updating the initial value by incrementing it (i++).
The variable i refers to the index of the current element in the array in "for" loops which is used to iterate over arrays.
The loop will continue as long as the condition is true. Within the loop, we use the console.log() function to print each element of the array.

For ... in loop

The for ... in loop allows you to iterate over an object's properties. It works by looping through all of an object's properties while carrying out the same set of instructions for each property.

Let's look at an example.

let Person = {firstName: "Jane", lastName: "Doe", age: 20};

for (let key in Person) {
  console.log(key + ": " + Person[key]);
}

Output

"firstName: Jane"
"lastName: Doe"
"age: 20"

Let's break down this example.

• for (let key in myObject) introduces the loop by creating a new variable called "key" and initializing it to the first key in the object. We can tell that we are iterating through the keys in an object by using the keyword in.

• console.log(key + ": " + myObject[key]); runs for each key found in the object. The current key and its associated value are printed to the console using the console.log() function. The bracket notation (e.g., myObject[key]) is used to access the value of the current key.

• The same set of instructions are carried out by the loop repeatedly for each key in the object as it iterates over each key in turn.

Comments

[Rense Bakker]

Its easier to loop over an array using the built-in forEach loop:

const myArray = [1, 2, 3]
myArray.forEach(val => console.log(val))

[The daily developer]

yes i agree but i am explaining the basics of javascript in this tutorial series and will get to the array built-in functions in a later post.

[Larry]

I think it would be beneficial to see the output of these loop examples. so we can get a good visualization of how they work.

[The daily developer]

I added the output to the examples you can check them out.

[Larry]

the for in loop seems to be a more difficult type of loop to understand. i need to spend more time on it. or perhaps get more experience with using loops altogether.

[The daily developer]

practice makes perfect! create objects and try to implement the for in loop using the objects you created. In the upcomig posts we will be seeing this loop. I post practice posts after every couple of lessons so when you'll be solving the practice exercises you'll get the hang of it.