Victor Adeshile
WebDevNote.io

WebDevNote.io

Are JavaScript Objects Iterable?

Are JavaScript Objects Iterable?

Victor Adeshile's photo
Victor Adeshile

Published on Jan 21, 2021

5 min read

The answer to this is yes, it is possible to iterate Objects, but Objects are generally non-iterable by fashion.

Side Note: Technology continues to evolve and things get improved over time. JavaScript has evolved over the years and trying to keep up can be hard, but the basics are really what matters, and staying unformed help us get ahead.

Definining an object, we use the mustache or the curly brackets {//Properties of the Object goes in here..} e.g:

const class5 = {
    className: "Class 5",
    ageGroup: "5 to 10",
    color: "green",
    breakfast: true,
    lunch: false,
    dinner: false,
};

// The above Object serves as a container for the student Object.

// Using the ES6 "For of" statement

// If you run the code below, you would get an error;

for (let student of class5){
    Do something...
    console.log(`All students in ${class5.className} are of the agegroup of ${class5.ageGroup}`);
}

// The "for of" code gives you the following error 
//  "Uncaught TypeError: class5 is not iterable at ..."

As correct as the code may seem, it just won't work because an Object is non-iterable.

/ To make this work, we must either find a way to make an array from the Object using the "for in" loop or use the special Object.values() or Object.keys() method to be able to work with the Object data. /

// Using the for in method to loop through.

for (let student in class5){
    // Do something...
    console.log(`All Class 5 have the following: \n${student} = ${class5[student]}`);
    // console.log(`All students in ${class5.className} are of the agegroup of ${class5.ageGroup}`);
}

The "for in" loop code would run 6 times because we have 6 object elements and we are console.logging with the "for in" syntax. We are referencing the values of the object with the .notation which would then reference the value of the key called.

The Second method would be to use the Object.value(Objectname) or Object.keys(Objectname) syntax. The following can be used...

  • Object.values() => returns the value into a new array.

  • Object.keys() => returns the keys into a new array.

  • Object.entries() => returns the keys and values into individual arrays.

for (let eachStudent in class5){
    console.log(`Class 5 has the following Keys: ${Object.keys(class5[eachStudent])}`);
    console.log(`Class 5 has the following Values: ${Object.values(class5)}`);
}

The code above would run the console.log command 6 times each, making a total of 12.

Now that we have made an array of the Object using the Object method, we can now perform logic on the data the way we would normally do like when accessing an array.

let count = 0;
let ourClass = Object.values(class5);
for (let eachP of ourClass) {
    count++;
    console.log(`This is line ${count} and the length of our class Object now is ${ourClass.length}`);
    console.log(`${eachP}`);
}

This is all there is to Objects in JavaScript, or at least, the very basics.

Learning to program is not magical, you make the experience magical when you accept that you offcourse can remember everything, nor know everything, but you can at least, understand how things work and can explain what a code does to a 10 years old and help them understand the concepts. That's where the magic starts and it intensifies when it's been practiced until everything then seems magical.

Like, share, Upvote, and give your honest feedback to help me create better content for you.

You can also support me as a developer so I can spend more quality time providing you with awesome content that would help you become a better developer.

You can now buy me a coffee: buymeacoffee.com/WebtekMasters

 
Share this