「回傳」與「印出」的差異

• return 是 function 回傳的值
• 「要印出東西」絕對要使用 console.log()

「回傳」跟「印出」是完全不同的概念

如果是執行 add(8, 9)，就會印出 8 9

function add(a, b){
  console.log(a, b)
}

add(8, 9)
// output: 8 9

如果是 console.log(add(8, 9))，就會印出 8 9 和 undefined

原因是：
在 function 裡面，如果沒有寫 return 的話，預設就會是 return undefined

console.log(add(8, 9)) 這句的執行順序是：

1. 先執行 add(8, 9) 這個函式：

• 函式裡面的第一行：console.log(a, b) 就會印出 8 9
• 函式裡面的第二行：return undefined，就會是 add 函式的回傳值

1. 再執行 console.log(add(8, 9)) ，就會印出 add 函式的回傳值（也就是 undefined）

function add(a, b){
  console.log(a, b)
  // 預設會是 return undefined
}

console.log(add(8, 9))

output:

8 9
undefined

如果沒有使用console.log()，在 console 就不會印出任何東西

function add(a, b){
  return a + b
}

add(8, 9)

最好的寫法是：在 function 裡面 return，然後用 console.log() 印出 return 的值

function add(a, b){
  return a + b
}

console.log(add(8, 9))
// output: 17

不好的寫法

這樣，我就沒辦法得到 function 的回傳值了（會回傳 undefined）

function add(a, b){
  console.log(a + b)
}

console.log(add(8, 9))

output:

17
undefined

chrome devtool 的 Console

當我在使用 chrome devtool 的 Console 時，會是另一種不同的運作機制

我每執行一個指令，Console 就會自動幫我把「這個指令本身會產生的回傳值」給 log 出來

例如：

範例一

我執行完 var a = 1 之後，var a = 1 這個指令本身會產生的回傳值是 undefined，Console 就會把 undefined 給 log 出來

因為 a + 3 這個語句的回傳值是 4，所以就會印出 4

如果是 console.log(a + 3)，會印出：

• 4 （前面沒有灰色箭頭）是「我 console.log(a + 3) 出來的值」
• undefined （前面有灰色箭頭）是 console.log(a + 3) 這個語句本身的回傳值

範例二

執行完 add 函式這個指令之後，這個指令本身的回傳值就是 undefined，所以會印出 undefined

執行 add(5, 7) 之後，會印出：

• 5 7 （前面沒有灰色箭頭）是「我 console.log(a, b) 印出來的東西」
• 12 （前面有灰色箭頭）是「add 函式的回傳值」，也就是 return a + b 的值