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

#javascript #webdev #codenewbie #react

Kevin Mezu Jan 22 ・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'

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'

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"

Array Iteration

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

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

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