For...what?
Tags: javascript, beginners, tutorial, learning
Published: 2024-01-26 02:48:12

JavaScript offers a variety of options for looping through objects and arrays. For my own sake I'm going to go over JavaSript's most commonly utilized built in functions for this behavior.

The **for in** statement in JS will pull each *key* from the array in turn and assign it to the provided variable(i in this case).
```
const array = [1, 2, 5]
const object = {'big':'dawg', 'manners':0, 'hamburgers':[1,3,0,1]}

for(i in array){
    console.log(i)
}
for(i in object){
    console.log(i)
}

//Output: 
0
1
2
big
manners
hamburgers
```
If you'd like to access the corresponding element of the array or object this way, you may do so with the bracket [] operator.
```
for(i in array){
    console.log(array[i])
}
for(i in object){
    console.log(object[i])
}

//Output: 
1
2
5
dawg
0
[ 1, 3, 0, 1 ]
```
Note that if the order that you are walking through your object/array matters it is best not to use **for in** as the order isn't consistent between implementations.


If you need to access the element from the array directly you may do so with the **for of** operator. You may do this with arrays, but JavaScript will throw a TypeError if you try to iterate over an object with **for of**.

```
const array = [1, 2, 5]

for(i of array){
    console.log(i)
}

//Output:
1
2
5
```

Of course you can always you the classic **for** operator as well.
```
const array = [1, 2, 5]

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

//Output:
1
2
5
```
With the classic **for** operator you declare or reuse a variable to work as your index while iterating, then define at what point you will stop(i < array.length), then put in an operator to apply to the index(i++).


The last operator I'm going to discuss is the **forEach** operator. **for each** is called on an array and takes a callback function as it's only argument. The function automatically takes the value of the currently indexed element in the loop, the index itself, and the entire object.
```
const array = ['big', 'dawg', [1,3,0,1]]

array.forEach(function(element, index, arr){
    console.log(index, element)
})

//Output:
0 big
1 dawg
2 [ 1, 3, 0, 1 ]
```

If you'd like to iterate through an object using **forEach**, you may can do so by iterating through either the keys, values, or entries of the object by using Object.keys(), Object.values(), or Object.entries() to pull the respective information.

```
const object = {'size':'big', 'type':'dawg', 'pin':[1,3,0,1]}

console.log("KEYS")
Object.keys(object).forEach(function(key){
    console.log(key)
})
console.log("VALUES")
Object.values(object).forEach(function(value){
    console.log(value)
})
console.log("ENTRIES")
Object.entries(object).forEach(function(entry){
    console.log(entry)
})

//Output:
KEYS
size
type
pin
VALUES
big
dawg
> (4) [1, 3, 0, 1]
ENTRIES
> ['size', 'big']
> ['type', 'dawg']
> ['pin', Array(4)]
```

To recap: **for in**, classic **for** to iterate by index, **for of** and **forEach** to iterate by element directly. **for in** is usually best for objects as **forEach** and **for of** cannot be invoked on them. Oftentimes the choice comes down to syntax preference but one is usually preferable.