For-In ‘Fruit’ Loops

In development, you use loop logic all the time. You will have arrays, objects and collections to go through to make decisions based upon the data. 

The for-in loop syntax is one that I like to use because it makes sense logically to me in how it is written. This does not mean that the “traditional” for loop syntax is incorrect. It is more of a choice. I have not tested it, but I have not noticed a performance difference. Maybe I will test that someday, but today, I just want to go over the syntax.

For-In

for (var i in someData) {...};

Here is a scenario…

I was working on looping over course data in our IT associate degree programs. The app I was building was a proof of concept app. So I created a hard-coded JSON data set to use to prove my app idea. Here is what the data looked like…

{
    "course1": {
        "shortName": "ITC",
        "CourseName": "IT Course",
        "CourseNumber": "###",
        "prereq": "",
        "credits": 1
    },
   "course2": {...}
}

I wanted to loop over the JSON object to make some logic decisions based upon the data. Here is what my syntax looked like…

// The dummy data was local.I built an onload function to fetch the data
window.addEventListener('load', function () {
    // Grab the data file
    fetch('admin/data/courses.json').then(response => {
        return response.json();
    }).then(data => {
        // Work with JSON data here
        // Put the JSON data object into an encapsulated app variable
        ptApp.courseData = data;
        // Run my courseList function
        ptApp.courseList();
    }).catch(err => {
        // Do something for an error here
        console.error(err);
    });
});
// The courseList function
ptApp.courseList = function () {
    // Loop over my courseData
    for (var i in this.courseData) {
        //Do some logic stuff here
    }
}

What this also allows me to do is utilize a combination of array and dot object notation in my logic for easy to read code. For example, I could reference data properties like so…

this.courseData[i].credits;

So for-in loops are very handy in easily traversing an object in your JS code. It is very readable and the syntax is quick to write.

Happy Coding!

Clay Hess