オブジェクトのきほん
このレッスンで分かること
{}にキーと値を並べると、ばらばらの情報をひとつの箱にまとめられます- 無いキーを読んでもエラーにならず
undefinedが返ります
配列を 3 本並べると、対応が静かに壊れる
第5章の配列は、同じ種類の値を順番に並べる道具でした。ところが実際のデータは、1 件につき複数の情報を持っています。スキルなら名前とレベル、作品なら題名と年です。配列だけで表そうとすると、こうなります。
JavaScript
const skillNames = ["HTML", "CSS", "JavaScript"];
const skillRanks = [3, 2, 1];skillNames[1] と skillRanks[1] が同じスキルを指しているという保証は、どこにもありません。片方だけ並べ替えた瞬間に対応は壊れますが、プログラムはエラーを出しません。ただ間違った答えを返し続けます。
JavaScript
const skill = { name: "CSS", level: 2, learning: true };これがオブジェクトです。ひとつのスキルに関する情報が、ひとつの {} に収まりました。{} の中はキーと値のペアをカンマ区切りで並べます。キーが名前、値が中身です。もう並び順を気にする必要はありません。
名前で読み、名前で書く
値を取り出す書き方は 2 通りあります。
JavaScript
const profile = { name: "山田 太郎", role: "Web エンジニアを目指しています" };
console.log(profile.name); // 山田 太郎
console.log(profile["role"]); // Web エンジニアを目指していますふだんは短いドット記法を使い、キー名が変数に入っているときだけブラケット記法にします。
| 場面 | ドット記法 | ブラケット記法 |
|---|---|---|
| ふつうのキー | profile.name | profile["name"] |
| キー名が変数 | 書けない | profile[key] |
| 記号を含むキー | 書けない | profile["updated-at"] |
書き込みも同じ形です。無いキーに代入すれば追加、あるキーに代入すれば上書きになります。空の {} から始めて、キーを 1 つずつ足していく書き方もよく使います。
JavaScript
const owner = {};
owner.name = "山田 太郎";
owner.role = "Web エンジニアを目指しています";
console.log(owner); // { name: "山田 太郎", role: "Web エンジニアを目指しています" }無いキーを読んでも止まらない
オブジェクトの性格をひとことで言うと「聞かれたものが無ければ undefined と答える」です。
JavaScript
console.log(profile.age); // undefined エラーにはならない
console.log(skill.category === undefined); // true なら「無い」と分かる親切な仕様である反面、つづりを間違えても黙って undefined が返るという弱点でもあります。そして関数の引数も、渡されなければ undefined になります。値が無い状態はどちらも undefined として現れる、という一点を押さえておくと、既定値を入れるかどうかの判定がそのまま書けます。
よくある間違い
- キー名のつづり違いに気付かない —
profile.nmaeと書いてもエラーは出ず、undefinedが返るだけです。undefinedが出たら、まずつづりを疑ってください - 変数の中身でキーを引きたいのにドット記法を使う —
profile.keyはkeyという名前のキーを探しに行きます。変数に入った名前で読むならprofile[key]です
要件
- 関数名は
createWork、引数はtitleとyearの 2 つ - 戻り値は
titleyearpublishedの 3 つのキーを持つオブジェクト yearが渡されずundefinedのときは0を入れることpublishedは常に真偽値のfalseにすること
入出力例
createWork("プロフィールサイト", 2026) → {"published":false,"title":"プロフィールサイト","year":2026}
createWork("自己紹介カード", 2026) → {"published":false,"title":"自己紹介カード","year":2026}
createWork("スキル一覧の表") → {"published":false,"title":"スキル一覧の表","year":0}
createWork("", 2026) → {"published":false,"title":"","year":2026}ヒント
編集 ゆめさく編集部