JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクトのプロパティにアクセスする2つの方法【ドット記法とブラケット記法】

JavaScriptでは、オブジェクトのプロパティにアクセスする方法が2つあります。1つはドット記法（.property）、もう1つはブラケット記法（["property"]）です。どちらも同じプロパティを参照できますが、書き方や使える場面が異なります。

構文1：ドット記法

Object.property;

構文2：ブラケット記法

Object["property"];

それでは、具体例を見ながらそれぞれの使い方を確認していきましょう。

例1：ドット記法でプロパティにアクセスする

次の例では、「person」というオブジェクトを定義し、そのプロパティにドット記法を使ってアクセスしています。

<html>
<body>
<script>
var person = {
    firstname: "Ram",
    lastname: "kumar",
    age: 50,
    designation: "content developer"
};
document.write(person.firstname + " " + "is in a role of" + " " + person.designation);
</script>
</body>
</html>

出力結果

Ram is in a role of content developer

person.firstname のように、オブジェクト名の後ろにピリオド（.）とプロパティ名を続けて書くだけで、目的の値を取得できます。

例2：ブラケット記法でプロパティにアクセスする

同じ「person」オブジェクトに対して、今度はブラケット記法を使ってプロパティにアクセスしてみます。

<html>
<body>
<script>
var person = {
    firstname: "Ram",
    lastname: "kumar",
    age: 50,
    designation: "content developer"
};
document.write(person['firstname'] + " " + "is in a role of" + " " + person['designation']);
</script>
</body>
</html>

出力結果

Ram is in a role of content developer

このように、person['firstname'] の形式でも、ドット記法とまったく同じ結果が得られます。

ドット記法とブラケット記法の違いと使い分け

どちらの記法も同じプロパティにアクセスできますが、以下のような特徴があります。

  • ドット記法：シンプルで読みやすいのが特徴です。プロパティ名があらかじめ決まっている場合に最適です。
  • ブラケット記法：プロパティ名を変数として動的に指定できます。また、ハイフンや空白を含むキー名、数字から始まるキー名などにも対応できます。
const key = "lastname";
console.log(person[key]); // ブラケット記法なら変数でアクセス可能

補足：本記事のコードでは var を使用していますが、現代のJavaScriptでは再代入の予定がない場合は const、再代入が必要な場合は let を使うことが推奨されています。

  1. JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

    JavaScriptでオブジェクトのプロパティ存在を確認する方法 JavaScriptでは、オブジェクトに特定のプロパティが存在するかどうかを確認したい場面がよくあります。最も基本的な方法は、すべてのオブジェクトが持つhasOwnProperty()メソッドを使用することです。このメソッドは、指定したプロパティがオブジェクト自身に直接定義されている場合にtrueを返し、存在しない場合にはfalseを返します。 hasOwnProperty()メソッドの構文 object.hasOwnProperty(propertyName) propertyName： 存在を確認したいプロパティ名（文字列

  2. JavaScriptの分割代入（デストラクチャリング）でオブジェクトに新しいプロパティを割り当てる方法

    JavaScriptでは、分割代入（デストラクチャリング）の構文を活用することで、あるオブジェクトから値を取り出しながら、別のオブジェクトへ新しいプロパティとして割り当てることができます。本記事では、その具体的な実装方法をサンプルコードとともに解説します。 ポイント：代入先を指定した分割代入 通常、分割代入は宣言した変数へ値を展開するために使われますが、({ a: obj.a } = obj1) のように代入先のプロパティを明示的に指定することで、既存オブジェクトのプロパティへ直接値を代入できます。これにより、一時的な変数を介さずにオブジェクト間でデータをコピーできます。 コード例 &l