JavaScriptのオブジェクトとは？使い方を解説

JavaScriptのオブジェクトについて解説します。

オブジェクトの使用頻度は高いので、基礎から学びましょう。

オブジェクトとは？

JavaScriptのオブジェクトとは、簡単に言うと「色んな変数を管理する箱」です。

ただイメージが湧きづらいと思うので、下の図を見てください。

オブジェクトは、複数の変数を扱うことが可能です。

オブジェクトで変数を管理するメリットはたくさんありますが、私が思う一番のメリットは、変数同士に関係性を持たせることができることだと思います。

また、変数以外にもメソッドをオブジェクトの中に格納することも可能です。

以下の記事で紹介していますので、気になる方はどうぞ！

JavaScriptのオブジェクトにメソッドを定義

JavaScriptのオブジェクトに関数を定義する方法を解説します。オブジェクトは変数をまとめて管理するものですが、オブジェクトの中に関数を登録することも可能です。

fsd-geek.blog

2024.10.15

オブジェクトの初期化

オブジェクトを扱うためには、初期化をする必要があります。

初期化とは、「最初にデータを格納する」くらいの認識で問題ありません。

let オブジェクトの変数名 = {
    キー1: バリュー1,
    キー2: バリュー2,
}

実際に書くと、こんな感じです。

let obj = {
    name: '工場長',
    age: 27,
}

値の取得方法

オブジェクトの中の変数に入っている値の取り出し方は2種類あります。

それでは順番に見ていきましょう。

ドット記法

ドット記法とは、オブジェクト名の後に「.変数名」を付ける書き方のことです。

console.log(obj.name) // 工場長
console.log(obj.age) // 27

ちなみに、「obj」のみを指定すると、以下のような結果になります。

console.log(obj)
// { name: '工場長', age: 27 }

オブジェクトの中にオブジェクトを作ることも可能です。

値の取得方法もドットを繋げるだけです。

let obj = {
    name: {first: 'スーパー', last: '工場長'},
    age: 27,
}

console.log(obj.name.first) // スーパー

オブジェクトの変更や追加も以下のように容易にできます。

obj.name.first = '天才'
console.log(obj.name.first + obj.name.last)

// 天才工場長

obj.footSize = {right: 25, left: 22}
console.log(`左足のサイズ：${obj.footSize.left} 右足のサイズ：${obj.footSize.right}`)

// 左足のサイズ：22 右足のサイズ：25

ブラケット記法

ブラケット記法で、オブジェクトの値を取り出すにはオブジェクトの後ろに[]をつけて、その中に文字列でキーを書きます。

つまり、キーが一致していれば対応する値が取得出来るという訳です。

オブジェクト名['キー']

let obj = {
    toy: 'ball' 
}

console.log(obj['toy']) // ball

簡単ですね！

でもこれだとブラケット記法よりもドット記法の楽に書けますし、

スペルミスをする可能性もありますよね！

しかし、ブラケット記法の真価は次にあります。

let numbers = {
    number1: 10,
    number2: 20,
}

const base = 'number'
console.log(numbers[base + 1]) // 10

ブラケット記法は変数を使うことが可能です。

ちなみに、ES6からはオブジェクトを初期化する際のキーにも変数を使うことができます。

const base = 'number'
const baseValue = 10
let numbers = {
    [base + 1]: baseValue + 10,
    [base + 2]: baseValue + 20,
}

console.log(numbers[base + 1]) // 20
console.log(numbers[base + 2]) // 30

ブラケット記法は変数を使用できるため、汎用性が高くなりますが、オブジェクトのキーが見つからずundefinedになる危険性もありますので、使用する際には注意が必要です。

まとめ

JavaScriptのオブジェクトは変数に関連性を持たせるために、複数の変数を管理することができます。

値の取得方法（アクセス）は「ドット記法」と「ブラケット記法」があります。

ドット記法はオブジェクト名の後にドットを繋げてキーを指定します。

ブラケット記法は、オブジェクト名の後に[]を繋げてその中に文字列でキーを指定します。

使い分けは、変数を使わない場合はドット記法で、変数を使いたい場合はブラケット記法にします。