JavaScriptのオブジェクトについてまとめてみた

オブジェクトとは

オブジェクトとは「関連のあるデータと機能の集合」と定義されます。

簡単に言うならば、
オブジェクトを使うと「データをまとめて扱える」というだけの話です。
オブジェクトの宣言方法は下記です。

{}

オブジェクトは変数に格納できます

// 例1
var obj = {}
// 例2
var person = {}

中身が同じオブジェクトでも、比較すると false になリます。

var obj1 = {}
var obj2 = {}

if(obj1 === obj2){
  console.log("同じ？")
}else{
  console.log("同じではない")
}

このようにコンソールで記載すると、同じではないと出力されます。

プロパティ

「プロパティ」とはオブジェクトが持つデータのことです。
オブジェクトには「プロパティ」をセットできます。

プロパティのセット方法 1

宣言時に指定する方法

var obj = { name: "yamada taro", age: 33 }

obj // {name: "yamada taro", age: 33}

プロパティのセット方法 2

. (ドット) を使用してプロパティに値をセットする

var obj = {}
obj.name = "yamada taro"
obj.age = 33

obj // {name: "yamada taro", age: 33}

プロパティのセット方法 3

ハッシュ（連想配列）を使用してプロパティに値をセットする

var obj = {}
obj['name'] = "佐藤健"
obj['age'] = 3１
obj['profile'] = 'He is an actor.'

obj // { name: "佐藤健", age: 31, profile: 'He is an actor.' }

プロパティのセット方法 4

ES2015からの機能。プロパティ名と値に指定する変数名が同じ場合、省略して書ける。

var name = "yamada taro"
var age = 33
// var obj = { name: name, age: age } 
var obj = { name, age }

obj // {name: "yamada taro", age: 33}

プロパティとは、オブジェクトが持つ「名前付きのデータ」のことです。要するに、オブジェクトに含まれる「変数」のことを「プロパティ」と名前を付けていると考えます。
変数とは異なる概念です。

JavaScript のオブジェクトは、自身に関連付けられたプロパティを持ちます。オブジェクトのプロパティは、オブジェクトに関連付けられている変数と捉えることができます。オブジェクトのプロパティは、オブジェクトに属するものという点を除けば、基本的に通常の JavaScript 変数と同じようなものです。

オブジェクトのプロパティを取り出す

オブジェクトのプロパティを取り出す時は、. (ドット) を使います。

プロパティの中身をプログラム内で使用することを「取り出す」「アクセスする」「参照する」などと表現しますが意味はだいたい同じです。

// obj が持つ name という プロパティ を取り出す(アクセスする、参照する)
obj.name

var name = obj.name // 変数に格納
obj.name = "アイウエオ" // 書き換える


var obj = { 
  name: "山田太郎", 
  age: 33, 
}

console.log(obj.name) // 山田太郎
console.log(obj.age) // 33

連想配列のkeyを指定して取り出すこともできます

var obj = { 
  name: "佐藤健", 
  age: 31
}

console.log(obj['name']) // 佐藤健
console.log(obj['age']) // 31

プロパティの中身にアクセスするには、どのオブジェクトが持つプロパティかを指定する必要があります。

var obj = { name: "山田太郎" }
console.log(name) // undefined
console.log(obj.name) // 山田太郎


var obj1 = { name: "山田太郎" }
var obj2 = { name: "織田信長" }
console.log(obj1.name) // 山田太郎
console.log(obj2.name) // 織田信長

オブジェクトを宣言する際のルール

1. 宣言

中括弧 (or 波括弧、or カーリーブラケット)

{} // 中括弧を使う

2. プロパティが一つの場合の書き方

key と value は : (コロン) で繋ぎます.

// データの名前: 実際のデータ 
// key: value 形式と表現することもあります
{ name: "山田太郎" }

3. プロパティが複数ある場合

カンマで区切ります.

// 複数ある場合はカンマで区切ります
// key: value, key: value, ...
{ name: "山田太郎", age: 33 }

// 改行してもOK その場合もカンマで区切る
{
  name: "山田太郎",
  age: 33
}

オブジェクトのプロパティには関数もセットできる

オブジェクトには関数もセットできます。そして関数もオブジェクトです。
オブジェクトのプロパティに関数(正確には関数オブジェクト)をセットできると考える事ができます。

// obj が sayHello という プロパティ を持つ
var obj = { 
  sayHello: ...
}

// sayHello という key に対応する value が functionオブジェクト
var obj = { 
  sayHello: function() {
    console.log("こんにちは")
  }
}

// 関数を「参照」する
obj.sayHello
// 関数を実行する
obj.sayHello()

プロパティ内の関数から同じオブジェクトのプロパティにアクセスするにはthisを使う

// name と sayHello プロパティ を持つオブジェクト
var obj = { 
  name: "山田太郎",
  sayHello: function() {
    console.log("こんにちは、" + this.name + "と申します")
  }
}

obj.sayHello() // こんにちは、山田太郎と申します

consoleオブジェクトについて

console.log("HELLO")

console は オブジェクト そして log はconsoleオブジェクトが持つプロパティについてです。

グローバルオブジェクト

thisはオブジェクト。そして、グローバルオブジェクトです。

変数をvarで宣言した時、グローバルオブジェクトに登録される(グローバフオブジェクトのプロパティになる)
consoleもグローバルオブジェクトのプロパティ

なのでthisを使って参照できます。

これでも可能。

これも可能。

全て同じ動きをします。

// 全部同じ意味

console.log("hello")
this.console.log("hello")
window.console.log("hello")
this.window.console.log("hello")

しかし下記のように書くと、

var obj = {
  test_a: function() {
    // thisなし
    console.log("hello")
  },
  test_b: function() {
    // thisあり
    this.console.log("hello")
  }
}

test_a() は問題なし、test_b() はエラーになります。thisが何を指すか変わるからです。
エラーメッセージに Cannot read property と出力されています。

これならOK

// Chrome: Consoleタブで実行してみよう

var obj = {
  test_a: function() {
    // tihsなし
    console.log("hello")
  },
  test_b: function() {
    // this ではなく window を使う
    window.console.log("hello")
  }
}

thisは、どこで呼び出されるかによってどのオブジェクトを指すかが変わる

まとめ

• いつも使っている console は オブジェクト だった
• console.log は console オブジェクトが持つ log という名前のプロパティ(メソッド)
• console.log(``"``hello``"``) 以外にも console.clear() などがある
• console 自体も window というグローバルオブジェクトのプロパティなので window.console.log(``"``hello``"``) と呼び出せる
• グローバルオブジェクトのプロパティにthisを使ってアクセスする際は、スコープ を意識する必要がある