JavaScriptで文字列用に用意した変数の先頭に「undefined」が入ってしまってハマった。

JavaScriptでテキスト用に用意した変数（正確に言えば文字列を代入する予定の変数）に文字列を代入すると先頭になぜか「undefined」が入ってしまって小一時間くらいはまってしまったのでそのときの解決方法を書いておきます。

変数を空の値で初期化したときに＋演算子をつかうと文字列の先頭が「undefined」になる

これはめちゃくちゃ初歩的なミスですが以下のように変数を空の値で初期化して +演算子で文字列を結合すると文字列の先頭が「undefined」になってしまいます。普通に考えると当然ですよね。空の変数と他の文字列を結合しているわけですから当然の結果です。

間違った例をみてみましょう↓

let text;
text += 'Hello World';
console.log(text) // undefinedHello World

変数が空の値つまりは「undefined」なので「Hello World」という文字列を連結すると結果は「undefinedHello World」になってしまいます。ちなみにわたしはこれに気づかず小一時間くらいはまりました。

変数の初期化は空の値ではなく空文字で行うようにしましょう。(undefinedを使う必要がある人は別ですが)

let text = ''; // ← 空文字で初期化
text += 'Hello World';
console.log(text) // Hello World