コードの意味の理解で行き詰まっています【JS】

Question

コードの意味の理解で行き詰まっています

JSの学習中です。下記のコード内6行目document.write("["+i+"]"+a+"<br>");の+i+が何故、このような表記なのか理解できていません。前後の+なしで記述で良いと思ってしまっています。勿論、そのようにするとブラウザに何も表示されません。
ご理解できる方がいましたら、ご教授いただきたく存じます。

該当のソースコード

var arrb=[3,5,9,10];
      var i=0;
      document.write("配列の長さは"+arrb.length+"です<br />");
      while(arrb.length){
        a=arrb.shift();
        document.write("["+i+"]"+a+"<br>");
        i++;
      }

Answer 1

ソースコードの色を見てください。"["と"]"がそれぞれ文字列となっていて、iを足しています。

なお、Template Literalを使えば、`[${i}]${a}<br>`のように書けます。

…というより、いまどきdocument.write()を使っているような資料で学習すべきではないでしょう。

Comments

[freeeeeeeRN]

すぐに理解できました。ご丁寧にありがとうございます！
そもそも使うべき資料でないのですね、、資料自体探してみます、ありがとうございますm(_ _)m

[maisumakun]

document.writeは、仕様書に「このメソッドは利用しないことが強く奨励される。」とまで書かれている代物です。

https://triple-underscore.github.io/HTML-dynamic-markup-insertion-ja.html#document.write() （仕様書和訳）

Answer 2

ブラウザに
配列の長さは4です。
[0]3
[1]5
[2]9
[3]10
と表示する記述だろうなと思います。
間違ってたらすみません。

"["　+　i　+　"]"　の記述は

文字として[を表示するために"["
while文で一回ループするごとに
0 1 2 3と増えていくのがi
文字として]を表示するために"["
結果下のようにブラウザに出力された
[0]
[1]
[2]
[3]
を表す記述になってるのだろうなと思います。
確認してないので間違えてるかもしれません