BOOK Studio947
狩野祐東・狩野さやか著書

3-11でのfor…in文について

maiki asked 4年 ago

『確かな力が身につくJavaScript「超」入門』
チャプター3の3-11という項目に、
「アイテムの価格と在庫を表示する」という内容が次の通り順に説明されています。
・オブジェクト
・ステップ1「本のデータを登録する」
       ところでこれまでに出てきたオブジェクトとの関係は?
・ステップ2「すべてのプロパティを読み取る」
       コメントアウトって?
・ステップ3「htmlに出力する」
       整形するならCSSも追加しよう
       どちらを選べばいいの!?配列vsオブジェクト
ステップ3のページに、
————–
for…in文
 今回のプログラムではforで始まりますが、()の中がいままでとは違います。これはfor…in文という、オブジェクトのプロパティをすべて読み取ることだけを目的とした、専用の繰り返し文です。オブジェクトに登録されているプロパティのかずだけ、{~}内の処理を繰り返します。
 「変数名」のところは、変数名だから自由につけてかまわないのですが、一般的には「p」にします。繰り返しの変数iと同じで、慣例的なものです。
 この変数pには、for…inが繰り返すたびに、オブジェクトに登録されているプロパティのプロパティ名が1ずつ代入されています。例えば、1回目の繰り返しのとき、変数pには‘title’が、プロパティ名の「名前」としてー正確な言い方をすれば文字列として-代入されます。
 変数pからのプロパティ名を読み取りたいときは、pとだけ書きます。
 そして、プロパティに保存されているデータの方を読み取りたいときは次のようにします。
————–
という説明があるのですが、
その一文の中で、
「これはfor…in文という、オブジェクトのプロパティをすべて読み取ることだけを目的とした、専用の繰り返し文です。」というのがイマイチ理解が出来ていません。
これは
プロパティに書いてある処理内容にそって動作を実行させる
と捉えてもよいのでしょうか?
もし間違っているのであればどうとらえればよいのかお教え願えませんでしょうか。

1 Answers
狩野 祐東 Staff answered 4年 ago

「プロパティに書いてある処理内容にそって動作を実行させる」というのは、ちょっと違う気がします(わたしが理解できていないだけかもしれませんが)。

この回答で「オブジェクト」といえば、3-11で扱っているデータのことを指すことにします。
オブジェクトは、本書で説明しているとおり、こんな形をしていますね?

{
	title: 'JavaScript入門',
	price: 2500,
	stock: 3
}

このとき、このオブジェクトは3つのプロパティを持っています。ここまでは大丈夫ですか?
for…in 文は、「対象のオブジェクトが持っているプロパティすべてに、何らかの処理をする」ときに使います。
このfor…in文では、繰り返すたびにオブジェクトに含まれる「プロパティ名」が、p.147の書式にある「変数名」のところに設定した変数に代入されます(書籍ではこの変数名がp)。

説明のために単純化しますが、for…in文が繰り返されるたびに、変数pに代入される値が次のように変わっていきます。

1回目の繰り返しでは変数pにtitle(プロパティ名)が代入される
2回目の繰り返しでは変数pにprice(プロパティ名)が代入される
3回目の繰り返しでは変数pにstock(プロパティ名)が代入される

結果的に、対象のオブジェクトが持っているプロパティをすべて取得します。
そして、取得したすべてのプロパティに対してどんな処理をするかを、for…inのうしろの{…}の中に書くわけです。