jQuery.extendをlodashに置き換える

const options = $.extend(true, {}  defaultOptions, userOptions);

これをlodashに置き換えたい。
deepCopyの方法だけなら検索するとすぐに出てくるが、deepCopyしつつデフォルト値を上書きしたい場合の例がぱっと見つけられなかったので自分用のメモとして残す。

置き換え

const options = _.defaultsDeep(_.cloneDeep(userOptions), _.cloneDeep(defaultOptions))

例

jQuery

const userOptions = {
  a: 1,
  b: {
    c: "aaa",
    d: [{
      e: 1000
    }]
  }
}

const defaultOptions = {
  a: 100,
  b: {
    d: [{
      e: -1000
    }, {
      f: -1000
    }]
  },
  g: function () {
    return 1;
  }
}

console.log($.extend(true, {}, defaultOptions, userOptions))

> {"a":1,"b":{"d":[{"e":1000},{"f":-1000}],"c":"aaa"}, "g": ƒ g()}

lodash

const options = _.defaultsDeep(_.cloneDeep(userOptions), _.cloneDeep(defaultOptions))

console.log(options)

> {"a":1,"b":{"c":"aaa","d":[{"e":1000},{"f":-1000}]}, "g": ƒ g()}

deepCopyしない場合

const options = _.defaultsDeep(userOptions, defaultOptions)
userOptions.b = 0
console.log("user", userOptions)
> {"a":1,"b":0, "g": ƒ g()}
console.log("extended", options)
> {"a":1,"b":0, "g": ƒ g()}

defaultsDeepでなくdefaultsを使った場合

const options = _.defaults(_.cloneDeep(userOptions), _.cloneDeep(defaultOptions))
console.log(options)
> {"a":1,"b":{"c":"aaa","d":[{"e":1000}]}, "g": ƒ g()}