Advanced Loops: for…in and for…of

Welcome to the second lesson of Module 4! In this stage, you will explore two types of advanced loops in JavaScript: for…in and for…of. Learn how to iterate over objects and arrays more efficiently and flexibly, expanding your toolkit to control the flow of your programs.

For…in

The for…in loop is a JavaScript structure that allows us to iterate over the properties of an object.

It is especially useful when we want to perform some action based on these properties. Let’s better understand how it works.

Imagine you have a box with various objects inside. Each object has its own characteristics, such as color, size, shape, etc.

The for…in loop acts as a close look at each object inside the box, one at a time. It takes one object, checks its properties, and allows you to do something with them.

To use for…in, you need to define a variable to represent each object in the box.

This variable will be updated with each iteration of the loop, allowing you to access and manipulate the properties of the current object.

Here is the basic structure of for…in:

for (variable in object) {
  // code to be executed for each property
}

Inside the loop, you can perform desired operations using the variable representing each property of the object.

These operations can include displaying the property, modifying its value, performing calculations based on its characteristics, among others.

It’s essential to note that for…in is not recommended for iterating over arrays because it iterates over the enumerable properties of the object and not necessarily in the order of the array indices.

For arrays, for…in may not guarantee the correct order of elements.

Therefore, for…in allows us to traverse the properties of an object in an organized way and perform actions based on these properties.

It’s like inspecting each object in a box and doing something with its individual characteristics.

For…of

The for…of loop is a JavaScript structure that allows us to iterate over elements of a collection, such as an array, in a more straightforward way.

It is especially useful when we want to iterate over the values of a collection without worrying about the associated indices or properties.

We can think of for…of as a teacher who takes a list of students and calls them one by one, allowing you to do something with each of them.

Instead of worrying about the position of each student in the list, you can focus only on interacting with them individually.

Here is the basic structure of for…of:

for (variable of collection) {
  // code to be executed for each element
}

The variable defined in for…of represents each element of the collection, one at a time, as the loop progresses.

You can use this variable to access and manipulate the values of the collection elements.

An advantage of for…of is that it automatically handles iteration over iterable collections, such as arrays, strings, maps, sets, and more.

It traverses each element of the collection, executing the code inside the loop for each of them, in a simple and direct way.

By using for…of, you don’t need to worry about getting indices or accessing the properties of the elements. You can focus on the actions you want to perform on each element individually.

In summary, for…of is a simplified way to traverse the elements of a collection, allowing you to interact with them without worrying about the associated indices or properties.

It’s like a teacher calling students one by one so you can focus on them individually.

Challenge:

• Create a JavaScript script that creates an object with customer information (name, age, city).
• Iterate over the properties of the object and display each piece of information on the screen.
• Create an array with a customer’s purchases (product, price).
• Iterate over the elements of the array and calculate the total purchases.

Now that you’ve learned about the for…in and for…of loops, you are ready to explore further iteration in arrays with the forEach, map, filter, and reduce methods.

These powerful tools will allow you to manipulate and transform array elements more concisely and efficiently.