JavaScriptのオブジェクトの使い方について書いています。
最初にオブジェクトについて解説して、次にオブジェクトを作成した後のプロパティの削除・追加方法を書いています。
最後にサンプルコードを3つ書いてみました。
JavaScriptのオブジェクトとは？
JavaScriptのオブジェクトは、複数のデータや関数などをひとつにまとめることができるものです。
オブジェクトにプロパティと呼ばれるものを定義して、定義したプロパティ名で値を設定したり、参照することができます。
オブジェクトのプロパティには文字列・数値・論理値・配列・関数など様々な値を設定することが可能です。
例えば、下記がオブジェクトになります。
const user = {
name: 'taro',
age: 33,
}
userという名前の定数でオブジェクトを作成して、プロパティとして、名前(name)と年齢(age)の２つのプロパティを持っています。
それぞれの値を参照するには、作成した[オブジェクト.プロパティ名]でアクセスすることが可能です。
userオブジェクトのそれぞれのプロパティにアクセスするには、下記のような形になります。
console.log(user.name) // taroが出力される
console.log(user.age) // 33が出力される
オブジェクトに値を設定するには、下記のようにプロパティに直接、代入式で値を格納します。
user.name = 'hanako'
user.age = '35'
console.log(user.name) // hanakoが出力される
console.log(user.age) // 35が出力される
このように代入して出力すると、userオブジェクトのプロパティが、それぞれ上書きされたことが確認できます。
オブジェクトのプロパティに配列形式でアクセスする
「.」ドットを使用せずに、配列の形式でアクセスすることもできます。
先ほどのuserオブジェクトの場合だと、下記のような形になります。
console.log(user["name"]) // hanakoが出力される
console.log(user["age"]) // 35が出力される
上書き更新する場合も、この形で値を変えることが可能です。
user["name"] = 'jiro'
user["age"] = 22
console.log(user["name"]) // jiroが出力される
console.log(user["age"]) // 22が出力される
オブジェクトのプロパティを削除する
オブジェクトのプロパティを削除したい場合には、delete演算子を使用すると良いです。
先ほどのuserオブジェクトの年齢(age)プロパティを削除する場合は、下記のようになります。
delete user.age
console.log(user) // {name: 'jiro'} が出力される
削除した後にuserオブジェクトを確認すると、nameプロパティのみが残っています。
オブジェクトのプロパティを追加する
オブジェクトのプロパティを追加したい場合は、オブジェクトに新しいプロパティを作って代入します。
const user = {
name: 'taro',
age: 33,
}
console.log(user) // {name: 'taro', age: 33}が出力される
user.email = 'test@example.com'
console.log(user) // {name: 'taro', age: 33, email: 'test@example.com'}が出力される
最初にuserオブジェクトをname・ageプロパティのみで定義しました。
その後に、userオブジェクトにemailプロパティを作って、値を代入しました。
console.logで値を確認すると、emailプロパティが追加されていることが確認できました。
JavaScriptのオブジェクトを使用したサンプルコード
サンプルとして、いろいろなオブジェクトを書いてみました。
空のオブジェクト
空のオブジェクトを作ります。
const emptyObject1 = {}
console.log(emptyObject1) // {}が出力される
const emptyObject1 = new Object()
console.log(emptyObject2) // {}が出力される
上記のemptyObject1・emptyObject1は、プロパティがない空のオブジェクトです。
プロパティがないまま、「{}」を渡すと空のオブジェクトになります。
また、new Objectを使用することでオブジェクトを作成することが可能です。
関数を含んだオブジェクト
関数をオブジェクトに含むこともできます。
const user = {
name: 'taro',
age: 33,
showProfile: function() {
console.log(`${this.name}さんは、${this.age}です。`)
}
}
user.showProfile() // 「taroさんは、33です。」が出力される
名前(name)と年齢(age)プロパティを持ったuserオブジェクトです。
showProfileというプロフィールを表示するプロパティも一緒に持たせてみました。
このプロパティは関数です。
呼び出すと、自身の名前と年齢を使用して、プロフィール紹介文を出力してくれます。
オブジェクトを作成した後にuser.showProfile()と関数を呼び出すことで、関数が実行され「taroさんは、33です。」と出力されます。
オブジェクトの中のオブジェクト
オブジェクトの中にオブジェクトを含むこともできます。
const user = {
name: 'taro',
age: 33,
likes: {
food: '寿司',
hobby: 'テレビゲーム'
}
}
console.log(user.likes.food)
console.log(user.likes.hobby)
userオブジェクトを作成して、likesプロパティにユーザーが好きなものを並べたオブジェクトを設定しました。
このようにオブジェクトの中にオブジェクトを作成した場合には、ドット「.」で繋ぐことで、さらに下の階層にもアクセスができます。
実際に「user.likes.food」にアクセスすると「寿司」が返ってきます。
「user.likes.hobby」にアクセスすると「テレビゲーム」が返ってきます。
コメント