オブジェクトの基本の備忘録（Javascript）

オブジェクトとは・・・

オブジェクトとは・・・

オブジェクトとは、グループ化された値を扱う概念。

非プログラマーの自分がオブジェクトを学ぶにあたり、理解し難いところがあったので、備忘録として簡単にまとめておきます。

オブジェクトの作成と各パーツの説明

var member = {
  name: 'yuruikoke',
  sex: 'man',
  email: 'hoge@yuruikoke.com',
  age: 43
}

var member ・・・「member」という変数にオブジェクトを格納。

name: ‘yuruikoke’ ・・・ プロパティ「key + value」のセット

name、sex、email、age ・・・ key（名前）

‘yuruikoke’、’man’、’hoge@yuruikoke.com’、43 ・・・ value（値）

valueの参照方法

console.log(member.name);

または

console.log(member['name']);

前者・後者ともにコンソールに ‘yuruikoke’ と表示されます。

プロパティの書き換え

プロパティを以下のように書き換えることができます。

例：性別（sex）をwomanにする場合・・・

var member = {
  name: 'yuruikoke',
  sex: 'man',
  email: 'hoge@yuruikoke.com',
  age: 43
}
member.sex = 'woman';
console.log(member.sex);

コンソールに ‘woman’ と表示されます。

プロパティの追加

プロパティを以下のように追加することができます。

例：country（国）でJapan（日本）を追加する場合・・・

var member = {
  name: 'yuruikoke',
  sex: 'man',
  email: 'hoge@yuruikoke.com',
  age: 43
}
member.contry = 'Japan';
console.log(member.contry);

コンソールに ‘Japan’ と表示されます。

メソッド

下記は、greeting（挨拶）というkeyに関数をvalueとして、指定しています。

var member = {
  name: 'yuruikoke',
  sex: 'man',
  email: 'hoge@yuruikoke.com',
  age: 43,
  greeting: function(){
    console.log('Hello good-bye')
  }
}
member.greeting();

コンソールに ‘Hello good-bye’ と表示されます。

関数を設定したプロパティ（※「greeting: ～ console.log(‘Hello good-bye’)」部分）をメソッド（方法）と呼びます。メソッドとは、「処理・操作」とういうようなイメージですね。

「memberというオブジェクトは、greetingというメソッドを持っている」ということですね。

メソッド一覧の表示方法

下記は、オブジェクトのもつ様々なメソッドの表示するための記述です。（ブラウザーのグローバル・オブジェクトである「window」が持っているメソッド一覧の表示です。）

繰り返しの for(○○ in ●●){}を使っています。

「もし、function（関数）がwindow[item]（windowのメソッド）の時、item（メソッド）をコンソールに表示する・・・」

※function ＝関数、item ＝メソッド、typeof値＝「値のデータ型を表す文字列を返す演算子」

という感じですね・・・。（私はド文系なので、このように文章にしないと構文の意味がわからない・・・汗）

for(var item in window) {
    if( typeof window[item] === 'function') {
 
        console.log( item );
 
    }
}

コンソールには、「alert、atob、blur、btoa、cancelAnimationFrame、cancelIdleCallback、captureEvents、clearInterval、clearTimeout、close、confirm、createImageBitmap、fetch、find、focus、getComputedStyle、getSelection、matchMedia、moveBy、moveTo、open、postMessage、print、prompt、queueMicrotask、releaseEvents、requestAnimationFrame、requestIdleCallback、resizeBy、resizeTo、scroll、scrollBy、scrollTo、setInterval、setTimeout、stop、webkitCancelAnimationFrame、webkitRequestAnimationFrame、showDirectoryPicker、showOpenFilePicker、showSaveFilePicker、openDatabase、webkitRequestFileSystem、webkitResolveLocalFileSystemURL、addEventListener、dispatchEvent、removeEventListener」が表示されていますね。

有名どころの「alert、confirm、addEventListener・・・」等が当然ですがありますね・・・。