[ JavaScript ]連想配列のキーの存在チェックする方法

JavaScript で連想配列のキーの存在チェックの方法について説明します。サンプルコードもありますので、実装の参考にしてもらえればと思います。

JavaScript の連想配列(オブジェクト)とは

JavaScript の連想配列は任意のキーと値を持つ配列です。キーを任意に指定できるのでキーに紐づく値を簡単に取得することができるようになっています。

連想配列実装サンプル

const data = {
    "key_1": "Value 1",
    "key_2": "Value 2"
}

console.log(data)
// {key_1: 'Value 1', key_2: 'Value 2'}

上記の実装方法以外にも、以下のような実装方法もあります。

const data = Object()
data["key_1"] = "Value 1"
data["key_2"] = "Value 2"

console.log(data)
// {key_1: 'Value 1', key_2: 'Value 2'}

連想配列のメリットは「キーに紐づく値を簡単に取得できること」です。商品コードをキーにして商品名を値にするなどしておけば簡単に商品コードに紐づく商品名を取得することができます。

また、連想配列のキー自体に意味を持たせることで連想配列の値がどのような意味を持つものなのかも分かりやすくなります。

const user = {
    id: 1,
    name: "山田　太郎",
    tel: "999-9999-9999",
    address: "住所"
}
// user という変数にid, 名前, 電話番号, 住所といった情報を持っていることがわかります

連想配列の値の呼び出し方について

連想配列は、 . (ドット記法)、 [] (ブラケット記法)のどちらでも値を呼び出すことができます。

const user = {
    id: 1,
    name: "山田　太郎",
    tel: "999-9999-9999",
    address: "住所"
}

console.log(user.name) // 山田　太郎
console.log(user["name"]) // 山田　太郎
// どちらの方法でも呼び出せます

連想配列のキーの存在チェックについて

連想配列に存在しないキーを指定してドット記法で値を取得しようとすると、「 TypeError 」が発生します。ブラケット記法ではエラーは発生しませんが、　undefined が返却されます。値が取得できることが予想されるところでエラーや undefined が発生すると後続の処理で例外を考慮しないといけなくなり、実装が複雑になるので、できれば事前にキーが存在しているかチェックし、キーがある場合の処理とない場合の処理で処理を分岐させてあげたいですね。

では、実際に連想配列のキーの存在チェックの実装方法を説明します。

const user = {
    id: 1,
    name: "山田　太郎",
    tel: "999-9999-9999",
    address: "住所"
}

if ('name' in user) {
    console.log(user.name)
} else {
    console.log("name の情報がありません")
}

ちなみに連想配列の子要素がオブジェクトの場合、下記のように実装します。

const user = {
    id: 1,
    name: "山田　太郎",
    tel: "999-9999-9999",
    address: {
        zip: "999-9999",
        prefecture: "都道府県"
    }
}

if ('address' in user) {
    console.log(user.address)
} else {
    console.log("address の情報がありません")
}

キー in オブジェクト の形式で判定すると、対象のオブジェクトに指定したキーが存在していれば true 、存在しなければ false が返却されます。

ちなみに、下記の方法でも存在チェックは可能です。

if (user.name) {
    console.log('キーが存在する場合')
} else {
    console.log('キーが存在しない場合')
}

ただし、上記の実装方法の欠点として、"" (空文字)や 0 (ゼロ)も false として判定されてしまう点があります。連想配列の値で if 文の判定が行われるので注意が必要です。

より安全に実装するのであれば「 キー in オブジェクト 」を利用しましょう。

最後に

JavaScript の連想配列のキーの存在チェックは、よく実装することがあるので、今回の「 キー in オブジェクト 」を使用した判定ぶんの実装方法をしっかり覚えておきたいですね。