オブジェクトの基本 — 作る・読む・書き換える

オブジェクトは、値に名前を付けてまとめる入れ物です。 配列が順番で管理するのに対して、オブジェクトは名前で管理します。

const user = { name: 'あ', age: 20 };

console.log(user);
console.log(typeof user);

const user = { name: 'あ', age: 20 };

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

名前: 値 の組を , で区切って並べます。この組ひとつをプロパティと呼び、 名前の側を鍵、値の側を値と呼びます。

読む

書き方は2つあります。

const user = { name: 'あ' };

console.log(user.nothing);

const key = 'age';

const user = { name: 'あ', [key]: 20, 'full name': 'あ い' };

console.log(user[key]);
console.log(user['full name']);
console.log(Object.keys(user));

• user.name … ふだんはこちら。 短くて読みやすい
• user['name'] … 鍵を文字列で渡す。変数や、記号を含む名前のときに使う

無い鍵を読んでも落ちない

const user = { name: 'あ' };

user.age = 20;
user.name = 'い';

console.log(user);

delete user.age;

console.log(user);

const user = { name: 'あ', nothing: undefined };

console.log(user.nothing === undefined);
console.log('nothing' in user);

エラーになりません。 undefined が返るだけです。

配列で範囲の外を読んだときと同じで、間違いに気づきにくい性質です。 → 配列の基本

鍵は文字列

const user = { name: 'あ' };

console.log('name' in user);
console.log('age' in user);
console.log(Object.hasOwn(user, 'name'));

const user = { name: 'あ' };

console.log('toString' in user);
console.log(Object.hasOwn(user, 'toString'));

• [key] … 変数の中身を鍵にする（計算プロパティ）
• 'full name' … 空白や記号を含む鍵は引用符で囲む。読むときは角括弧

user.key と書くと、変数の中身ではなく key という名前を探します。 ここは取り違えやすいところです。

書き換える・足す・消す

const name = 'あ';
const age = 20;

const user = { name, age };

console.log(user);

const user = {
  name: 'あ',
  greet() {
    return this.name;
  },
};

console.log(user.greet());

無い鍵に代入すると、そのまま足されます。 宣言のようなものは要りません。

const で宣言していても、中身は変えられます。 const が固定するのは名前と値の結びつきで、中身ではありません。 → TypeError: Assignment to constant variable.

あるかどうかを調べる

undefined かどうかで判断すると、取り違えることがあります。

const key = 'age';
const user = { name: 'あ', age: 20 };

console.log(user.key);

const key = 'age';
const user = { name: 'あ', age: 20 };

console.log(user[key]);

「鍵が無い」と「鍵はあるが値が undefined」を区別できていません。 区別したいなら in か Object.hasOwn() を使います。

const a = { n: 1 };
const b = a;

b.n = 2;

console.log(a.n);
console.log(a === b);

const a = { n: 1 };
const c = { ...a };

c.n = 3;

console.log(a.n, c.n, a === c);

in と Object.hasOwn() の違い

in は受け継いだものまで見ます。toString は自分で書いていないのに true です。

自分で持っている鍵だけを見たいなら Object.hasOwn() を使ってください。 利用者の入力を鍵にするときは、この差が事故になります。

Object.hasOwn() は Node 16.9 / Chrome 93 以降。それより前は Object.prototype.hasOwnProperty.call(user, 'name') と書きます。

短く書く

変数名と鍵名が同じなら、片方を省けます。

関数も入れられます。オブジェクトの中の関数をメソッドと呼びます。

this は「呼ばれ方」で決まります。取り出して呼ぶと外れるので注意してください。 → なぜ this は呼び方で変わるのか

よくある間違い

変数を鍵にするつもりでドットを書く

user.key は「key という名前の鍵」を探します。変数の中身は見ません。 落ちないので、undefined が出るまで気づけません。

変数の中身で引きたいなら角括弧です。

代入しても複製されない

ここがいちばん大事な性質です。

b に入ったのは同じオブジェクトを指す矢印で、中身の複製ではありません。 b を触ると a も変わります。

複製したいなら、はっきりそう書きます。

ただしこれも1段だけです。 入れ子の中身は共有されたままになります。 → オブジェクトを結合する

まとめ

• オブジェクトは名前で値をまとめる。配列は順番
• 読み方は user.name と user['name']。変数を鍵にするなら角括弧
• 無い鍵を読んでも落ちない。undefined が返る
• 「無い」と「undefined」は別。区別するなら Object.hasOwn()
• in は受け継いだ鍵まで見る。 Object.hasOwn() は自分の分だけ
• 代入は複製ではない。同じものを指す

次に学ぶ

実際のデータは入れ子になっています。 data.user.address.city のように深く辿るときに落ちない書き方と、 必要な値だけ取り出す方法を学びます。

→ 第2回: 入れ子のオブジェクトを安全に扱う