JS初心者道場_ オブジェクトについて①

JavaScriptのオブジェクトを案件で使用することはあるのですが「つまりどういう物だ」ということを答えろと言われると困ってしまうし、使ってはいるけれどどのような場面で利用するのが適切なのかが曖昧なので、しっかり利用できるように細部まで調べてみます。

オブジェクトを理解するとできるようになる(らしい)こと

• グローバルオブジェクトの意味が理解できるようになる
• メソッドを利用しているということがわかる

まず、オブジェクトとは

オブジェクトとは
「関連のあるデータと機能の集合です」
オブジェクトを使うことによって、データをまとめて扱えるようになります。

宣言方法は以下の通り、中括弧{}を使用します。

// 宣言方法
{}

// 型の確認
typeof {} // "object"

// Objectは変数に格納できる
const obj = {} // 例1
const person = {} // 例２

プロパティとメソッド

「関連のあるデータと機能の集合です」の機能とは大抵は変数と関数のことです。
オブジェクトのなかでは、変数のことをプロパティ、関数のことをメソッドと呼んでいます。

■プロパティ

オブジェクトが持つ変数(名前付きのデータ)のことを「プロパティ」と呼びます。
プロパティを設定するには、複数の宣言方法があります。

個人的には①を初期値として宣言するときに使ったりしていましたが、
③のやり方でデータをひとまとめにして引数にするみたいな使い方もできそうです。
②は、変数の数が初期で予想できない時に使えるのかな、と予想しかできません。

宣言方法①

const obj = {
  name: "taro",
  gender: "male",
  age: 20
}

宣言方法②

const obj = {}

obj.name = "taro";
obj.gender = "male";
obj.age = 20;

宣言方法③

const name = "taro";
const gender = "male";
const age = 20;

const obj = { name, gender, age }

メソッド

オブジェクトのプロパティには関数をセットすることもできます。
オブジェクトが持つ関数のことをメソッドと呼びます。

メソッドの宣言

const obj = {
  hello: function() {
    console.log('hello world')
  }
}

// 関数の実行
obj.hello(); // hello world

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

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

アクセス方法

const obj = {
  name: "taro",
  gender: "male",
  age: 20
}

console.log(obj.name); // taro
console.log(obj.gender); // male
console.log(obj.age); // 20