Learn how to use loops in JavaScript
Tags: beginners, javascript, tutorial, webdev
Published: 2022-06-13 13:38:28

---
title: Learn how to use loops in JavaScript
published: true
description: There are many ways to iterate in JavaScript. Let's look at the most common ones.
series: javascripttip
tags: beginners, javascript, tutorial, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0f8hdznf2rmkoyii3ayi.jpg
---

TLDR; This article teaches you the various loop constructs that exist in JavaScript and which one to use when.

{% embed https://www.youtube.com/watch?v=4v9DN_YrJ80 %}

## Iteration/Looping

Sometimes we have structures that requires us to _loop_ through them. What we mean is that we want to look through every single item in that construct and do something with it. Here's some areas of application:

- **Display every item**. A very common application is to show every item in a list visually. A common example is to show every item in a cart on an e-commerce site, so you can see what you are about to purchase. There are many loop constructs that help you with _displaying_ everything in a list like `for`, `for/in`, `for/of` to name a few. You will learn more about how thy differ further down in the article.

- **Map**. _Mapping_ is about _iterating_ through a structure and change it from one form to another form. You typically want to do this when the data you have isn't quite ready for its next step. The next step can be to display your data and you want to change from a data object to something more presentable.

- **Reduce**. When you _reduce_ data you go from one form to a _reduced_ form. So what does that mean? It means that instead of a list of order items you _reduce_ them down to something interesting, the total sum of the items for example.

## Iterate items

To iterate items there are many construct available to you. Let's start with a simple `for-loop`. It is made up in the following way:

```javascript
for(<start condition>; <break condition>; <incremental phase> ) {

}
```

The idea is to define a loop as having the following stages:

1. **Start condition**. In the _start condition_ you _initialize_ the loop value to a certain value, like for example `let i=0;`.

1. **Break condition**. Next you define _break condition_, that when fulfilled, will stop the loop from further iterations, for example `i< 5`.

1. **Increment phase**. Lastly you define how much you want the loop variable to increase/decrease per iteration.

A typical `for-loop` can look like so:

```javascript
for (let i =0; i < 5; i++) {

}
```

It's common to name the variable `i`, for index, i.e the current position in the loop. It's better to give it a more descriptive name like so:

```javascript
for (let position =0; position < cart.length; position++) {

}
```

> NOTE, I'm using `let` to ensure we have block scope, so that `position` seize to exist after the loop is done. `var` will NOT give you block scope and _leaks_ outside of the loop.

```javascript
// DON'T

for (var position =0; position < cart.length; position++) {

}

// position is still alive here
```

## For-in

`For-in` is one of the most misunderstood loops. I've heard a lot of conversations where people say use `for-of` instead but not why. So let's explain what's going on.

`For-in` lists the attributes of the object. Let's show what's meant by the below code:

```javascript
let object = {
  name: 'chris',
  city: 'London'
};

for (let prop in object) {
  console.log(prop)
}

// name, city
```

The problem happens when you think you can use it on an array that looks like so:

```javascript
let array = [1, 2, 3];

for (let prop in array) {
  console.log(prop)
} 

// '0', '1', '2'
```

You're not getting the values in the area but rather the indexes. If you are surprised by this, you should know that most things in JavaScript is actually an object. Consider the below code:

```javascript
typeof [1,2,3] // 'object'
```

It tells you that you are dealing with an object. That means that your array looks like so under the hood:

```javascript
{
  "0": 1,
  "1": 2,
  "2": 3
}
```

There's also a method that acts similarly on the array namely `Object.keys()`. The following code produces a similar result to `for-in`:

```javascript
Object.keys([1,2,3]) // ['0', '1', '2']
```

> NOTE, `for-in` and `Object.keys()` have similar area of application and operates on the keys/attributes.

### Getting the value

If the values is what you want, then you have a few options:

```javascript
Object.values([1,2,3]) // 1, 2, 3
```

You can also use the `for-of` loop like so:

```javascript
for(let obj of arr) {
  console.log(obj);
}

// 1,2,3
```

Or, you can use `forEach()`, a method on the array like so:

```javascript
let arr = [1,2,3];

arr.forEach((item, number, array) => console.log(item))
```

> NOTE, you can't use a `break` statement to stop an iteration using a `forEach()`. If you might need to break a loop, consider using a normal `for` construct.

## Changing the data

So far, you've been looking at ways to just iterate over all the data but you haven't changed it. You can change the data while iterating through it. Depending on how you want to change the data you got two constructs made for it `map()` and `reduce()`.

### Map

`map()` is function on the array data structure. The idea is to iterate over all the items in an array and change that item into something new. It could be that you are only interested in certain properties on an object or that you want to change from a data model to something more presentable, a _view model_.

Lets look at an example:

```javascript
let heroes = [{
  name: 'Xena',
  country: 'Greece'
}, {
  name: 'Alexander the Great',
  country: 'Macedonia'
}]

let onlyTheName = heroes.map(hero => {
  return hero.name;
});

// can also be written as: let onlyTheName = heroes.map(hero => hero.name)

onlyTheName.forEach(name => console.log(name)) // ['Xena', 'Alexander the Great']
```

Above you have an example of iterating through an array and _plucking_ out the the attribute `name` that you are interested in.

### Reduce

The `reduce()` function, just like `map()` is on the array data structure. It also seeks to change every item, but there's an important distinction. `reduce()` cares about performing an operation on the item and add the result to a previous result in an earlier iteration. This makes `reduce()` a good candidate to use if you want to for example get the sum of all cart items or if you want to merge a cet of objects into one. Lets look at both these examples:

```javascript
let arr = [1,2,3,4];
let sum = arr.reduce((prev, curr) => prev + curr, 0)
// sum: 10
```

Above the `reduce()` method is passed a callback with `prev`, the previous result and `curr` as the current item in the array. The callback ends up returning `prev + curr`. The second argument to `reduce()` takes an initial value. The end result is `10`, all the values summed up. Consider this second example so you see how powerful `reduce()` really is:

```javascript
let objects = [{
  name: 'Xena'
}, {
  country: 'Greece'
}]
let mergedObject = objects.reduce((prev, curr) => {
  return {
    ...prev,
    ...curr
  }
}, {})

// { name: 'Xena', country: 'Greece' }
```

## Summary

I've shown that there are quite a few looping constructs at your disposal in JavaScript. They do different things and correctly used they can make you quite efficient. There's no reason to fear using `for-in` now that you know what it does, even though `for-of` is probably what you want. Consider adding `map()` or `reduce()` to your tool belt, if you haven't already.