in 演算子って何者？
in 演算子は、
「このオブジェクトに、このプロパティ名は“存在しているか？”」
を調べるための道具です。
ポイントは、
「値が何か」ではなく「その名前のプロパティがあるかどうか」
だけを見てくれるところです。
const user = {
name: "太郎",
};
console.log("name" in user); // true
console.log("age" in user); // false
基本構文と読み方
“プロパティ名” in オブジェクト
形はとてもシンプルです。
"プロパティ名" in オブジェクト
結果は true か false のどちらかです。
const user = {
name: "太郎",
age: 25,
};
console.log("name" in user); // true
console.log("age" in user); // true
console.log("email" in user); // false
ここで大事なのは、
左側は 文字列 で書く、ということです。
console.log(name in user); // これはエラー（name という変数を探しに行ってしまう）
undefined と in の違い（ここが一番重要）
「値がない」と「そもそもプロパティがない」は別物
よくあるパターンを見てみましょう。
const user = {
name: "太郎",
age: undefined,
};
console.log(user.age); // undefined
console.log("age" in user); // true
console.log("email" in user); // false
user.age を読むと undefined ですが、"age" in user は true です。
つまり、
ageというプロパティは「存在している」- ただし、その「中身の値が undefined」
という状態です。
一方、email は
プロパティ自体が存在しないので、"email" in user は false になります。
ここが超重要です。in は「その名前の引き出しがあるか？」を見ている。
中身が空（undefined）かどうかは関係ない。
「プロパティが存在するかどうか」を正確に知りたいときは、obj.prop === undefined ではなく、"prop" in obj を使うべきです。
delete と in の組み合わせで違いを確認する
引き出しを“外した”かどうかをチェックできる
const user = {
name: "太郎",
age: 25,
};
console.log("age" in user); // true
delete user.age;
console.log("age" in user); // false
console.log(user.age); // undefined
delete でプロパティを削除すると、"age" in user は false になります。
user.age の結果も undefined ですが、
さっきの「値が undefined なだけ」のケースとは意味が違います。
- 値が undefined なだけ：
"age" in userは true - プロパティ自体がない：
"age" in userは false
ここが重要です。
「このプロパティは“あるけど空”なのか、“そもそも存在しない”のか」
を区別したいときに、in が効いてくる。
プロトタイプも含めて調べる、という性質
自分のプロパティだけじゃなく“継承元”も見る
in は、
オブジェクト自身のプロパティだけでなく、
そのプロトタイプチェーン上のプロパティも含めて調べます。
const obj = {};
console.log("toString" in obj); // true
obj 自体には toString を定義していませんが、Object.prototype から継承しているので true になります。
初心者の段階では、
「in は“そのオブジェクトが使えるプロパティかどうか”を見ている」
くらいの理解で十分です。
「自分が定義したプロパティだけを見たい」場合は、obj.hasOwnProperty("key") を使う、という話もありますが、
それはもう少し先の話で大丈夫です。
配列に対する in 演算子（軽く触れておく）
「インデックスが存在するか」を調べる
in は配列にも使えます。
const arr = ["a", "b", "c"];
console.log(0 in arr); // true
console.log(2 in arr); // true
console.log(3 in arr); // false
ここでは、
「インデックス 0, 1, 2 は存在するが、3 は存在しない」
ということを表しています。
ただし、配列に対してはlength や includes など、
もっと分かりやすいメソッドがあるので、
初心者のうちは「in は主にオブジェクト用」と思っておいても問題ありません。
初心者として「in 演算子」で本当に押さえてほしいこと
最後に、要点をぎゅっとまとめます。
"key" in obj は「そのオブジェクトに key というプロパティが存在するか」を調べる
「存在しているかどうか」を見ていて、「値が何か」は関係ないvalue === undefined と in は意味が違うdelete で消したプロパティは in で false になる
まずは、次のコードを自分で打って、
コンソールの結果をじっくり眺めてみてください。
const user = {
name: "太郎",
age: undefined,
};
console.log(user.age); // ?
console.log("age" in user); // ?
console.log("email" in user); // ?
delete user.age;
console.log(user.age); // ?
console.log("age" in user); // ?
「値としての undefined」と
「プロパティの有無」が
頭の中でちゃんと分かれて見えるようになったとき、
あなたはもう一段階、オブジェクトを“正確に扱える人”になっています。