どちらも「値がない」ことを表しますが、意図と由来 が異なります。
undefined：値の 不在 であり、通常は JavaScript エンジンによって設定されます — 宣言されたが代入されていない変数、存在しないオブジェクトのプロパティ、渡されなかった関数の引数、またはreturnのない関数などです。null：意図的な「空」の値で、「ここには意図的に何もない」と示すためにあなた自身が代入します。
js
let a; // undefined — declared, not assigned
const obj = {};
obj.missing; // undefined — property doesn't exist
function f() {}
f(); // undefined — no return
const b = null; // null — you chose to empty it
null == undefined; // true — loose equality treats them as equal
null === undefined; // false — different types
typeof undefined; // "undefined"
typeof null; // "object" (historical bug)
const value = input ?? "default"; // defaults on EITHER null or undefined
user?.address?.city; // optional chaining — undefined if any link is null/undefined
値を意図的にクリアするには null を使い（例：「選択中のユーザーなし」）、undefined は「まだ設定されていない」として扱います。??（nullish 合体）と ?.（optional chaining）の演算子は両方を一度に扱えるため、これほど広く使われています。