JavaScript ES 6のfor文について初歩的な質問です

Question

はじめまして。
４日ほど前からプログラミングを始めました。
HTML CSSとやってきて現在JavaScriptをしているのですが繰り返しのfor文で少し理解ができない部分があるので質問させていただきます。

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

// for文を完成させてください
for (let i = 0; i < characters.length; i++) {
  console.log("--------------------");
  
  const character = characters[i];
  
  console.log(`名前は${character.name}です`);
  
  console.log(`${character.age}歳です`);
  
}

for文の変数の更新式でi++をしているのでインデックス0+1でインデックス1から名前・齢が表示されると自分では思ったのですが、なぜi++をしているのにインデックス0の要素が取り出せているのでしょうか？
初歩的な質問だと思いますがご教授いただけると幸いです。

Answer 1

forのその箇所は、
ブロックの処理が終わった後にされるからです。

一つ目の式は、forが開始される時に実行されます。
二つ目の式は、式の値がtruethyであれば、ブロック内の処理を実行するかを判別するためのものです。
三つ目の式は、繰り返し処理の一個一個が終わるたびに実行されます。

Comments

[hentaiman]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for
の
initialization
condition
expression
の説明を読むと良いでございますな

[hentaiman]

タイミング被った失礼致した

[miyabi_pudding]

ありがとうございます。
一応回答にも細かい挙動について追記してみました。

[miyabi_pudding]

いえいえw
私も最初から細かく書いてれば良かったですw

[seraxun]

ありがとうございます。
一行でコードを書いたからと言って一行目にすべてのコードが実行されるわけではないのですね。

[miyabi_pudding]

処理の区切りは、基本的には;
と覚えておくと良いかと。
行で考えるのではなく、
処理の区切りで考えると良いかと思います。