VIDEO LESSON

JavaScriptのObject.hasOwn()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:28動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はオブジェクト・ハズ・オウンを紹介します。
0:04これは、オブジェクト自身が指定したキーを持っているかどうかを、トゥルーかフォルスかで答える静的メソッドです。
0:12ここでいう自身とは、そのオブジェクトに直接書かれたプロパティのことで、継承で受け継いだものは含みません。
0:20この動画では、書き方と引数と戻り値、記事の基本例と境界例、イン演算子や従来の書き方との違い、
0:28シンボルキーや例外の注意点、そして設定の有無を区別する実例まで、実行結果と一緒に学びます。
0:35キーの有無を確かめる場面は、設定や外部データの処理など、日常のコードに数多く登場します。
0:41まず動作環境を確認します。
0:43オブジェクト・ハズ・オウンは比較的新しいメソッドで、クロームとエッジでは九十三以降、
0:49ファイアーフォックスでは九十二以降、サファリでは十五・四以降で使えます。
0:55ノード・ジェイエスでは十六・九・ゼロ以降に対応しています。
1:00記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:04古い環境では使えない場合があるので、公開するコードでは対象環境を先に確認してください。
1:11追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:16特にサファリは対応開始が少し遅いため、古い端末も対象にする場合は注意が必要です。
1:22書き方を確認します。
1:24オブジェクトと書き、続けてハズ・オウンと書いて、カッコの中に調べたい対象とキーを渡します。
1:30第一引数が対象のオブジェクト、第二引数が文字列またはシンボルのキーです。
1:35戻り値はブール値で、自身のプロパティがあればトゥルー、なければフォルスが返ります。
1:41スライドの例では、名前を持つオブジェクトについて、名前のキーはトゥルー、
1:46年齢のキーはフォルスになることを実機で確認しました。
1:50対象のオブジェクト自体は変更されず、調べるだけのメソッドです。
1:55数値のキーは文字列に変換されて判定されるため、配列の添字もそのまま調べられます。
2:01記事の基本例を見ます。
2:02値がアンディファインドのプロパティを持つオブジェクトを用意し、バリューというキーがあるかを調べるコードです。
2:09実行結果はトゥルーで、ノードの実機結果とも一致しています。
2:13ここが大切なポイントで、このメソッドは値の中身ではなく、キーが存在するかどうかだけを見ます。
2:19だから、値がアンディファインドでも、キーが書かれていればトゥルーになります。
2:24逆に、キーが省略されていればフォルスになるので、設定されたのか省略されたのかを区別できるのです。
2:31手元のコンソールでキーを消したり値を変えたりしながら、結果の変化も確かめてみてください。
2:37記事の境界条件の例を見ます。
2:39オブジェクト・クリエイトで、インヘリテッドというプロパティを持つオブジェクトを継承した子オブジェクトを作ります。
2:48この子に対してハズ・オウンで調べると、結果はフォルスで、記事の期待出力とも一致しています。
2:55継承しただけのプロパティは、自身のプロパティとは数えないためです。
3:01一方、同じキーをイン演算子で調べるとトゥルーになります。
3:05イン演算子は継承まで含めて探すので、結果が正反対になる好例です。
3:10どちらを使うかは、自身だけを見たいかで選んでください。
3:15継承を数えるかどうかで答えが変わる代表例として、記事が用意した境界例です。
3:21イン演算子との違いをもう少し詳しく見ます。
3:24空のオブジェクトには、トゥー・ストリングという名前を直接書いていません。
3:29しかし、すべてのオブジェクトはプロトタイプを通じてこの名前を継承しています。
3:35そのため、イン演算子ではトゥルーになりますが、ハズ・オウンではフォルスになります。
3:41スライドの結果は実機でも確認済みです。
3:43つまり、ハズ・オウンはプロトタイプチェーンをたどらず、そのオブジェクト自身だけを見る、
3:47というわけです。
3:51継承を混ぜたくない判定では、この違いが重要になります。
3:55逆に継承も含めて確認したい場面では、イン演算子を選ぶのが適切です。
3:59従来の書き方との違いも押さえます。
4:02以前は、各オブジェクトが持つハズ・オウン・プロパティというメソッドを呼ぶ方法が一般的でした。
4:10しかし、オブジェクト自身に同名のキーが書かれていると、そのメソッドが上書きされて誤った答えが返る恐れがあります。
4:19また、プロトタイプを持たないオブジェクトでは、そのメソッド自体が呼べません。
4:25オブジェクト・ハズ・オウンは、オブジェクト側に用意された静的メソッドとして外から呼ぶので、
4:29こうした影響を受けません。
4:34スライドの例でも、正しくトゥルーが返ることを実機で確認しました。
4:39新しく書くコードでは、こちらに書き方を統一すると意図が伝わりやすくなります。
4:45キーの種類についても確認します。
4:48第二引数には文字列だけでなく、シンボルも渡せます。
4:52スライドの一行目では、シンボルをキーに持つオブジェクトを、同じシンボルで調べてトゥルーになることを実機で確認しました。
5:02ただし、同じ説明文で新しく作った別のシンボルではフォルスになるので、必ず同じシンボルを使ってください。
5:10配列もオブジェクトの一種なので、添字やレングスといった自身のプロパティを調べられます。
5:17また、列挙できないように設定した隠れたプロパティでも、存在すればトゥルーになります。
5:24キーの型を問わず、同じ書き方で判定できる点も利点の一つです。
5:29注意点を見ます。
5:30もっとも大切なのは、第一引数にヌルやアンディファインドを渡すと、フォルスではなくタイプ・エラーの例外が発生することです。
5:38存在しないキーを調べた場合はフォルスが返るだけなので、対象そのものが空でないかを先に確認する流れにしてください。
5:45もう一つ、文字列キーは大文字と小文字が区別されます。
5:49スライドのように、名前のキーを大文字始まりで探すとフォルスになることを実機で確認しました。
5:55スペルやキーの表記ゆれにも注意して使ってください。
5:58対象がオブジェクトかを先に確かめる一文を添えると、安全性が大きく上がります。
6:04実務に近い実例として、設定オブジェクトの扱いを見ます。
6:07タイムアウトというキーにアンディファインドが明示された設定では、ハズ・オウンはトゥルーを返します。
6:14これは、利用者があえて未設定の値で上書きした、と解釈できるサインです。
6:19一方、リトライズというキーがなければフォルスになるので、そこにだけデフォルト値を補う、
6:23という処理が書けます。
6:27スライドの結果はどちらも実機で確認済みです。
6:30値だけを見ると、省略と明示的なアンディファインドは同じに見えますが、キーの有無でなら区別できるのです。
6:37デフォルト値との組み合わせ処理でも、同じ考え方がそのまま応用できます。
6:42まとめです。
6:43オブジェクト・ハズ・オウンは、オブジェクト自身がキーを持つかどうかを、トゥルーかフォルスかで返す静的メソッドです。
6:51判断のポイントは三つです。
6:53まず、継承したプロパティはフォルスになるので、自身だけを見たいときに使うこと。
6:59次に、値がアンディファインドでもキーがあればトゥルーになり、設定の省略と明示を区別できること。
7:06そして、従来のメソッドより安全ですが、対象がヌルの場合は例外になるので事前確認を添えることです。
7:14まずは記事の基本例と境界例を実行し、キーを変えて結果を予測してから確かめてみてください。
7:20次に学ぶオブジェクト・アサインと組み合わせると、活用の幅がさらに広がります。
7:26お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.hasOwn()でオブジェクト自身がキーを持つか調べる方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのObject.hasOwn()の使い方：引数・戻り値・実例と注意点 →