条件分岐でオブジェクトを動的に拡張：JavaScriptでメンバーを柔軟に追加

2024-04-02

JavaScriptでオブジェクトに条件付きでメンバーを追加する方法

三項演算子を使う方法は、最も簡潔な方法の一つです。以下のコードを見てみましょう。

const obj = {
  foo: "foo",
  bar: "bar",
};

const someCondition = true;

obj.baz = someCondition ? "baz" : undefined;

console.log(obj); // { foo: "foo", bar: "bar", baz: "baz" }

このコードでは、someCondition が true の場合、obj オブジェクトに baz というメンバーが "baz" という値で追加されます。someCondition が false の場合、baz メンバーは追加されません。

Object.assign を使う方法は、複数のオブジェクトをマージするのに便利な方法です。以下のコードを見てみましょう。

const obj = {
  foo: "foo",
  bar: "bar",
};

const someCondition = true;

const additionalMember = {
  baz: "baz",
};

obj = Object.assign({}, obj, someCondition ? additionalMember : {});

console.log(obj); // { foo: "foo", bar: "bar", baz: "baz" }

スプレッド構文を使う方法は、ES6で導入された新しい方法です。以下のコードを見てみましょう。

const obj = {
  foo: "foo",
  bar: "bar",
};

const someCondition = true;

const additionalMember = {
  baz: "baz",
};

obj = {
  ...obj,
  ...(someCondition && additionalMember),
};

console.log(obj); // { foo: "foo", bar: "bar", baz: "baz" }

// 三項演算子を使う
const obj1 = {
  foo: "foo",
  bar: "bar",
};

const someCondition1 = true;

obj1.baz = someCondition1 ? "baz" : undefined;

console.log(obj1); // { foo: "foo", bar: "bar", baz: "baz" }

// Object.assignを使う
const obj2 = {
  foo: "foo",
  bar: "bar",
};

const someCondition2 = true;

const additionalMember1 = {
  baz: "baz",
};

obj2 = Object.assign({}, obj2, someCondition2 ? additionalMember1 : {});

console.log(obj2); // { foo: "foo", bar: "bar", baz: "baz" }

// スプレッド構文を使う
const obj3 = {
  foo: "foo",
  bar: "bar",
};

const someCondition3 = true;

const additionalMember2 = {
  baz: "baz",
};

obj3 = {
  ...obj3,
  ...(someCondition3 && additionalMember2),
};

console.log(obj3); // { foo: "foo", bar: "bar", baz: "baz" }

このコードを実行すると、以下の出力が得られます。

{ foo: 'foo', bar: 'bar', baz: 'baz' }
{ foo: 'foo', bar: 'bar', baz: 'baz' }
{ foo: 'foo', bar: 'bar', baz: 'baz' }

これらのコードは、オブジェクトに条件付きでメンバーを追加する方法を理解するのに役立ちます。

関数を使う方法は、より複雑な条件を設定したい場合に便利な方法です。以下のコードを見てみましょう。

const obj = {
  foo: "foo",
  bar: "bar",
};

function addMember(obj, condition, member) {
  if (condition) {
    obj[member] = true;
  }
}

addMember(obj, someCondition, "baz");

console.log(obj); // { foo: "foo", bar: "bar", baz: true }

このコードでは、addMember という関数を作成し、オブジェクト、条件、メンバーを受け取ります。条件が true の場合、メンバーがオブジェクトに追加されます。

クラスを使う方法は、よりオブジェクト指向的な方法でオブジェクトにメンバーを追加したい場合に便利な方法です。以下のコードを見てみましょう。

class MyObject {
  constructor(foo, bar) {
    this.foo = foo;
    this.bar = bar;
  }

  addMember(condition, member) {
    if (condition) {
      this[member] = true;
    }
  }
}

const obj = new MyObject("foo", "bar");

obj.addMember(someCondition, "baz");

console.log(obj); // MyObject { foo: "foo", bar: "bar", baz: true }