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

JavaScriptのドット表記とブラケット表記の違いを解説！正しい使い分けのポイント

JavaScriptには、オブジェクトのプロパティへアクセスするための方法としてドット表記（dot notation）とブラケット表記（bracket notation）の2つがあります。どちらも同じプロパティにアクセスできますが、それぞれに特徴があり、使い分けることでより柔軟で読みやすいコードを書くことができます。

一般的には、簡潔で可読性の高いドット表記が最もよく使われています。しかし両者の最大の違いは、ブラケット表記では変数を使ってプロパティ名を動的に指定できるという点です。

ドット表記とは

ドット表記は、object.property のように、オブジェクト名の後にドット（.）を付けてプロパティ名を直接記述する方法です。可読性が高く、エディタのコード補完も効きやすいというメリットがあります。

const student = { name: "Rohan", age: 18 };
console.log(student.name); // "Rohan"

ブラケット表記とは

ブラケット表記は、object["property"] のように、角括弧（[]）の中にプロパティ名を文字列または変数で指定する方法です。以下のようなケースで特に有用です。

  • プロパティ名を変数に格納して動的にアクセスしたい場合
  • ハイフンやスペースなどの特殊文字を含むキー名にアクセスしたい場合
  • ループ処理で複数のプロパティを順番に扱いたい場合
const student = { name: "Rohan", age: 18 };
const key = "name";
console.log(student[key]); // "Rohan"

ドット表記とブラケット表記の比較

項目ドット表記ブラケット表記
基本的な書き方obj.propobj["prop"]
可読性高いやや低め
変数による動的アクセス不可可能
特殊文字を含むキー不可可能
コード補完効きやすい効きにくい

サンプルコード

以下は、ドット表記とブラケット表記の両方でオブジェクトのプロパティにアクセスする完全なサンプルです。「クリックしてください」ボタンを押すと、それぞれの実行結果が画面に表示されます。

例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ドット表記とブラケット表記のデモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのドット表記 vs ブラケット表記</h1>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、student1オブジェクトのプロパティにドット表記とブラケット表記でアクセスします</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function Student(name, age, standard) {
        this.name = name;
        this.age = age;
        this.standard = standard;
    }
    let student1 = new Student("Rohan", 18, 12);
    BtnEle.addEventListener("click", () => {
        let str = "name",
        str1 = "age",
        str2 = "standard";
        resEle.innerHTML = "ドット表記を使用 <br>student1.name = " + student1.name + "<br>";
        resEle.innerHTML += "student1.age = " + student1.age + "<br>";
        resEle.innerHTML += "student1.standard = " + student1.standard + "<br><br>";
        resEle.innerHTML += "ブラケット表記を使用 <br>student1[str] = " + student1[str] + "<br>";
        resEle.innerHTML += "student1[str1] = " + student1[str1] + "<br>";
        resEle.innerHTML += "student1[str2] = " + student1[str2] + "<br>";
    });
</script>
</body>
</html>

出力結果

ページを開いた直後の表示：

JavaScriptのドット表記とブラケット表記の違いを解説！正しい使い分けのポイント

「クリックしてください」ボタンをクリックすると：

JavaScriptのドット表記とブラケット表記の違いを解説！正しい使い分けのポイント

まとめ

通常のプロパティアクセスには可読性の高いドット表記を、プロパティ名が変数で与えられる場合や特殊文字を含むキーを扱う場合にはブラケット表記を使う、という使い分けがおすすめです。両者の特徴を理解して適切に選択することで、より保守性の高いJavaScriptコードを書くことができます。

  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptのドット記法（ドット表記）でオブジェクトのプロパティにアクセスする方法

    JavaScriptでは、ドット記法（ドット表記）を使うことで、オブジェクトのプロパティに簡単にアクセスできます。オブジェクト名の後に「.」（ドット）を付け、続けてプロパティ名を記述するだけで、その値を取得したり設定したりできます。 この記事では、ドット記法の基本的な使い方を、実際に動作するサンプルコードと実行結果とともにわかりやすく解説します。 ドット記法の基本構文 ドット記法は、次の形式で記述します。 オブジェクト名.プロパティ名 たとえば student.name と書けば、student オブジェクトの name プロパティの値を取得できます。 サンプルコード 次の例では、コンストラク