Using the "in" Operator in JavaScript

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 that is used to check whether a property exists in an Object.

When used in an expression, the "in" operator will return a boolean value; 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:

prop in object

With some context:

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:

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:

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:

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:

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!