Using the "in" Operator in JavaScript
Tags: javascript, tutorial, webdev, objects
Published: 2020-09-30 21:39:56

In this short tutorial, we'll be going over the **"in"** operator in JavaScript— what it is, what it does, and how you can implement it in your own JavaScript code.

Ready? Let's get started!

##What is an "in" operator, anyway?

I'm glad you asked. In JavaScript, the "in" operator is an [inbuilt operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators) that is used to check whether a [property](https://developer.mozilla.org/en-US/docs/Glossary/property/JavaScript) exists in an [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object).

When used in an expression, the "in" operator will return a [boolean value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean); *true* if the property was found in the Object, *false* if not.

The "in" operator can also be used on an *Array*, since Arrays are technically Objects in JavaScript. The difference here is that the "in" operator can only be used to find out if a certain *index* is within an Array, since the values *in* an array are not properties *of* the array.

This might sound a little confusing, so let's see it in action.

##How do I use the "in" operator?

The syntax is quite simple. The "in" operator has two parameters:

1. *prop* (the string or symbol that represents a property name or Array index.)
2. *object* (the Object within which you'll be checking to see if it contains the prop.)

In code, it looks like this:

```JavaScript
prop in object
```

With some context:

```JavaScript
let obj = { prop1: 1, prop2: 2, prop3: 3 };

"prop1" in obj;
//=> true

"prop2" in obj;
//=> true

"prop5" in obj;
//=> false
```

As we can see, the first two props *are* keys in (and thus properties of) the obj Object and return a *true* boolean, while "prop5" is *not* a key or property and thus returns *false*.

Keys in an Object count as properties, since they can be called on the Object directly like so:

```JavaScript
let obj = { prop1: 1, prop2: 2, prop3: 3 };

obj.prop1;
//=> 1

obj["prop1"];
//=> 1
```

This is why the "in" operator can't be used to check for elements/values in an Array, while it *can* be used to check for properties of the Array *Object*, like indices or the length property:

```JavaScript
let arr = [1, 2, 3, 4, 5];

// These operators check for Array indices, not values:
0 in arr;
//=> true
2 in arr;
//=> true
5 in arr;
//=> false

// This operator checks for a property of the Array Object:
"length" in arr;
//=> true
//=> This returns true because arr.length is a property
```

##How could I use this in a real program?

The "in" operator is mainly helpful for writing readable, human-friendly code when you need to check for the existence of a property or key in an Object.

Let's say that there's a slice of an existing function that checks to see if a key exists in an Object within a for loop, doing one bit of logic if it does, and another bit of logic if it doesn't.

This example doesn't have much context, but bear with me:

```JavaScript
let agesOfUsers = {
  18: ["Adam", "Jess"],
  21: ["Mike", "Alex"],
  24: ["Tom"]
};

function getNamesForAge(age) {
  if (age in agesOfUsers) {
    agesOfUsers[age].forEach( user => console.log(user) );
  } else {
    console.log(`No users of age ${age} on record.`);
  }
}

getNamesForAge(18);
//=> Adam
//=> Jess

getNamesForAge(30);
//=> No users of age 30 on record.
```

For the record, the if statement could also be written like so:

```JavaScript
if (!!agesOfUsers[18]) {
  // logic
}
```

However, there is a great deal of subjective value on making code more human-friendly and readable, especially in a shared codebase. Hence why using the "in" operator is a great option to have!

***

If you've come this far, thanks so much for reading! I hope this post has been helpful or educational in your JavaScript journey. :)

I'll continue to write tutorials and breakdowns for concepts as I learn them myself, so stay tuned for more in the future!