DEV Community

loading...
Cover image for JS for Loops: for...in and for...of

JS for Loops: for...in and for...of

uzomezu profile image Kevin Mezu ・2 min read

When writing a for loop in JavaScript we are usually iterating across some kind of Array or Object. We typically learn for loops in school or boot camps as such:

Array Iteration:

const fruits = ['apple', 'banana', 'plum', 'orange', 'grapes'];

for (let i=0; i<fruits.length(); i++){

    console.log(fruits[i]);
}

//returns
// 'apple'
// 'banana'
// 'plum'
// 'orange'
// 'grapes'

Enter fullscreen mode Exit fullscreen mode

Object Iteration:

const fruits = {a:1, b:2, c:3, d:4, e:5};

for (let i=0; i<Object.keys(fruits).length(); i++){

    console.log(
`The key/value pair is:

 ${Object.keys(fruits)[i]}, 

${fruits.Object.keys(fruits)[i]}`);
}

//returns
// 'The key/value pair is: a,1'
// 'The key/value pair is: b,2'
// 'The key/value pair is: c,3'
// 'The key/value pair is: d,4'
// 'The key/value pair is: e,5'
Enter fullscreen mode Exit fullscreen mode

If we were to extrapolate this and then maybe add more sub-objects or complex arrays, this process becomes tedious and quite redundant.

In most browsers (EI>9) and Chrome V8, JavaScript allows for manipulation of any object or Array simply by utilizing the in or of syntax to perform iteration and execution of functions within the for a loop.

Object === for...in and Array === for...of

Think about it like items/things in an Object, and members of and Array.

Objects === in

A back-pack is an object, it is a solid piece of matter. In this backpack there are items. These items can have a type(key; electronics, food, money, cosmetics) and a name(value; iPhone, crunch-bar, nickel, lip balm)

Array === of

An array is like a family, it is a set group of people that you can either add to or remove from. There are members Of a family, and these members all have a set order from oldest to youngest.

Next, let's go ahead and apply this syntax to iterating over JS objects and arrays.

Object Iteration

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

Enter fullscreen mode Exit fullscreen mode

Array Iteration

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

Enter fullscreen mode Exit fullscreen mode

If you want to take your code from entry-level to Senior level, start using of and in format when you iterate over an array or object respectively.


Resources

Web technology for developers. (n.d.). Retrieved January 22, 2021, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Web technology for developers. (n.d.). Retrieved January 22, 2021, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Discussion (6)

pic
Editor guide
Collapse
msgalenwhite profile image
Galen White

Your backpack/family analogy is fantastic!

Collapse
ruskov profile image
Agustin

excellent, a few days ago I searched about this and now I see this and update ideas for my code

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Phew! That was awesome! I just wondering about it!!!

Collapse
jamesabaja profile image
James Gabriel Abaja • Edited

This looks interesting! What's its difference with using .map? Are there (significant) performance concerns between the two?

Collapse
uzomezu profile image
Kevin Mezu Author

Great Question!

In my experience, no, .map() has no significant performance concerns.
Here is an example of Array.prototype.map() used inside of a react app.

Collapse
standoge profile image
StanDoge

Thanks for the reminder!