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


Posted by saffran on 2021-02-05

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

  • 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 的值


#javascript







Related Posts

Ch00 - 學習目標

Ch00 - 學習目標

PHP 和 MySQL 的互動 2 : CRUD

PHP 和 MySQL 的互動 2 : CRUD

[04] JavaScript 入門 - 強制轉型、Truthy & Falsy、條件式

[04] JavaScript 入門 - 強制轉型、Truthy & Falsy、條件式


Comments