Javascriptの基礎 Vol.6 Objectーオブジェクト
JavascriptのObject オブジェクトとは？
データタイプの章でデータタイプにオブジェクトがある、という説明をしましたが、データタイプで説明するオブジェクトと、ここで説明するオブジェクトは少し違います。
データタイプでオブジェクトを指す際には、オブジェクト指向プログラミングのことを指しています。その中の一つに、オブジェクト、というデータタイプがあります。オブジェクト指向については後に詳しく説明しますが、ここではオブジェクト、というデータの形式について説明します。
Javascriptに限らずですが、変数を設定する際、それが文字列なのか、数字なのか、配列なのか設定しますね。オブジェクトもその一つです。宣言する時に、データは入れないけど、タイプだけ指定することができます・
const myString = ""
//空の文字列
const myNumber = 0
//数字の０、実際にはnullに設定することが多いけど、nullは別に数字に限らない。
const myArray = []
//空の配列
const myObject = {}
//空のオブジェクトオブジェクトはキーとバリューのペアで作られる他とは違うデータタイプで、複雑なデータを作ることができます。特に配列とオブジェクトの違いはデータベースをいじり始めるととても大事になるのできちんと理解しておきましょう。
JavascriptのObject オブジェクトの書き方（シンタックス）
オブジェクトとは、キーとバリューのペアでデータを格納するタイプです。バリューには、関数を含めほぼ全てのデータタイプを入れられます。
//{key: value, key: value, key: value}
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login: function(){
console.log('You are logged in')
},
logout: function(){
console.log('You are logged out')
}
}サインアップしたユーザーのデータをやり取りするのに使うと想像すると、わかりやすいと思いますが、バラバラのデータを関連づけられる、と言った方が早いかもしれません。このように書くと呼び出す際にもロジカルに呼び出せて、複雑なプログラムを書く際に大変便利です。
JavascriptのObject オブジェクトの呼び出し方
console.log(user.name)
console.log(user['name'])
//ユーザーオブジェクトの名前'John'がログされる
//.を使って呼び出すことが多いが、[]を使うと変数が入れられるので、変数を入れる場合に使われる。
user.login()
// ユーザーオブジェクトのログイン関数を呼び出す。ログに'You are logged in'と表示されるJavascriptのObject オブジェクトの書き換え方
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login: function(){
console.log('You are logged in')
},
logout: function(){
console.log('You are logged out')
}
}
console.log(user.name)
//ログにJohnと表示される。
user.name = 'ダースベーダー'
console.log(user.name)
//今度はログにダースベーダーと表示される。
//データを加える
user.email = 'yoda@fakeemail.com'
//関数の場合もほぼ同じ
user.greet = function(){
console.log('Hello world!')
}
user.greet()
//ログにHello world!と表示されるJavascriptのObject オブジェクトとthisキーワード
オブジェクトで設定した値を、そのオブジェクト内で使おうと思うと、エラーがでます。
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login: function(){
console.log(`Logged in as ${name}`))
},
logout: function(){
console.log(`Logged out as ${name}`)
}
}
user.login()
//ログにerror neme is not defined name変数が設定されてないなぜこのようなことが起きるか、と言うと、Javascriptはこの設定の場合、オブジェクト外で宣言されたlet name = 'a name' のような変数を探してしまうからです。しかしオブジェクトの中なのでuser.nameと書いても認識しません。
これを解決するために、便利なthisキーワードがビルトインされており、thisを使うと、そのオブジェクト内でのコンテクストを指すことができます。なので、どこでthisが使われているかによって、異なる値をとってきます。
今回の場合は
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login: function(){
console.log(`Logged in as ${this.name}`))
},
logout: function(){
console.log(`Logged out as ${this.name}`)
}
}
user.login()
//ログにLogged in as Johnと表示される。
console.log(this)
//window オブジェクトのレファレンスが表示される。このthisをウェブページなんかでグローバルに使うとウィンドウオブジェクトを表示させます。
この関数ですが、thisを使う際、ES6の矢印のシンタックスが使えません。 thisを使うとどうなるか？window objectを指します。
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login: ()=>{
console.log(this)
},
logout: ()=>{
console.log(this)
}
}
user.login()
//window オブジェクトのレファレンスが表示される。
console.log(this)
//window オブジェクトのレファレンスが表示される。しかし、別にショートカットする方法があります。
let user = {
name: 'John',
//nameがキー（key）で'John'がバリュー（値/value）
age: 19,
friends: ['ルーク', 'レイア', 'チューバッカ'],
login(){
console.log(`Logged in as ${this.name}`))
},
logout(){
console.log(`Logged out as ${this.name}`)
}
}
user.login()
//ログにLogged in as Johnと表示される。
console.log(this)
//window オブジェクトのレファレンスが表示される。コロンを付けずに、キーにカッコを付けて、そのまま関数として扱います。
Vanilla Javascript ージャバスクリプトの基礎編 リンク