JavaScriptのオブジェクトについて具体的な使い方を総まとめ

JavaScript
2021/12/21

ここでは、JavaScriptにおけるオブジェクト、オブジェクトリテラル、Object()コンストラクタ関数、アクセスオブジェクトを学びます。

目次

JavaScriptのオブジェクトとは

オブジェクトは、JavaScriptの非プリミティブな構造化データ型です。オブジェクトはJavaScriptの変数と同じですが、唯一の違いは、オブジェクトはプロパティとメソッドに関して複数の値を保持することです。

JavaScriptでは、オブジェクトは2つの方法で作成することができます。

  • オブジェクトリテラルorInitializer構文使用する
  • newキーワードを指定してObject() コンストラクタ関数を使用する

上記のいずれの方法で作成されたオブジェクトも、同じものです。

以下のコード例は、両方の方法でオブジェクトを作成する例です。

let sample1 = { name:"Tanaka" }; // オブジェクトリテラル構文

let sample2 = new Object();      // Object()のコンストラクタ関数
sample2.name = "Tanaka";         // プロパティ

上記で、sample1, sample2はオブジェクト名です。オブジェクトは変数と同じようにvarやletキーワードで宣言することができます。

sample1 オブジェクトは、オブジェクトリテラル構文（オブジェクトを作成するための短い形式）を使って作成され、name という名前のプロパティを持っています。

sample2 オブジェクトは、newキーワードを使用して Object() コンストラクタ関数を呼び出して作成します。sample2.name = “Tanaka”; は、sample2 オブジェクトのnameプロパティに文字列値”Tanaka” を割り当てています。

オブジェクト・リテラル構文を使用したオブジェクトの作成

オブジェクト・リテラルは、オブジェクトを作成するための短い形式です。

オブジェクトは{ }括弧の中にkeyとvalueのペアをカンマで区切って定義します。keyはプロパティの名前になり、valueはリテラル値か関数になります。

let オブジェクト名 = { key1: value1, key2: value2,...};

以下は、オブジェクトリテラルの構文を使用して作成されたオブジェクトのコード例です。

// プロパティもメソッドも持たない空のオブジェクト
let emptyObject = {};

//  1つのプロパティを持つオブジェクト
let person = { firstName: "Tanaka" };

// プロパティに1つの関数を持つオブジェクト
let message = { 
   alertMessage: function (val) { 
      alert(val); 
   } 
}; 

// プロパティとメソッドを持つオブジェクト
let person = { 
  firstName: "Koji", 
  lastName: "Tanaka", 
  age: 20, 
  getFullName: function () { 
    return this.lastName + ' ' + this.firstName
  }
};

JavaScriptのオブジェクトはkeyとvalueのペア全体を宣言する必要があることに注意してください。

以下のように、キーだけを宣言して値を持たないものは無効となります。

let person = { firstName };    // ×
let person = { getFullName: }; // ×

Objects() コンストラクタを用いたオブジェクトの作成

オブジェクトを作成するもう一つの方法は、new キーワードを使用した Object() コンストラクタ関数を使用することです。

プロパティやメソッドの宣言する際は、ドット記法の .プロパティ名 や角括弧の [“プロパティ名”] を使用することができます。

let person = new Object();

// プロパティとメソッドをpersonオブジェクトに追加する   
person.firstName = "Koji";
person["lastName"] = "Tanaka"; 
person.age = 20;
person.getFullName = function () {
  return this.lastName + ' ' + this.firstName;
};

オブジェクトは、以下のように変数をプロパティとして持つことも、計算されたプロパティを持つことも可能です。

let firstName = "Koji";
let lastName = "Tanaka";

let person = { firstName, lastName }

JavaScriptオブジェクトのプロパティとメソッドを取得する方法

オブジェクトのプロパティは、ドット表記のオブジェクト.プロパティ名 または角括弧でオブジェクト[“プロパティ名”] を使って取得することができます。

メソッドの呼び出しは以下のように、ドット記法に括弧をつけたオブジェクト.メソッド名()の書き方で行うことができます。

var person = { 
  firstName: "Koji", 
  lastName: "Tanaka", 
  age: 20, 
  getFullName: function () { 
    return this.lastName + ' ' + this.firstName 
  } 
};

person.firstName;     // Koji
person.lastName;      // Tanaka

person["firstName"];  // Koji
person["lastName"];   // Tanaka

person.getFullName(); // getFullName関数の呼び出し

上記の例では、person.firstNameは、personオブジェクトのfirstNameプロパティにアクセスしています。また、person[“firstName”]は、プロパティにアクセスするもう1つの方法です。

オブジェクトのメソッドは、person.getFullName() のように括弧()を付けて呼び出すことができます。またJavaScriptエンジンは、括弧を付けずにメソッドにアクセスした場合、その関数定義を返します。

オブジェクトの未宣言のプロパティにアクセスすると、未定義が返されます。

もし、あるオブジェクトが特定のプロパティを持っているかどうかわからない場合は、以下のように、アクセスする前にhasOwnProperty()メソッドを使用します。

let person = new Object();
    
person.firstName; // undefined

if(person.hasOwnProperty("firstName")){
  person.firstName;
}

プロパティとメソッドは、それらが宣言されたオブジェクトにのみ利用可能になります。

let sample1 = new Object();
sample1.firstName = "Koji";
sample1.lastName = "Tanaka"; 

let sample2 = new Object();
sample2.firstName; // undefined
sample2.lastName;  // undefined


sample3 = sample1;              // オブジェクトをコピー
sample3.firstName;              // Koji
sample3.lastName;               // Tanaka
sample3.firstName = "Takashi";  // 新しい値でプロパティを上書き
sample3.lastName = "Suzuki";    // 新しい値でプロパティを上書き

オブジェクトのプロパティを列挙する

オブジェクトを列挙するには、以下のようにfor inループを使用します。

let person = new Object();
person.firstName = "Koji";
person.lastName = "Tanaka";

for(let property in person){
  alert(property);         // プロパティ名を取得できる（firstNameやlastNameなど）
  alert(person[property]); // プロパティの値を取得できる（KojiやTanakaなど）
};

参照による受け渡し

JavaScriptのオブジェクトは、ある関数から別の関数へ参照渡しされます。

そのため、あるオブジェクトが関数に引数として渡され、その関数内の処理でプロパティが書き換えられた場合、元のオブジェクトのプロパティの値も変わります。

function changeFirstName(p) {
    p.firstName = "Takashi";
}

let person = { firstName : "Koji" };

changeFirstName(person)    

person.firstName; // returns Takashi

ネストされた（入れ子）オブジェクト

オブジェクトは、他のオブジェクトのプロパティになることができます。これはネストされた（入れ子状態の）オブジェクトと呼ばれる。

let person = {
    firstName: "Koji",
    lastName: "Tanaka",
    age: 20,
    address: {
        id: 1,
        country:"Japan"
    }
};

person.address.country; // returns "Japan"
タイトルとURLをコピーしました