For-In ‘Fruit’ Loops

Banner of Colorful Cereal Arranged in Rainbow Color Order

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

More To Explore

Code

Exploring the Broadcast Channel API: Inter-Tab Communication

Intercommunication between different contexts (like tabs, iframes or workers) of the same origin has often been a challenge. With the Broadcast Channel API, developers now have a powerful tool to easily communicate between browsing contexts. In this blog post, we’ll dive deep into the capabilities of the Broadcast Channel API, exploring its features, use cases, and how it can be effectively implemented in your projects.

computer, laptop, work place-2982270.jpg
Code

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.