For...in Loops...demystified!
Tags: javascript, for, in, loop
Published: 2023-01-05 00:55:34

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