「オブジェクト」 をテーマに、基礎 / 中級 / 上級（応用） 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題＋解答＋解説を作成しました。コードはそのままブラウザのコンソールで実行できます。
基礎レベル（5問）
問題1
オブジェクト person を作成し、name に "Taro"、age に 20 を入れて console.log(person); の出力は？
const person = { name: "Taro", age: 20 };
console.log(person);
解答と解説
- 出力：
{ name: "Taro", age: 20 } - 解説：波括弧
{}でキーと値のペアを並べてオブジェクトを作成します。順序は実装依存ですが、見た目はこのようになります。
問題2
オブジェクト user = {name: "A", score: 10} から name を取り出して表示する方法を 2 通り示してください。
const user = { name: "A", score: 10 };
console.log(user.name); // 1: ドット記法
console.log(user["name"]); // 2: ブラケット記法
解答と解説
- 出力（それぞれ）：
"A"、"A" - 解説：ドット記法はシンプル。ブラケット記法はキーが変数の場合や空白文字を含むキーの場合に使います。
問題3
const obj = {a:1}; obj.b = 2; はエラーになりますか？console.log(obj); の出力は？
const obj = { a: 1 };
obj.b = 2;
console.log(obj);
解答と解説
- 結果：エラーにならない。出力：
{ a:1, b:2 } - 解説：
constは変数の再代入を禁止しますが、オブジェクト自体の「内容の変更（プロパティ追加・更新）」は可能です。
問題4
次のコードで console.log(user.age); の出力は？（age プロパティが存在しない場合）
const user = { name: "B" };
console.log(user.age);
解答と解説
- 出力：
undefined - 解説：存在しないプロパティにアクセスすると
undefinedが返ります。
問題5
オブジェクトを組み立てるとき、変数名をプロパティ名と同じにしたい場合の短縮記法を書け（例：name, age の変数からオブジェクトを作る）。
const name = "C";
const age = 30;
const info = { name, age };
console.log(info);
解答と解説
- 出力：
{ name: "C", age: 30 } - 解説：
{ name: name, age: age }と書く代わりにプロパティ名だけを書く短縮構文が使えます。
中級レベル（5問）
問題1
オブジェクトをコピーして別名 copy を作る方法（浅いコピー）を 2 通り示してください（obj = {a:1,b:2}）。
const obj = { a: 1, b: 2 };
// 方法1:
const copy1 = Object.assign({}, obj);
// 方法2:
const copy2 = { ...obj };
console.log(copy1, copy2);
解答と解説
- 出力：
{a:1,b:2}（それぞれ） - 解説：
Object.assign({}, obj)とスプレッド構文は浅いコピーを作ります（入れ子オブジェクトは参照のまま）。
問題2
次のコードの出力は？（for…in を使ったプロパティ列挙）
const o = { x: 10, y: 20 };
for (let k in o) {
console.log(k, o[k]);
}
解答と解説
- 出力（順序は環境によるが通常）：
x 10
y 20
- 解説：
for...inはオブジェクトの列挙可能なプロパティ名を順に返します。値はo[k]でアクセスします。
問題3
次の object destructuring（分割代入）のコードで、name と age の値を取り出す方法を書け。
const person = { name: "D", age: 40, city: "Tokyo" };
const { name, age } = person;
console.log(name, age);
解答と解説
- 出力：
"D" 40 - 解説：分割代入でオブジェクトから必要なプロパティだけを取り出せます。別名にする場合は
const { name: n } = person;のように書く。
問題4
次のコードで greet を呼んだ時に this.name が期待通りに参照されるように、person.say を say という変数に代入して呼び出すとどうなるか、そして修正方法を示せ。
const person = {
name: "E",
say() { console.log("Hi,", this.name); }
};
const say = person.say;
say(); // 問題: ここで this は？
解答と解説
- 結果：
Hi, undefined（非厳密モードや実行環境によるが、thisがグローバル/undefined になる） - 修正例（bind を使う）：
const boundSay = person.say.bind(person);
boundSay(); // Hi, E
- 解説：メソッドを単独の関数参照として呼ぶと
thisが切れます。bindでthisを固定するか、person.say()のように直接呼びます。
問題5
オブジェクトを JSON 文字列にしてから戻す（JSON.stringify と JSON.parse）コードの例と用途を説明せよ（{a:1,b:2} を例に）。
const o = { a: 1, b: 2 };
const s = JSON.stringify(o);
const parsed = JSON.parse(s);
console.log(s); // 文字列
console.log(parsed); // オブジェクト
解答と解説
- 出力：
'{"a":1,"b":2}'と{a:1,b:2} - 解説：
JSON.stringifyはオブジェクトを送信・保存可能な文字列に変換、JSON.parseは文字列を再度オブジェクトに戻します。関数やundefined、循環参照は扱えない点に注意。
上級／応用レベル（5問）
問題1
ゲッター（getter）とセッター（setter）を使って、fullName を読み書きできるオブジェクトを作りなさい（first と last を内部に持つ）。
const person = {
first: "F",
last: "G",
get fullName() { return this.first + " " + this.last; },
set fullName(str) {
const [f, l] = str.split(" ");
this.first = f;
this.last = l;
}
};
console.log(person.fullName); // 読み出し
person.fullName = "H I"; // 書き込み
console.log(person.first, person.last);
解答と解説
- 出力：
"F G"、"H" "I" - 解説：
getとsetでプロパティアクセス風に関数を定義できます。計算済みプロパティや入力検証に便利です。
問題2
入れ子（ネスト）オブジェクトの浅いコピーと深いコピーの違いを示し、深いコピーの一例（JSON を使う）を示せ（obj = {a:1, b: {c:2}}）。
const obj = { a: 1, b: { c: 2 } };
// 浅いコピー
const shallow = { ...obj };
shallow.b.c = 99;
console.log(obj.b.c); // 99 になる => 参照が共有
// 深いコピー（簡易）
const deep = JSON.parse(JSON.stringify(obj));
deep.b.c = 100;
console.log(obj.b.c); // 99 のまま => 独立
解答と解説
- 解説：浅いコピーは最上位プロパティだけコピーし、ネストオブジェクトは参照を共有する。
JSONを使う深いコピーはシンプルだが、関数やDate、undefined、循環参照を扱えない制約がある。
問題3
動的な（計算された）プロパティ名を使ってオブジェクトを作る例を示せ（変数 k = "score" を使って { score: 100 } を作る）。
const k = "score";
const player = { [k]: 100 };
console.log(player.score);
解答と解説
- 出力：
100 - 解説：角括弧
[...]を使うと式の評価結果をプロパティ名にできます。動的キー（計算結果や変数）を使いたい時に便利。
問題4
クラス（またはコンストラクタ関数）を使って複数のオブジェクトを同じ振る舞いで生成する例を示し、インスタンスメソッドとプロトタイプの違いを説明せよ（Person クラスで greet() を実装）。
class Person {
constructor(name) { this.name = name; }
greet() { console.log("Hi, " + this.name); }
}
const p1 = new Person("J");
const p2 = new Person("K");
p1.greet(); // Hi, J
p2.greet(); // Hi, K
解答と解説
- 解説：
greetはプロトタイプ上に配置され、全インスタンスで共有されるためメモリ効率が良い。コンストラクタ内でthis.someMethod = ...とすると各インスタンスに固有の関数が作られます（通常は避ける）。
問題5
複数のオブジェクトをマージして優先順位を持たせる（後のオブジェクトで上書き）方法を示せ。例：a = {x:1,y:1}, b = {y:2,z:3} をマージして {x:1,y:2,z:3} にする。
const a = { x: 1, y: 1 };
const b = { y: 2, z: 3 };
const merged = { ...a, ...b };
console.log(merged);
解答と解説
- 出力：
{ x:1, y:2, z:3 } - 解説：スプレッドや
Object.assign({}, a, b)でマージできます。後に指定したオブジェクトのプロパティが優先され上書きされます。深いマージ（ネストのマージ）が必要な場合は専用ライブラリや再帰処理が必要です。
