[JavaScript入門]オブジェクトの使い方!(プロパティ作成・追加・削除)

JavaScript

JavaScriptのオブジェクトの使い方について書いています。
最初にオブジェクトについて解説して、次にオブジェクトを作成した後のプロパティの削除・追加方法を書いています。
最後にサンプルコードを3つ書いてみました。

JavaScriptのオブジェクトとは?

JavaScriptのオブジェクトは、複数のデータや関数などをひとつにまとめることができるものです。
オブジェクトにプロパティと呼ばれるものを定義して、定義したプロパティ名で値を設定したり、参照することができます。
オブジェクトのプロパティには文字列・数値・論理値・配列・関数など様々な値を設定することが可能です。

例えば、下記がオブジェクトになります。

const user = {
  name: 'taro',
  age: 33,
}

userという名前の定数でオブジェクトを作成して、プロパティとして、名前(name)と年齢(age)の2つのプロパティを持っています。
それぞれの値を参照するには、作成した[オブジェクト.プロパティ名]でアクセスすることが可能です。

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」にアクセスすると「テレビゲーム」が返ってきます。

コメント

タイトルとURLをコピーしました