js reactつき コードリーディング

Question

  const sections = this.props.chapter.sections;
    for (let i = 0; i < sections.length; i++) {
      for (let j = 0; j < sections[i].exercises.length; j++) {
        const isCompleted =
          completedExerciseIdList.indexOf(
            this.props.courseId + "/" + sections[i].exercises[j].exerciseId
          ) >= 0;
this.setState({ isCompleted, isOpen });

このコードが何をしているか理解したいです。
具体的に知りたい部分として
、４行目の変数宣言の部分の解釈が「completeExerciseIdListのindexOfによる結果が0以上である場合に、iscompletedが定義される」という理解であっているか教えていただきたいです

補足
みなさんありがとうございます。
このコードの目的は、元々は
「全てのsectionが終了（こちらの言葉ですみません）」したら「isCompletedをtrueにする」というものであったようなのですが、現在は（みなさんの回答を元に考えると）
「for文による繰り返しを行い、"最後の"チャプターが終了されていればisCompletedをtrueにする」という仕様」という風になっているようですね……
別質問で上記目的の方法を伺いたいと思います。ありがとうございました。

Answer 1

４行目の変数宣言の部分の解釈が「completeExerciseIdListのindexOfによる結果が0以上である場合に、iscompletedが定義される」という理解であっているか

違います。変数自体は条件にかかわらず定義されて、その中身がtrueになるかfalseになるか、という話です。

Comments

[violineer]

そうしますと、このコードの繰り返しは
「iscompletedの値をfalseかtrueで更新している」
ことになりますか？？

[maisumakun]

そうですね、{}内に書かれた「isCompleted」だけのものは、「isCompleted: isCompleted」の省略形です。

Answer 2

字下げと括弧の開け締めはちゃんとしましょうね！

const sections = this.props.chapter.sections;
for (let i = 0; i < sections.length; i++) {
  for (let j = 0; j < sections[i].exercises.length; j++) {
    const isCompleted =
      completedExerciseIdList.indexOf(
        this.props.courseId + "/" + sections[i].exercises[j].exerciseId
      ) >= 0;
    this.setState({ isCompleted, isOpen });
// 以下の波括弧2つが閉じ忘れ
  }
}

completedExerciseIdListの定義が良く分かりませんが、
変数名から察するに恐らく配列なので、Array.prototype.indexOf()を指しているのでしょう。
つまり、配列の要素からthis.props.courseId + "/" + sections[i].exercises[j].exerciseIdを探していき、見つからなかったら-1を返す事を想定しています。

なのでconst isCompleted = -1 >= 0;という関係演算子で評価され、
検索した結果、存在すればtrue、存在しなければfalseというBoolean値が代入されます。

その結果を元にthis.setState({ isCompleted, isOpen })を実行しています。

forは読みづらいのでfor...ofで書き直すとこんな感じになります。
あと、completedExerciseIdList.indexOf() !== -1は読み物としては重いので、isCompletedという関数名で外出ししました。

// isCompleted :: Exercise -> Boolean
const isCompleted = exercise =>
  completedExerciseIdList.indexOf(
    this.props.courseId + "/" + exercise.exerciseId
  ) !== -1 // -1か否かで確認した方がプログラマにとっては分かりやすい

for (const section of this.props.chapter.sections) {
  for (const exercises of section.exercises) {
    this.setState({
      isCompleted: isCompleted(exercises),
      isOpen
    });
  }
}

Answer 3

var x;

変数xを宣言

var x;
x = 1;

変数xを宣言した後、変数xに値を代入

var x = 1;

変数xを宣言すると同時に値も代入して初期化。

const isCompleted =
          completedExerciseIdList.indexOf(
            this.props.courseId + "/" + sections[i].exercises[j].exerciseId
          ) >= 0;

定数isCompletedを宣言すると同時に値を代入。
この場合、completedExerciseIdListにfor文内で動的に生成された対象の文字列があればtrueが代入され、そうでない場合はfalseが代入される。

追記

何やらコードリーディングが大変そうな気がしてくるコードですね。

それと、setStateをfor文の中で呼んでますけど、それだとループする度にビューを再レンダリングしてると思います。コードリーディングということでご自身のコードではないのでしょうが、本来ならsetStateは一回でまとめたいところですね。