for文の二重ループを使用して図形を作る、というコードが理解できません。

Question

str = str + ""; というコードが理解できません

以下の内容を示すコードを見て、一部理解できない箇所があります。

JavaScriptで、for文を使った二重ループを使用して、「」を縦横に並べて長方形を作るという内容です。縦横に並べる「」の個数は、1~10までの数値でランダムに選出します。

発生している問題・エラーメッセージ

以下のソースコードをにある「str += "";」（3行目）と、その少し下にある「str = str + "*";」（6行目） と「str = str + "\n"」（8行目）の３つのコードの意味がわかりません。

3行目のコードはなぜ「""」となっているのでしょうか。
6,8行目の「str = str + ""; 」「str = str + "\n"」は、なぜ「str +」となっているのでしょうか。
並べるのは「」だけなので、「str +」は必要ないのではと思うのですが、それを削除するとコンソールには何も表示されなくなります。

エラーメッセージは表示されません。

```JavaScript

let width = Math.round(Math.random() * 10);
let height = Math.round(Math.random() * 10);
let str = "";
for(let i = 1; i <= height; i++){
for(let j = 1; j <= width; j++){
str =str + "*";
}
str =str + "\n";
}
console.log(str);

### 試したこと
【3行目について考えたこと】
・「str = "";」は、空白を入れる（strの存在を残しておく??）という意味。ただ、そもそも空白(" ")ではないので、違うだろうとは思います。
・まだ代入するものはないけど、とりあえず変数strを作っておきたいため。
・後述する「str =」を後から入れるため。

【6、8行目について考えたこと】
・試しに「str +」を消して、「str = "*";」「str = "\n";」としてみましたが、そうするとコンソールには何も表示されなくなります。
・3行目で作った変数strに足すことで、文字列を具現化できる（???）。
正直さっぱりです。

当方まだJSを勉強し始めて日が浅いため、基本的な理解が足りない部分があると思います。
うまく伝えられているか不安ですが、もしよろしければどなたか回答をしていただけると非常に助かります。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

=は、数学的な等価ではなく、文字列を連結して再代入していると考えては？

[hayamine1111]

hai_haiさん、ありがとうございます。
再代入ですか。そう考えるとしっくりくるような、、、。

Answer 1

3行目の理解はだいたい合っています。正確には空白ではなく、長さ0の文字列で初期化しています。表示に必要な文字は後続の処理で追加していくので、最初は何もなしで構わないわけです。

6行目と8行目は、表示に必要な文字（「*」や「\n」）をstrに追加しています。追加せずに単純に代入してしまうと、その文字だけが「console.log(str);」で表示されることになってしまいます。何も表示されなくなったのは、「console.log('\n');」が最終的に実行されたためです。strの内容が、目に見えない改行文字になってしまったからです。

追加と代入の違いは、下記のコードを動かして見てみるとわかりやすいと思います。

let str = '';
str = str + '*';
str = str + '\n';
str = str + '*';
str = str + '*';
console.log(str);

let str = '';
str = '*';
str = '\n';
str = '*';
str = '*';
console.log(str);

Comments

[hayamine1111]

ご回答ありがとうございます。
”空白ではなく、長さ0の文字列で初期化”というのがしっくりきました。
後で追加される２つ分を３行目で宣言していたのですね。
確認用のコードを動かしてみましたが、頭の中がすっきりまとまりました。
ありがとうございました。

Answer 2

3行目のコード

単に変数strを宣言して、空の文字列を代入しているだけです。
宣言let strだけでも問題ありませんが、空文字列を代入しておいた方が「あぁ、あとで別の文字列を入れるのかな」と予想がつきます。

6行目のコード

str = str + "*";は「今のstrに"*"を足して、もう一度strに代入」しています。
JavaScriptでは、文字列どうしを+で連結することができます。

8行目のコード

6行目と同じですが、こちらは改行文字\nを代入しています。

---

「図形をつくる」というよりも「*を、1行につき何文字(width)、何行(height)表示する」と考えるといいと思います。

必要な処理は、以下の通りです。

(1)1行分の文字列を作る(57行目)
(2)改行をいれる(8行目)
(3)(1)と(2)を必要な行数分繰り返す(49行目)

(1)をさらに分解すると、以下の通りです。

(1-1)変数strに保存されている文字列の末尾に文字"*"を追加する(6行目)
(1-2)次の処理のために、新しい文字列を変数strに再代入する(6行目)

試しに「str +」を消して、「str = "*";」「str = "\n";」としてみましたが、そうするとコンソールには何も表示されなくなります。

hayamine1111さんが試したのは、以下のような処理になり、最終的改行文字だけになり、コンソールには、一見して何もないように見えます。

(1-1)strに"*"を代入する(上書きする)
(1-2)strに"\n"を代入する(上書きする)

Comments

[hayamine1111]

非常にわかりやすい解説をありがとうございます。
３行目は宣言だけでもいいけど空文字列にすると後々わかりやすい、というのがかなり納得しました。
６，８行目に関しては再代入というのがキーワードですね。
このソースコード以外でもよく見かけるものだったので、これで学習が捗りそうです。

[NozomuIkuta]

解決したようでよかったです。