javascriptの配列とfilerについて教えていただきたいです。

  const deletebutton = document.createElement("button");
  deletebutton.innerText = "削除";
  deletebutton.style.backgroundColor = "lightgray";
  deletebutton.addEventListener("click", () => {
    const resultdelete = tasks.filter((aaa) => aaa !== task);
    showTaskList(resultdelete);
    console.log("大元のタスク？", tasks);
    console.log("選択したタスク", task);
    console.log("resultdelete", resultdelete);

    // if (radiowork.checked) {
    //   const newresult = resultdelete.filter((task) => task.status === "作業中");
    //   console.log(newresult);
    //   showTaskList(newresult);
    // }
  });
  return deletebutton;
};

const input = document.getElementById("addbutton");
const tbody = document.getElementById("tbody");
const radiowork = document.getElementById("radio-work");
const radiocomplete = document.getElementById("radio-complete");
const radioall = document.getElementById("radio-all");

const tasks = [];
const createStatusButton = (task) => {
  const button = document.createElement("button");
  button.innerText = task.status;
  button.style.backgroundColor = "lightgray";
  button.addEventListener("click", () => {
    const buttonStatus = button.innerText;
    // console.log("変更前", task);

    if (buttonStatus === "作業中" && radiowork.checked) {
      button.textContent = "完了";
      task.status = "完了";
      const result = tasks.filter((task) => task.status === "作業中");
      showTaskList(result);
    } else if (buttonStatus === "完了" && radiocomplete.checked) {
      button.textContent = "作業中";
      task.status = "作業中";
      const result2 = tasks.filter((task) => task.status === "完了");
      showTaskList(result2);
    } else if (radioall.checked) {
      if (task.status === "作業中") {
        button.textContent = "完了";
        task.status = "完了";
      } else {
        button.textContent = "作業中";
        task.status = "作業中";
      }
      showTaskList(tasks);
    }
    // console.log("変更後", task);
  });

  return button;
};

const createdeleteButton = (task) => {
  const deletebutton = document.createElement("button");
  deletebutton.innerText = "削除";
  deletebutton.style.backgroundColor = "lightgray";
  deletebutton.addEventListener("click", () => {
    const resultdelete = tasks.filter((aaa) => aaa !== task);
    showTaskList(resultdelete);
    console.log("大元のタスク？", tasks);
    console.log("選択したタスク", task);
    console.log("resultdelete", resultdelete);

    // if (radiowork.checked) {
    //   const newresult = resultdelete.filter((task) => task.status === "作業中");
    //   console.log(newresult);
    //   showTaskList(newresult);
    // }
  });
  return deletebutton;
};

const showTaskList = (filteredTasks) => {
  console.log("filteredTasks", tasks);
  tbody.innerHTML = "";
  filteredTasks.forEach((task) => {
    const tr = document.createElement("tr");
    const td1 = document.createElement("td");
    td1.innerHTML = `${task.id}`;
    const td2 = document.createElement("td");
    td2.innerHTML = `${task.comment}`;
    const td3 = document.createElement("td");
    const td4 = document.createElement("td");
    tbody.appendChild(tr);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    td3.appendChild(createStatusButton(task));
    td4.appendChild(createdeleteButton(task));
  });
};

const tasksStatus = document.getElementById("statusradio");
const text = document.getElementById("tasks");

input.addEventListener("click", () => {
  const text = document.getElementById("tasks");
  if (text.value === "") {
    alert("タスクを入力してください");
  } else {
    tasks.push({
      id: tasks.length + 1,
      comment: text.value,
      status: "作業中",
    });
    if (radiowork.checked) {
      const result = tasks.filter((task) => task.status === "作業中");
      showTaskList(result);
    } else if (radiocomplete.checked) {
      const result2 = tasks.filter((task) => task.status === "完了");
      showTaskList(result2);
    } else if (radioall.checked) {
      showTaskList(tasks);
    }
    text.value = "";
  }
});

radiowork.addEventListener("change", (task) => {
  console.log(tasks); // ラジオボタン（作業中）がクリックされた時のタスクを表示
  const result = tasks.filter((task) => task.status === "作業中");
  console.log("result", result); // フィルターをかけた後のタスクのみをコンソールに出力
  showTaskList(result);
});

// ラジオボタン（完了）がクリックされた時
radiocomplete.addEventListener("change", () => {
  const result2 = tasks.filter((task) => task.status === "完了");
  console.log("result", result2);
  showTaskList(result2);
});

// ラジオボタン（完了）がクリックされた時
radioall.addEventListener("change", () => {
  showTaskList(tasks);
});

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <title>JS課題3</title>
  </head>
  <body>
    <h1 class="text-4xl font-semibold font-serif">ToDoリスト</h1>
    <div class="mt-8" id="statusradio">
      <input
        type="radio"
        name="taskradio"
        id="radio-all"
        value="all"
        checked
      />すべて
      <input type="radio" name="taskradio" id="radio-work" value="work" />作業中
      <input
        type="radio"
        name="taskradio"
        id="radio-complete"
        value="complete"
      />完了
    </div>

    <table>
      <thead>
        <tr class="text-xl font-extrabold font-serif">
          <th class="px-1">ID</th>
          <th class="px-1">コメント</th>
          <th class="px-1">状態</th>
        </tr>
      </thead>

      <tbody id="tbody" name="tbody"></tbody>
    </table>

    <p class="text-2xl font-black font-serif pt-4">新規タスクの追加</p>
    <div class="pt-4">
      <input
        type="text"
        id="tasks"
        class="border border-gray-500"
        name="tasks"
      />
      <input type="button" id="addbutton" value="追加" class="rounded" />
    </div>

    <script src="index.js"></script>
  </body>
</html>