For...in Loops...demystified!

While learning the in's (haha) and out's of how Javascript works, you've probably came across a little thing called the for...in loop and wondered how that differs from a standard for loop.

While for loops are used to iterate through arrays and many other types of datasets, for...in loops have a more specific type of use case: objects! Though, objects aren't exclusive for for...in loops. Let's review what objects are before we dive into for...loops.

Objects in JavaScript are key:value pairs (wholly known as properties) that are sandwiched between curly brackets {}. Keys are typically composed of descriptive strings, though they can be numbers or symbols as well. In fact, some claim that keys can only be strings, as when you set a number/symbol as the key, Javascript automatically converts it to a string.

Here's an object we'll be working with today:

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

We have declared a constant, cat and set it equal to an object that contains the keys eyes, tail and color and has the values 2, 'long' and 'black'.

Say we want to sort through the keys of our object cat. This can be accomplished using a for...in loop! The syntax is similar to a for loop, in that we'll declare a variable to sort through our object, and we'll also specify the name of the object. Let's take a look:

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

for (let key in cat)

We've declared our variable key and specified our object, cat.

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

for (let key in cat) {
   console.log(key);
}

When we execute this to the console, we'll get back the output:

"eyes"
"tail"
"color"

To output the values of the cat object, we'll need to specify our object (cat), as well as the variable we declared (key). For clarity, I'm going to change the variable from key to value, since we're going to sort the values from the object:

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

for (let value in cat) {
   console.log(cat[value]);
}

This will give us the output of:

2
"long"
"black"

And if we really wanna get fancy with it, we can choose to only sort the values that are of a numeric type and change the result of another variable we've declared. Let's declare another variable cute and set it to false:

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

let cute = false;

And now we'll want to only sort the numeric values of cat and set cute to true if there is a numeric value to sort, using an if statement:

const cat = {
        eyes: 2,
        tail: 'long',
       color: 'black'
     };

let cute = false;

for (let value in cat) {
   if (typeof cat[value] === 'number') {
     cute = true;
  }
}

Now when we console.log(cute);, we'll get back the value of true! The typeof operator returns back a string that says what's the, well, TYPE OF data we're sending to it. It's a useful operator to have when you need to find out what's what.

Thanks so much for reading this far! These articles are probably pretty rough, because I'm a n00b to all this, but I'm trying my best. Please inform me of any mistakes and feel free to critique me! I need all the help I can get XD