JavaScriptの学習を始めたばかりの方が、オブジェクトのキーを列挙する際に最初に出会うのが「for…in」ループです。しかし、ベテランのフロントエンドエンジニアがコードレビューで「for…inは避けよう」と指摘するのには、単なる好みではない明確な理由があります。今回は、このループが抱える落とし穴と、現代的な代替手段について解説します。
なぜ「for…in」は危険なのか
for…inの最大の特徴は、対象オブジェクト自身が持つプロパティだけでなく、そのプロトタイプチェーン上にある列挙可能なプロパティまで走査してしまう点です。
例えば、ライブラリなどを導入した際に、Object.prototypeに独自メソッドが追加されていると、予期せぬタイミングでそのメソッド名までループに含まれてしまいます。これは「プロトタイプ汚染」と呼ばれ、バグの温床となります。もし、オブジェクトのキーを単に取得したいだけであれば、この挙動はノイズ以外の何物でもありません。
具体的な事例：意図しないキーの混入
以下のコードを見てください。
const user = { name: ‘Taro’, age: 25 };
Object.prototype.sayHello = () => console.log(‘Hi!’);
for (const key in user) {
console.log(key);
}
この実行結果には、nameとageに加えて、意図していないはずのsayHelloまで出力されてしまいます。フロントエンド開発で外部ライブラリを多用する場合、このように予期せぬプロパティが紛れ込むリスクが常に付きまといます。
推奨される代替手段
現代のJavaScript開発では、オブジェクトのキーや値を扱うために、より安全で意図が明確なメソッドが標準化されています。
1. Object.keys(obj)
オブジェクト自身のプロパティのみを配列として取得します。プロトタイプチェーンを無視できるため、最も安全な選択肢です。
2. Object.entries(obj)
キーと値をペアで取得したい場合に最適です。for…ofと組み合わせることで、非常に読みやすいコードになります。
const user = { name: ‘Taro’, age: 25 };
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
結論
「for…in」は、オブジェクトのプロパティを「探索」する特殊な用途には役立ちますが、単純なイテレーション（繰り返し）には向きません。コードの堅牢性を高めるために、基本的にはObject.keysやObject.entriesを使う習慣を身につけましょう。正しいツールを選択することが、予期せぬバグを未然に防ぐフロントエンド開発の第一歩です。