ループ内でinsertAdjacentHTMLを使って要素を挿入すると最初の子要素の上にundefinedが表示される

Question

fetchで取得したデータquestionsをforEachで回してtr要素を作成し、tbodyの中にinsertAdjacentHTMLを使って挿入するという処理を行なっているのですが、下画像のように最初の子要素の上にundefinedが表示されてしまいます。何が原因なのでしょうか？分かる方いらっしゃいましたらご教授いただけると幸いです。

<table class="table">
  <thead>
    <tr>
      <th scope="col">質問内容</th>
      <th scope="col">回答A</th>
      <th scope="col">回答B</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody class="question-tbody"></tbody>
</table>

<script src="/javascripts/questions.js"></script>

const tbody = document.querySelector('.question-tbody');
fetch(`/questions/json${window.location.search}`).then((response) => response.json()).then((data) => {
  const { questions } = data;
  let html;
  questions.forEach((question) => {
    const {
      _id,
      title,
      ansA,
      ansB,
      numberOfComments,
    } = question;

    html += '<tr>';
    html += `<td><a class="widelink" href="/questions/${_id}${window.location.search}"></a>${title}</td>`;
    html += `<td><a class="widelink" href="/questions/${_id}${window.location.search}"></a>${ansA}</td>`;
    html += `<td><a class="widelink" href="/questions/${_id}${window.location.search}"></a>${ansB}</td>`;
    html += `<td><a class="widelink" href="/questions/${_id}${window.location.search}"></a>${numberOfComments}</td>`;
    html += '</tr>';
  });

  tbody.insertAdjacentHTML('beforeend', html);
});

Answer 1

html の初期値が undefined なので undefined + '<tr>' // undefined<tr> になっていると思いました

  const { questions } = data;
  // !!!!! undefined !!!!! let html;
  let html = ''; // 空文字入れておく
  questions.forEach((question) => {
    const {
      _id,
      title,
      ansA,
      ansB,
      numberOfComments,
    } = question;
    
    html += '<tr>';

Comments

[maskmelon]

返信が遅くなってしまい申し訳ありません。
ご指摘の通り、html宣言時のundefinedが反映されていたようです。
的確な回答をくださりありがとうございました。