【JavaScript】オブジェクト① 〜オブジェクトの作成・プロパティへのアクセス〜

概要

...【JavaScript】オブジェクト②もあります。

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• オブジェクトとは
• オブジェクトの作成方法
• オブジェクトが持つプロパティへのアクセス方法

オブジェクト

• オブジェクトとは、プロパティの集合のこと。
• 1つのオブジェクトで複数のプロパティを持つことができる。
• JavaScriptには、あらゆるオブジェクトのもとになるObjectというビルドインオブジェクトがある。

プロパティとは
名前(キー)と値(バリュー)が対になったもの。

ビルドインオブジェクトとは
JavaScriptの実行環境にあらかじめ組み込まれている、基本的な機能を提供するためのオブジェクトのこと。

// オブジェクトの例
const obj = {
   // この場合"name"が「キー」で"Taro"が「バリュー」 <- これをプロパティと呼ぶ
   "name" : "Taro"
};

オブジェクトを作成する

• 作成にはオブジェクトリテラル { }と呼ばれるものを使用する。
• オブジェクトリテラルでは、初期値としてプロパティを持つことができる。

const obj = {
  // プロパティ
}

オブジェクトのプロパティ

• プロパティは、オブジェクトリテラル { }の中に名前と値をキー : バリューの形式で記述する。
• プロパティの名前(キー)には文字列またはSymbolが利用可能。
• プロパティの値(バリュー)には任意のデータを指定可能。

Symabol(シンボル)とは
ES2015(ES6)から新たに導入されたSymbol( )関数で作成できる特殊な値。
(プリミティブデータ型の１つ)

// objという名前のオブジェクトを作成
const obj = {
  // "キー" : "バリュー"でプロパティを指定
  "name" : "Taro", // プロパティを複数指定する場合は、「,」カンマで区切る
  "age" : 24
}

console.log(obj); // => {name: 'Taro', age: 24}

【Tips】 オブジェクトのプロパティについて

• オブジェクトリテラル内のプロパティ名(キー)はクォート(' or ")を省略可能
• ただし、JavaScriptの(変数名や関数名などの)命名規則に反するプロパティ名はクォートが必要。
• プロパティの値(バリュー)に変数名を指定すれば、対象の変数の値を参照可能。
• ES2015からは、プロパティ名と値に指定する変数名が同じ場合は{ lang }のように省略可能。

// 変数city,langを定義し値を設定
const city = "tokyo";
const lang = "japanese";

const obj = {
    "name": "Taro",
    age: 24,                       // => これはOK
    e_mail: "[e-mail]",     // => これもOK
    // e-mail: "[e-mail]",  // => これはNG 命名規則に反しているためエラーになる
    "e-mail": "[e-mail]",   // => なのでクォートで囲う必要あり
    city: city,                    // => 変数を指定可能 
    lang                           // => キーと変数名が同じなので省略可能
}

console.log(obj);
// => {name: 'Taro', age: 24, e_mail: '[e-mail]', e-mail: '[e-mail]', city: 'tokyo', lang: 'japanese'}

【Tips】 オブジェクトリテラルとnew Object()

• オブジェクトリテラル({ })は、Object(ビルトインオブジェクト)のオブジェクトである。
• また、Objectを元に新しいオブジェクトを作成するための構文という捉え方ができる。
• 別途、new演算子を使用し、Objectから新しいオブジェクトを作成する方法もある。
• オブジェクトリテラル({ })の簡潔さと比較すると、new Object()を使う利点はあまりない様子。

// new演算子を使用してオブジェクトを作成してみる
const obj = new Object();

console.log(obj);  // => {}(空のオブジェクトが作成された)

プロパティへのアクセス

オブジェクトのプロパティへのアクセス方法としては以下のような方法がある。

• ドット(.)記法を用いる方法
• ブラケット([ ])記法を用いる方法

ドット( . )記法を用いる方法

• ドット記法を用いる場合、前提としてプロパティ名は変数定義と同様の命名規則に沿ったものでなければ指定できない。

const obj = {
    name: "Taro",
    age: 24,
    e_mail: "[e-mail]",
    "sub-mail": "[e-mail]",
}

// オブジェクト「obj」のnameをドット記法で指定
console.log(obj.name);
// => Taro

// オブジェクト「obj」のsub-mailをドット記法で指定
console.log(obj.sub-mail);
// => 命名規則に反しているためエラーになる(次項のブラケット記法では可能)

ブラケット([ ])記法を用いる方法

• ブラケット記法を用いた場合、プロパティ名は暗黙的に文字列へと変換される。
• プロパティ名に変数を使用できる。
• プロパティ名を指定する場合は、クォートで囲う必要がある。

const obj = {
    name: "Taro",
    age: 24,
    e_mail: "[e-mail]",
    "sub-mail": "[e-mail]",
}

// 変数「myName」定義し、文字列「name」を代入
const myName = "name";

// オブジェクト「obj」のプロパティをブラケット記法で変数myNameを指定
console.log(obj[myName]); // => obj["name"]と指定したのと同じ
// => Taro

// オブジェクト「obj」のsub-mailをブラケット記法で指定
console.log(obj["sub-mail"]);
// => [e-mail]

【Tips】 オブジェクトのプロパティを変数に代入、管理

• アクセスする際 オブジェクト.プロパティ名 と何度も書くのは冗長なため、変数に代入することで再利用することができる。

const obj = {
    "name": "Taro",
    "age": 24,
    "e_mail": "[e-mail]",
    "sub_mail": "[e-mail]",
    "sub-mail": "[e-mail]",
}

// 変数「name」を定義し、オブジェクト「obj」のプロパティ「name」を代入
const name = obj.name;

// 「obj.name」が代入されている変数「name」を指定
console.log(name);
// => Taro

分割代入

• オブジェクトリテラルのような構文を用いて変数名を定義し、オブジェクトからプロパティを代入することも可能。
• なお、定義する変数名は、オブジェクトのプロパティ名と紐づける必要がある。
• この方法は分割代入と呼ばれ、ES2015から対応している。

const obj = {
    name: "Taro",
    age: 24,
    e_mail: "[e-mail]",
    sub_mail: "[e-mail]",
    // "sub-mail": "[e-mail]", // sub-mailは命名規則に反しているため分割代入の変数定義時にエラーとなる
}

// オブジェクト「obj」からプロパティを取り出す
// 試しに順番を一部変更し、正しく紐づいているか確認
const { name, e_mail, age, sub_mail } = obj; 

// 分割代入した変数「name」を指定
console.log(name);
// => Taro

// 分割代入した変数「e_mail」を指定
console.log(e_mail);
// => [e-mail]
// => 変数定義時に順番を一部変更したが、オブジェクトのプロパティが正しく紐づいている