ITコラム

stationery for school  set

JavaScript

2017.12.11

JavaScript【 object 】 ~ オブジェクト

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

目次

 
1.Object オブジェクト
2.オブジェクトの生成
3.プロパティの定義
4.オブジェクト型の判定
5.プロパティの存否を判定
6.プロパティの削除

1.Object オブジェクト

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

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

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

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

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

▲目次へ戻る

 

2.オブジェクトの生成

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

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

var obj = new Object();

var obj = Object();

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

var obj = Object.create({ });

 

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

var obj = { };

var obj = {プロパティ名: 値, プロパティ名: 値, … };

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

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

▲目次へ戻る

 

3.プロパティの定義

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

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

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

 

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

var obj = { };
obj.id = 001;
obj.[“name”] = “aoyama”;

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

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

JavaScript の命名規則

●英数字( アンダースコア( _ )及び ドル記号( $ )も含む )の連続文字を使用する
●先頭文字に数字は使えない

 

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

// ×
obj.123

// ○
obj.$123

// ○
obj._123

// ○
obj[“123”]

// ○
obj[“!?”]

// ○( 空白文字でもOK )
obj[” “]

 

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

var obj = {alertErr: function(){alert(“Error!”)}};

obj.alertErr();

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

var obj = {alertErr: function(){alert(“Error!”)}};

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

//alertErr 関数を表す
obj[“alertErr”];

▲目次へ戻る

 

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

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

var obj = { };

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

//判定:true
obj instanceof Object
 

var 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 演算子は、プロトタイプチェーンを通じて継承されたプロパティまでチェックします。

var 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 が返ります。

var 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 演算子で削除できます。

var 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);

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

gStr = “Hello!”;

//判定:true
delete gStr;
 

var lStr = “こんにちは!”;

//判定:false
delete lStr;

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.