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

JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

JavaScriptでオブジェクトのプロパティにアクセスする3つの方法

JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。

  • ドット記法：object.property
  • 角括弧記法：object['property']
  • 分割代入：let {property} = object

1. ドット記法（object.property）

最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけでプロパティにアクセスできます。ただし、プロパティ名が有効な識別子（英字・数字・アンダースコアなど）である必要がある点に注意しましょう。

2. 角括弧記法（object['property']）

プロパティ名を文字列や変数で指定できるのが最大の特徴です。ハイフンや空白を含むキー、数字から始まるキーにも対応できるほか、変数に格納されたキー名を使って動的にアクセスしたい場合にも活躍します。

3. 分割代入（let {property} = object）

ES2015（ES6）で導入された構文です。オブジェクトから指定したプロパティを取り出し、そのまま独立した変数として扱えるため、複数のプロパティを一度に受け取りたい場面で特に便利です。

以下は、これら3つの方法でオブジェクトのプロパティにアクセスするサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptのオブジェクトプロパティへアクセス</h1>
<div><pre class="sample">{a:22,b:44}</pre></div>
<div class="result"></div>
<button class="Btn">アクセス</button>
<h3>上のボタンをクリックして、オブジェクトのプロパティにアクセスしてください</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = { a: 22, b: 44 };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML += "obj.a = " + obj.a + "<br>";
        resEle.innerHTML += "obj['a'] = " + obj["a"] + "<br>";
        let { a } = obj;
        resEle.innerHTML += "{a}=obj = " + a + "<br>";
    });
</script>
</body>
</html>

実行結果

JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

「アクセス」ボタンをクリックすると、3つの記法それぞれで取得したプロパティ a の値が順に表示されます。

JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

まとめ

基本となるのは可読性の高いドット記法です。キー名が変数で決まる場合や特殊な文字を含む場合は角括弧記法、複数の値をまとめて取り出したいときは分割代入を選ぶと、意図が伝わりやすいコードになります。用途に合わせて上手に使い分けましょう。

  1. JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

    JavaScriptでは、オブジェクトのprototypeプロパティに値を追加することで、プロパティを複数のインスタンス間で共有できます。prototypeに登録されたプロパティは、そのコンストラクタから生成されたすべてのインスタンスから共通して参照されます。 この手法には大きなメリットがあります。各インスタンスごとに同じ値のプロパティを個別に定義する必要がないため、コードの重複を減らし、メモリの使用量も抑えられるのです。たとえば、学校名のように全生徒で共通する情報は、prototypeにまとめておくのが理想的です。 実装例：prototypeでプロパティを共有するコード 以下は、JavaS

  2. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座