如何提供 Function 的 Default Object Parameter ?

實務上 Function 的 Argument 應盡量以 Object 傳遞，而非 Primitive，但若要對 Property 提供 Default Value，該怎樣實現才優雅呢 ?

Version

ECMAScript 5

ECMAScript 2015

ECMAScript 5

function func(options) {
  var firstName = '';
  var lastName = '';

  if (!options || !options.firstName)
    firstName = 'Sam';

  if (!options || !options.lastName) {
    lastName = 'Xiao';
  }

  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

options parameter 可能為 undefined ，也就是沒傳，或者傳入是 empty object。

因此要判斷 parameter 是否為 undefined ，還要判斷 property 是否為 undefined 。

由於 ES5 原本風格就是要你在 runtime 判斷並提供 default value，因此無法討避醜陋的寫法。

ECMAScript 2015

function func({firstName = 'Sam', lastName = 'Xiao'} = {}) {
  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

ECMAScript 2015 提供了 Object Destructing 之後，我們可以不用宣告 parameter object，直接在 parameter list 加以 destruct variable，並提供 default value。

這種寫法在 ECMAScript 2015 經常看到，但老實說並不是最優雅的寫法。

Parameter 使用 object 的用意為的就是讓 parameter list 能越精簡越好，但使用了 Object Destructing 且提供 default value 之後，就喪失使用 object 的優勢了。

function func(options = {}) {
  const {
    firstName = 'Sam',
    lastName = 'Xiao',
  } = options;

  return `${firstName} ${lastName}`;
}

console.log(func());
console.log(func({}));

比較優雅的寫法是 parameter list 僅提供 empty object，但 Object Destructing 則寫在 function 內，如此 parameter list 維持精簡，也保留了 parameter 使用 object 的初衷，且 destruct variable 寫在 function body 更一目瞭然。

Conclusion

• Object Destructing 是 ECMAScript 2015 很精彩的功能，但若要提供 default value，建議不要直接寫在 parameter list，而是分開寫