ワイズリマインダー

JavaScriptの多次元連想配列で値が存在するか確認する方法｜undefinedエラー対策

2025.07.31

多次元Objectで undefined エラーが出る

JavaScriptで多次元の連想配列（Object）を扱っていると、

data.user.name

のようなアクセス時に、

Cannot read properties of undefined

エラーが出ることがあります。

これは、途中階層が存在しないためです。

 

JavaScriptの連想配列はObject

例えば、

const data = {
user:{
name:"Yasuo"
}
};

このような構造。

PHPで言う多次元連想配列に近いですが、JavaScriptではObjectとして扱われます。

 

存在確認せずアクセスすると危険

例えば、

console.log(data.profile.name);

ですが、

profile

が存在しない場合、

Cannot read properties of undefined

になります。

 

昔ながらの確認方法

以前は、

if(data &&
data.profile &&
data.profile.name){
}

のように書いていました。

ですが階層が深いとかなり読みにくくなります。

 

現在は Optional Chaining が便利

最近のJavaScriptでは、

data?.profile?.name

が使えます。

存在しなければ、

undefined

を返すだけで、エラーになりません。

 

実際の例

const name = data?.profile?.name;

console.log(name);

存在しなければ、

undefined

です。

 

undefined 判定する

値存在確認なら、

if(data?.profile?.name !== undefined){
}

のように書けます。

 

null との違いも注意

JavaScriptでは、

・undefined
・null

は別物です。

例えば、

name:null

なら、

「キーは存在するが値がnull」

です。

 

in 演算子を使う方法もある

キー存在だけ確認したいなら、

'name' in data.profile

も使えます。

ただし、

data.profile

自体が未定義だとエラーになります。

 

APIレスポンス処理で便利

Optional Chaining は、

・JSON API
・外部レスポンス
・設定ファイル

などで非常に便利です。

存在しない項目が混ざるケースで特に役立ちます。

 

まとめ

JavaScriptの多次元Objectで値存在確認するなら、

data?.profile?.name

のような Optional Chaining が便利です。

従来の、

if(data && data.profile)

より読みやすく、安全にアクセスできます。

特にAPIレスポンス処理では、undefinedエラー対策としてよく使われます。

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。