---
# System prepended metadata

title: function好難

---

# function好難
```javascript=
let x = y(function z() {
 console.log('I am z') 
})
function y(fn) {
  fn()
  console.log('I am y')
  return fn
}
x()
console.log(y)  
console.log(x)  
console.log(x === y) 
```
Q: 輸出的內容？
<hr>
<details>
<summary>answer</summary>

```
I am z
I am y
I am z
[Function: y]
[Function: z]
false
```
### 試著解釋過程:
在第 9 行以前，都是 function 的宣告，所以還不會印東西。第 9 行呼叫了 `x()`。那我們來看看 `x` 到底是什麼。要知道 `x` 是什麼，那要先知道 `y` 是什麼。
```javascript=
function y(fn) { //y 是個 function，接收一個參數。
  fn() // 把接收的參數當作 function 並運行。
  console.log('I am y') // 印出'I am y'
  return fn //把接收的參數回傳回去
}
```
知道 `y` 在幹嘛後，就可以回頭看第 1 行，傳入 `y` 的參數：`z`。`z` 也是 function ，功能只是印出`'I am z'`。所以這裡的 `y` 只是把傳進來的參數回傳回去而已，也就是 `z`。接著照順序執行就可以知道答案了。
`x()` 之後，會呼叫 `y` 並傳入 `z`。所以這時候在跑 `y`。一開始就先跑傳進來的 `z`。所以第一行先印出 `'I am z'`。接著印`'I am y'`。之後把 `z` 給 return 回去。 
==`x` 會是 `y` return 的東西==，現在是 `z`。
知道 `x` 後，這時候才跑第 9 行的`x()`，所以印 `'I am z'`。第 9 行終於結束了。
剩 10~12 行的東西了。
* 第10行：`y` 沒有等於誰，所以就印出自己。
* 第11行：`x` 等於誰？上面講過等於 `z`，所以印出 `z`。
* 第12行：上面都印出來了，所以 false。

詳細可參考老師的文章[覺得 JavaScript function 很有趣的我是不是很奇怪](https://blog.huli.tw/2020/04/18/javascript-function-is-awesome/)
</details>
