読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

for...inとfor...ofの違い

javascript/node.js

個人的には頻繁に誤爆するfor...inとfor...ofの違いです。
雑にまとめると、

  • 中身を見たい場合はof
  • enumrableなものを読みたい場合はin

といったところでしょうか

実際のところ

基本的な挙動

特に拡張をしていない、ただの文字列の場合を考えます。
配列でも連想配列でも、基本は同じです。

ofは内容を返します。

for (val of "string") { console.log(val) }
/*
s
t
...
g
*/

一方、inの方はインデックスを返します。

for (val in "string") { console.log(val) }
/*
0
1
...
5
*/

妙なことをすると起こる挙動

inの方は、prototypeで拡張したり、独自メソッドを拡張したりすると以下の様な挙動をします。
これは、enamableなものを全て順繰りに実行するからです。
順番はオブジェクトの解決順に従います。
魔界記法を試したいわけでも無い場合は無理に実行することもないでしょう。

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); 
}
/* 
0
1
2
"foo"
"arrCustom"
"objCustom"
*/