Cannot read property 'x' of undefined の原因と解決策

概要

Cannot read property 'x' of undefinedは、JavaScriptで最も頻繁に発生するエラーの1つです。undefinedまたはnullの値に対してプロパティアクセスを試みた場合に発生します。

TypeError: Cannot read property 'name' of undefined
    at Object.<anonymous> (app.js:10:15)

1
2
3
4
5
// 従来の書き方
const name = user && user.profile && user.profile.name;

// オプショナルチェイニング
const name = user?.profile?.name;

1
2
3
4
const name = user?.profile?.name ?? 'Unknown';

// または
const { name = 'Unknown' } = user?.profile ?? {};

1
2
3
if (user && user.profile) {
    console.log(user.profile.name);
}

1
2
3
4
5
try {
    const name = user.profile.name;
} catch (error) {
    console.log('User profile not available');
}