JavaScript | レベル別練習問題：オブジェクト

JavaScript
スポンサーリンク

「オブジェクト」 をテーマに、基礎 / 中級 / 上級（応用） 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題＋解答＋解説を作成しました。コードはそのままブラウザのコンソールで実行できます。

基礎レベル（5問）

問題1

オブジェクト person を作成し、name に "Taro"、age に 20 を入れて console.log(person); の出力は？

const person = { name: "Taro", age: 20 };
console.log(person);
JavaScript

解答と解説

  • 出力：{ 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: ブラケット記法
JavaScript

解答と解説

  • 出力（それぞれ）："A"、"A"
  • 解説：ドット記法はシンプル。ブラケット記法はキーが変数の場合や空白文字を含むキーの場合に使います。

問題3

const obj = {a:1}; obj.b = 2; はエラーになりますか？console.log(obj); の出力は？

const obj = { a: 1 };
obj.b = 2;
console.log(obj);
JavaScript

解答と解説

  • 結果：エラーにならない。出力：{ a:1, b:2 }
  • 解説：const は変数の再代入を禁止しますが、オブジェクト自体の「内容の変更（プロパティ追加・更新）」は可能です。

問題4

次のコードで console.log(user.age); の出力は？（age プロパティが存在しない場合）

const user = { name: "B" };
console.log(user.age);
JavaScript

解答と解説

  • 出力：undefined
  • 解説：存在しないプロパティにアクセスすると undefined が返ります。

問題5

オブジェクトを組み立てるとき、変数名をプロパティ名と同じにしたい場合の短縮記法を書け（例：name, age の変数からオブジェクトを作る）。

const name = "C";
const age = 30;
const info = { name, age };
console.log(info);
JavaScript

解答と解説

  • 出力：{ 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);
JavaScript

解答と解説

  • 出力：{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]);
}
JavaScript

解答と解説

  • 出力（順序は環境によるが通常）：
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);
JavaScript

解答と解説

  • 出力："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 は？
JavaScript

解答と解説

  • 結果：Hi, undefined（非厳密モードや実行環境によるが、this がグローバル/undefined になる）
  • 修正例（bind を使う）：
const boundSay = person.say.bind(person);
boundSay(); // Hi, E
JavaScript
  • 解説：メソッドを単独の関数参照として呼ぶと 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); // オブジェクト
JavaScript

解答と解説

  • 出力：'{"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);
JavaScript

解答と解説

  • 出力："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 のまま => 独立
JavaScript

解答と解説

  • 解説：浅いコピーは最上位プロパティだけコピーし、ネストオブジェクトは参照を共有する。JSON を使う深いコピーはシンプルだが、関数や Date、undefined、循環参照を扱えない制約がある。

問題3

動的な（計算された）プロパティ名を使ってオブジェクトを作る例を示せ（変数 k = "score" を使って { score: 100 } を作る）。

const k = "score";
const player = { [k]: 100 };
console.log(player.score);
JavaScript

解答と解説

  • 出力：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
JavaScript

解答と解説

  • 解説：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);
JavaScript

解答と解説

  • 出力：{ x:1, y:2, z:3 }
  • 解説：スプレッドや Object.assign({}, a, b) でマージできます。後に指定したオブジェクトのプロパティが優先され上書きされます。深いマージ（ネストのマージ）が必要な場合は専用ライブラリや再帰処理が必要です。
次へ
123456
スポンサーリンク
タイトルとURLをコピーしました