JavaScript【 object 】 ～ オブジェクト

オブジェクトは、JavaScript でとても重要な要素です。
今回は、JavaScript のオブジェクトについて紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. Object オブジェクト

　
JavaScript のオブジェクトは、名前をキーにアクセスすることができて、連想配列やハッシュと呼ばれることもあります。

オブジェクト内の個々のデータは、プロパティといいます。
プロパティには、文字列や数値、関数なども格納することができます。

そして、関数が格納されたプロパティのことを メソッドといいます。
　

ここでいうオブジェクトとは、「 Object オブジェクト 」のことです。

Object オブジェクトは、全てのオブジェクトの基本オブジェクトです。
組み込みオブジェクトやユーザ定義オブジェクトの他、オブジェクトと名前が付くものは、Object オブジェクトで定義されたプロパティやメソッドを共通して利用できます。

▲目次へ戻る

　

2. オブジェクトの生成

　
Object オブジェクトは、その生成のための記述方法が幾つかあります。

new 演算子やグローバル関数を使用して生成する場合は、次のように記述します。

let obj = new Object();

let obj = Object();

let obj = Object.create(Object.prototype);

let obj = Object.create({ });

　

オブジェクトリテラル記法（オブジェクト初期化子、または Object Initializer）を使用して生成する場合は、次のように記述します。
プロパティと値の 0 以上のペアを中括弧{ }で囲みます。

let obj = { };

let obj = {プロパティ名: 値, プロパティ名: 値, ... };

プロパティには、どのようなデータ型でも格納することができます。

関数を格納するとメソッドと呼ばれるので、オブジェクトは プロパティとメソッドから構成されているといえます。

▲目次へ戻る

　

3. プロパティの定義

　
オブジェクトのプロパティは、次のように記述して定義します。

// ドット表記法
let str = object.プロパティ名;
object.プロパティ名 = str;


// ブラケット表記法
let str = object[プロパティ名];
object[プロパティ名] = str;

　

プロパティに値を代入することで、プロパティを定義することができます。

let obj = { };
obj.id = 001;
obj.["name"] = "aoyama";

上記の変数 obj を出力すると、「 {id: 001, name: “aoyama”} 」と出力されます。
　

ドット表記法の場合、プロパティ名は JavaScript 識別子とみなされるため、以下のJavaScript の命名規則に従ってプロパティ名を付ける必要があります。

　
ブラケット表記法の場合、プロパティ名は文字列として指定するため、有効な識別子である必要はなく、自由にプロパティ名を付けることができます。

// ×
obj.123

// ○
obj.$123

// ○
obj._123

// ○
obj["123"]

// ○
obj["!?"]

// ○（ 空白文字でもOK ）
obj[" "]

　

メソッド（ 関数が格納されたプロパティ ）の呼び出しには、通常ドット表記法を使います。

let obj = {alertErr: function(){alert("Error!")}};

obj.alertErr();

ですが、Object が 全てのオブジェクトの基本オブジェクトということを考えると、ブラケット表記法も使えることがわかります。
メソッドも、プロパティであることに変わりはないからです。

let obj = {alertErr: function(){alert("Error!")}};

//alertErr 関数が実行される
obj["alertErr"]();

//alertErr 関数を表す
obj["alertErr"];

▲目次へ戻る

　

4. オブジェクト型の判定

　
インスタンスのオブジェクト型を判定する方法には、constructor プロパティを使用する方法と instanceof 演算子を使用する方法があります。

let obj = { };

//判定：true
obj.constructor == Object

//判定：true
obj instanceof Object
　

let ary = [ ];

//判定：true
ary.constructor == Array

//判定：true
ary instanceof Array

constructor プロパティは、帰り値として インスタンスの生成に使用されたコンストラクタ（ Function オブジェクト ）を返します。
オブジェクト名を返してるわけではないので、「 ary.constructor == “Array” 」のように 文字列として判定しないように注意します。

また、他のコンストラクタのプロトタイプは constructor プロパティを上書きしているため、プロパティを削除すると Object のコンストラクタが返されることがわかります。

delete Array.prototype.constructor

//判定：false
ary.constructor == Array

// function Object() { [native code] }
ary.constructor

▲目次へ戻る

　

5. プロパティの存否を判定

　
オブジェクトが 指定されたプロパティを持っているかどうかを判定するには、in 演算子か hasOwnProperty メソッドを使用します。

この2つには、オブジェクトのプロトタイプチェーンをたどってチェックするかどうかの違いがあります。
hasOwnProperty メソッドは、オブジェクトの直接のプロパティのみをチェックします。
in 演算子は、プロトタイプチェーンを通じて継承されたプロパティまでチェックします。

let obj = {a: "apple", b: 200, c: "Aomori"};

//判定：true
"a" in obj;

//判定：true
"toString" in obj

//判定：true
obj.hasOwnProperty("a");

//判定：false
obj.hasOwnProperty("toString");

　
undefined が設定されているプロパティについても プロパティが存在する限り true が返りますが、delete 演算子で削除されると false が返ります。

let obj = {a: "apple", b: 200, c: undefined};

//判定：true
obj.c == undefined;

//判定：true
'c' in obj;

//判定：true
obj.hasOwnProperty("c");

//delete演算子で削除
delete obj.c;

//判定：true
obj.c == undefined;

//判定：false
"c" in obj;

//判定：false
obj.hasOwnProperty("c");

▲目次へ戻る

　

6. プロパティの削除

　
オブジェクトのプロパティは、delete 演算子で削除できます。

let obj = {a: "apple", b: 200, c: "Aomori"};

delete obj.b;

//出力内容：Object {a: "apple", c: "Aomori"}
console.log(obj);

プロパティに undefined や null を代入しても 削除されません。

obj.a = undefined;

obj.c = null;

//出力内容：Object {a: undefined, c: null}
console.log(obj);

キーワード let を使わずに宣言した変数は、全てグローバル変数 すなわちグローバルオブジェクトのプロパティなので、delete 演算子で削除することができます。
キーワード let を使用したローカル変数は、プロパティではないので 削除できません。

gStr = "Hello!";

//判定：true
delete gStr;
　

let lStr = "こんにちは！";

//判定：false
delete lStr;

▲目次へ戻る