JavaScript

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

undefinedに対して.lengthを読んでいる

こんな症状

.lengthを使った行でこのエラーが出る。「.lengthが使えない」のではなく、その手前の変数がundefinedになっているのが本当の原因だよ。

まず試す

.length の手前の変数を console.log し、undefined なら『値が入るはずだった場所』をさかのぼって直す。

// ❌ return を忘れて戻り値が undefined
function getScores() {
  const scores = [80, 92, 75];
}

// ✅ return する
function getScores() {
  return [80, 92, 75];
}

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓変数を宣言しただけで配列/文字列を入れていない
→ 初期値を代入する（例: const items = []）。
✓関数の return を書き忘れた
→ 戻り値が undefined になる。return を足す。
✓fetch など非同期の結果が届く前に使った
→ await やコールバック・.then の中でアクセスする。
✓プロパティ名のタイポ（items を item など）
→ 正しいプロパティ名に直す。data?.length でガードも有効。

なぜ起きる？

エラーの主役は .length ではなく、その手前にある変数だよ。data.length なら data がundefinedになっているんだ。よくあるのは、(1) 変数を宣言しただけで配列や文字列を代入していない、(2) 関数にreturnを書き忘れて戻り値がundefined、(3) fetchなど非同期処理の結果が届く前にアクセスしている、(4) オブジェクトのプロパティ名のタイポ（items を item と書くなど）、の4つ。reading の部分が 'map' や 'forEach' でも原因と直し方は同じだよ。

✕ エラーが起きるコード

function getScores() {
  const scores = [80, 92, 75];
  // return を書き忘れている
}

const result = getScores();
console.log(result.length);
// Uncaught TypeError: Cannot read properties of undefined (reading 'length')

✓ 直したコード

function getScores() {
  const scores = [80, 92, 75];
  return scores;  // ← return を忘れない
}

const result = getScores();
console.log(result.length); // 3