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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ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では、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。