vs for...of Loops in JavaScript - hakaselogs


Notes mostly about software engineering and what I’m working on.

19 Jun 2017 vs for...of Loops in JavaScript


The and for..of loops, gives us a clean and concise syntax to iterate on iterable items like arrays, strings, objects, and enumerables. Now the question is where to use which. Here’s a little reminder to get you you started.

Use this to iterate over the properties of an object:

let person = {
    name: 'Francis',
    alias: 'codehakase',
    eyeColour: 'brown'
for(let key in person) {
    console.log( `${key} => ${person[key]}` );

// name => Francis
// alias => codehakase

The loop can also be used to iterate over indexed values of a string:

let text = 'JavaScript';
for (let i in text) {
    console.log(`Index of ${str[index]}: ${i}`);
// Index of J: 0
// Index of a: 1


Use this to iterate over the values in an iterable like an array:

let girls = ['Jane', 'Lilian', 'Tobi'];
let boys = ['John', 'Tom', 'Kelvin'];
for (let crush of girl_crush) {
    // lucky crush for them boys
    let index = Math.floor(Math.random() * names.length);
    console.log( `${boys[index} crushes on ${girls}` );
// Tom crushes on Tobi
// Kelvin crushes on Lilian
// John crushes on Jane

The for..of loop can also iterate over maps, generators, and DOM node collections

Now you know where and when to use the and for..of loops. Did I miss anything? Let me know in comments section.