JavaScript In Operator

The Question

I recently saw a quiz question asking "what is the output of ..."

3 in [1, 2, 3]

I got it right, but wanted to dig further into what the in operator does and can do.

Research

On the MDN web docs, there is some good information.

At it's core, this operator looks pretty simple. But, as the quiz above shows, it's not super intuitive.

The Syntax

The in operator is an built-in operator in JavaScript which is used to check whether a particular property exists in an object or not. It returns boolean value true if the specified property is in an object, otherwise it returns false.

prop in object

The Parameters

prop

A string or symbol representing a property name or array index (non-symbols will be coerced to strings).

object

Object to check if it (or its prototype chain) contains the property with specified name (prop).

Basic Use-Cases

// Arrays
let people = ['bob', 'jen', 'patrick', 'anne', 'tim'];
const person1 = 0 in people;        // true
const person2 = 3 in people;        // true
const person3 = 6 in people;        // false
const person4 = 'tom' in people;    // false
// (the index number must be specified, not the value at that index)
const person5 = 'length' in people; // true
// (length is a property of an Array)
const person6 = Symbol.iterator in people;
// true (arrays are iterable, works only in ES2015+)

// Predefined Objects
const hasPI = 'PI' in Math;         // true

// Custom objects
let car = { make: 'Ram', model: '1500', year: 2015 };
const hasMake = 'make' in car;      // true
const hasModel = 'model' in car;    // true

An Object must specified on the right side of the in operator. A string created with the String constructor can be used, but a string literal cannot.

let color1 = new String('green');
const hasLength1 = 'length' in color1;
// true

let color2 = 'red';
const hasLength2 = 'length' in color2;
// generates an error (color2 is not a String object)

Deleted and Undefined

If a property is deleted with the delete operator, the in operator returns false for that property.

If a property is set to undefined but not deleted, the in operator returns true for that property.

The in operator will return false for empty array slots. Even if accessing it directly returns undefined.

To avoid this, make sure a new array is always filled with non-empty values or not write to indexes past the end of array.

let empty = new Array(3).fill(undefined)
const isEmpty = 2 in empty
// true

Inherited properties

The in operator returns true for properties in the prototype chain. (To check for only non-inherited properties, use Object.prototype.hasOwnProperty() instead.)

const hasToString = 'toString' in {}
// true