預設參數(Default parameters)

2018-08-20

函式的傳入參數預設值，在未指定實際的傳入值時，一定是 undefined，ES6 的函式預設參數允許沒有值傳入或是傳入值為 undefined 的情況下，參數能以指定的預設值初始化，指定不同的預設值可能在某些情況很管用。

在以前還沒有預設參數的時候，程式會以||防呆，以免參數為 undefined。

function foo(x, y){
  x = x || 15
  y = y || 3
  console.log(x + y)
}

foo()              //18
foo(3, 4)          //7
foo(22)            //25
foo(null, 9)       //24
foo(undefined, 9)  //24

這樣做的好處是，假設一開始的 x 與 y 參數沒有傳入值，利用||可將預設值 15 與 3 帶入，而不致於變成 undefined。但這樣做會有一個陷阱，假設我們傳給參數的值是 falsy 的，你的程式有可能會跟你想得不一樣。

function foo(x, y){
  x = x || 15
  y = y || 3
  console.log(x + y)
}
foo(0, 8)  //23

假設你希望的結果是 0 + 8，那你的程式就出包了，因為 0 在||旁被視為 falsy，所以你的 x 被自動帶入 15，變成 15 + 3。為了消除這種陷阱，有些人會用嚴格相等式測試帶入的參數是不是 undefined：

function foo(x, y){
  x = (x !== undefined) ? x : 15
  y = (y !== undefined) ? y : 3
  console.log(x + y)
}
foo(0, 8)  //8

但現在我們可以直接在參數就把預設值帶入，這樣使得我們的防呆機制變得更簡潔。

function foo(x = 15, y = 3){
  console.log(x + y)
}

foo()             //18
foo(3, 4)         //7
foo(22)           //25
foo(null, 9)      //9
foo(undefined, 9) //24

參數預設值的規則是如果函數呼叫時本來就有值，這裡的值不限於原始資料值，也可用表達式、陣列、物件、函式與 this，甚至連 null 與空字串都包括在內，參數預設值就會自動忽略。

反之，如果該引入的參數沒有值或是 undefined，參數就會以預設值帶入。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello')           // Hello World
log('Hello', 'George') // Hello George
log('Hello', '')       // Hello

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);

1
2
3

const link = function (point = 10, url = 'http://google.com') {
    //...
}

參數預設值不能用let或const再次宣告。

function foo(x = 5) {
  let x = 1    // error
  const x = 2  // error
}

使用參數預設值時，函數不能有同名參數。

// 不會報錯
function foo(x, x, y) {
  // ...
}

// 報錯，因為用了參數預設值
function foo(x, x, y = 1) {
  // ...
}

預設參數值的位置

預設參數值並沒有限定位置，但在 airbnb 的規範裡表明，有預設值的參數，應該要放在沒有預設值的參數後面，這樣會讓有預設值的參數一目瞭然，比較不容易出錯。

// 壞寫法
function handleThings(opts = {}, name) {
  // ...
}

// 好寫法
function handleThings(name, opts = {}) {
  // ...
}

與箭頭函式的搭配

箭頭函式也可帶入參數預設值，需要注意的是，假設你的箭頭函式只有一個參數時，加上參數預設值，必須加上圓括號。

1	const add = (x = 1) => x + 2

參考連結:
React 16 - The Complete Guide
React - DOM界的彼方(繁中)
MDN - 預設參數
 ECMAScript 6 入门
 你所不知道的JS：ES6與未來發展

uncategorized

預設參數值的位置

與箭頭函式的搭配