DEV Community

Chevy Vall
Chevy Vall

Posted on • Edited on

For...what?

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
Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 ]
Enter fullscreen mode Exit fullscreen mode

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)]
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)