JavaScriptで連想配列のキーの存在チェックの方法を現役エンジニアが解説【初心者向け】

JavaScriptで連想配列のキーの存在チェックの方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

 

 

JavaScriptの連想配列とは

JavaScriptの連想配列とは、キーと値を持ったデータ構造のことを指します。

JavaScriptに限らず、他の言語でも使用する基本的なデータ構造です。連想配列を作る際は、配列と違い{}を使用します。書き方は以下の通りです。キーと値を:で組み合わせて書きます。

const data = { キー1:値1,キー2:値2 }

値には、数値や文字列はもちろん関数やオブジェクトを持たせることもできます。連想配列から値を取り出す場合は、キーを使用して取り出します。

const data = {a:10,b:20,c:30}
data["a"] // => 10
data.a // => 10

 

連想配列のキーの存在チェックの方法

もし指定したキーに値がない場合、連想配列はundefinedを返します。そうなると、コードによってはそれ以降の処理が出来なくなってしまいます。そのため、キーに対応した値があるかどうかをチェックする必要があります。

チェックの方法は、二通りあります。1つ目は、値の存在しないキーで連想配列を取得するとundefinedが返されることを利用してif文でチェックする方法です。

例えば、以下のようにif文を書いてチェックできます。

const data = {a:10,b:20,c:30}
if(data["a"]){
//存在する時の処理
}
// または
if (data.a){
//存在する時の処理
}

これはifでの条件式の判定では、空文字、undefinedやnullがfalseとして扱われることを利用しています。そのため、値が空文字である場合やfalseが入っている場合はifの中身の処理を実行しません。

もう一つはin演算子を使用する方法です。

const data = {a:10,b:20,c:30}
if ("a" in data) {
//存在する場合の処理
}

こちらは、キーが存在すれば値に関わらずif文でtrueと解釈され実行されます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に連想配列の使ってみましょう。今回は値が存在しない時は、その値を出力する代わりに”存在しません”と出力するプログラムを書きます。

const data = { "a":10,"b":"","c":false,"d":[]}
// キーの配列を取得
const keys = Object.keys(data)
// 値を取得して判定する場合
for(var k of keys){
if(data[k]) {
console.log(data[k])
} else {
console.log("存在しません")
}
}
// in演算子を使用する場合
for(var k of keys){
if(k in data) {
console.log(data[k])
} else {
console.log("存在しません")
}
}

 

実行結果は以下の通りです。

10
存在しません
存在しません
[]
10

false
[]

値を取得して判定する場合では、空文字やfalseは値が入っていても、false判定されin演算子を使用する場合では、値に関わらずキーが存在するかで判定されています。

以上で解説を終わります。

筆者プロフィール

メンター金成さん 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。

 

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。