配列と繰り返し処理について

Question

const characters = [
  
  {name: "にんじゃわんこ", age: 14},
  
  {name: "ひつじ仙人", age: 100},
  
  {name: "ベイビーわんこ", age: 5},

];


for (let i = 0; i < characters.length; i++) {
  
  console.log("--------------------");
  
  
  const character = characters[i];
  
  
  console.log(`名前は${character.name}です`);
  
   
  console.log(`${character.age}歳です`);
  

}

コンソールには↓こんな感じで出力されます。

ーーーーーーーーーー
名前はにんじゃわんこです
14歳です
ーーーーーーーーーー
名前はひつじ仙人です
100歳です
ーーーーーーーーーー
名前はベイビーわんこです
5歳です

普通に考えると↓こうなる気がするのですが

ーーーーーーーー
ーーーーーーーー
ーーーーーーーー
名前はにんじゃわんこです
名前はひつじ仙人です
名前はベイビーわんこです
14歳です
100歳です
5歳です

どういう理屈で前者のようになるのでしょうか？

Comments

[m.ts10806]

現状だとスコープ{}の対応が分かりづらいので、インデントをつけていただけると。

Answer 1

for文は

for (初期化;条件;増減) {
	処理A;
	処理B;
	処理C;
}
処理D;
...

というような書き方になりますね。

上の書き方の流れとして、

         ___________←_____________←____
         ↓                            ↑
初期化 → 条件 → 処理A → 処理B → 処理C → 増減
  (↓False)↓  (→True)
        処理D

このような感じになります。

条件がTrueなら{ }の中の処理を順に行うようになります。

Comments

[退会済みユーザー]

いつもありがとうございます。理解しました。

Answer 2

解説用のコード

for (let i = 0;              // 1
     i < characters.length;  // 2
     i++                     // 3
) {
  console.log("--------------------");       // 4
  const character = characters[i];           // 5
  console.log(`名前は${character.name}です`); // 6
  console.log(`${character.age}歳です`);      // 7
}

実行順は次のようになります。
1,
2, …繰り返しの先頭部分
4,
5,
6,
7,
3, …繰り返しの終わり部分
2,
4,
5,
6,
7,
3,
2,
.
.
.

と、1が実行された以降は、2,4,5,6,7,3までを一度ずつ実行し、それを1つのまとまりとして繰り返します。
各行を繰り返してから、次の行を繰り返すわけではありません。

Comments

[退会済みユーザー]

いつもありがとうございます。理解しました。初心者側の気持ちを汲んでもらえて回答してくれるので、助かっています。

[退会済みユーザー]

そう感じていただけたならよかったです。慣れるまで躓くことが多いと思いますが、めげずにトライしてみてください。私は中学生からHTMLなりJavascriptなりBasicなり趣味で触ってましたが、めちゃくちゃ左折しまくった方なのでww、理解ができないときの辛さは少しはわかるつもりです

Answer 3

普通に考えると↓こうなる気がするのですが

いえ、どう考えてもそうなりませんよ。
理屈も何もそのように出るように書かれているから、表示の通りです。

もっとミニマムコードで試すと良いのでは。

for (let i = 0; i < 10; i++) {
  console.log("---");
  console.log(i);
}

/*
---
0
---
1
---
2
*/

Answer 4

カッコの中の処理を繰り返すからです

どういう理屈で下が普通だと考えたのかは分かりませんが
下の結果を出すには意図的に個別ループが必要です

for (let i = 0; i < characters.length; i++) {
  console.log("--------------------");
}

for (let i = 0; i < characters.length; i++) {
  console.log(`名前は${characters[i].name}です`);
}

for (let i = 0; i < characters.length; i++) {
  console.log(`${characters[i].age}歳です`);
}

Answer 5

普通に考えると前者になりますが、どういう理由で後者になると思ったのかを書くと、間違いが指摘できると思います。