LoginSignup
3
3

More than 5 years have passed since last update.

存在するフィールドだけが入ったオブジェクトを作る

Last updated at Posted at 2018-09-18

あるオブジェクトがあるとします。
必須項目は必ずフィールドを作成し、そしてオプション項目は入ってきた時にだけフィールドが作られるようなオブジェクトを作りたいとしましょう。

普通に書く

function getObject({require1, require2, optional1, optional2, optional3 }){

    const ret = {value1:require1, value2:require2 };
    if(optional1){
        ret.optionalValue1 = optional1;
    }
    if(optional2){
        ret.optionalValue2 = optional2;
    }
    if(optional3){
        ret.optionalValue3 = optional3;
    }
    return ret;
}

getObject({require1:1, require2:2, optional1:11 }); // {value1: 1, value2: 2, optionalValue1: 11}
getObject({require1:1, require2:2, optional2:22, optional3:33 }); // {value1: 1, value2: 2, optionalValue2: 22, optionalValue3: 33}
getObject({require1:1, optional1:11 }); // {value1: 1, value2: undefined, optionalValue1: 11}

requireフィールドは渡さないとundefinedができますが、optionalフィールドを渡さない場合はフィールドそのものが作られません。

しかし、ただ値を取り出したいだけなのに中にif文を延々並べないといけないので面倒ですね。
もっと簡単な書き方はないでしょうか。

スプレッド演算子で書く

スプレッド演算子を使うとこう書けます。

function getObject({require1, require2, optional1, optional2, optional3 }){
    return {
        value1:require1,
        value2:require2,
        ...(optional1 && { optionalValue1:optional1 }),
        ...(optional2 && { optionalValue2:optional2 }),
        ...(optional3 && { optionalValue3:optional3 })
    }
}

ロジックがなくなってすっきりしましたね。
めでたしめでたし。

え?どんな需要があるのかって?
よくわからないけど自力でJSON Feedを作ったりするときに使えるかもしれません。

ちなみにアイデアの元ネタはHow to conditionally build an object in ES6という記事なのですが、そこで紹介されてるふたつのepisodeParser関数ってなにげに動作が同じじゃないんですよね。
1000以上も拍手されてるのに誰も突っ込んでないのだが大丈夫か。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3