函式function

在 React 中，會經常使用函數來建立和管理React中的各項元件，而React架構的網頁實際上又是由個元件組成的，所以在進入React之前了解一些function 的觀念有其必要性存在。

function的宣告方法

大致上比較常用的有下列三種
第一種:最為常見使用有名稱的函式

function callName(){
  console.log("Tom")
}
callName();

第二種:用變數宣告匿名函式,可以防止function hoisting的問題

let callName=function (){
  console.log("Tom")
}
callName();

第三種:用物件

let name={
  callName:function(){
    console.log("Tom")
  }
}
name.callName()

function與return的特性

1. 函式必定有回傳值，如果沒有回傳值，值就是undefined

function callName(){
  console.log("Tom")
}
callName();
//會出現Tom與undefined

function callName(){
  return "Tom"
}
callName();
//不會出現undefined

2. return 具有中斷函式的特性
3. return 後方可以加入表達式

函式預設參數值 function Default parameters

根據MDN的說法"函式預設參數 允許沒有值傳入或是傳入值為 undefined 的情況下，參數能以指定的預設值初始化。"，不過簡單來說就是給一個函式預設的值，範例如下

function callName (name="Tom"){
console.log(`${name}`)
}
callName()

IIFE 立即執行函數

顧名思義就是立即執行函數，雖然有點像廢話，不過就是讓函式在定義的時候馬上執行一次。

引用MDN的說明

他又稱為 Self-Executing Anonymous Function，是一種常見的設計模式，包含兩個主要部分：
第一個部分是使用Grouping Operator () 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。
第二個部分是馬上執行 function 的 expression ()，JavaScript 引擎看到它就會立刻轉譯該 function。

其寫法有兩種，
第一種:第二個小括弧在外面

(function callName (name="Tom"){
console.log(`${name}`)
})()

第二種:第二個小括弧在裡面

(function callName (name="Tom"){
console.log(`${name}`)
}())

無論是哪一種就不用還需要額外呼叫函示囉

箭頭函式arrow function

是一種函式的簡寫法，當然與原本function的形式還是有些許的不同

箭頭函式的寫法

以上面的例子而言寫成箭頭函式的形式如下:

let callName=()=>{
    console.log("Tom")
}

箭頭函式簡易的寫法

1.只有一個參數的時候可以不用加箭頭前面的小括號

let multi=a=>{
    console.log(a*2)
}

2.如果只有一行表達式或是只有回傳一個值可以把大括弧拿掉，但是有這樣寫就意味者自帶return，所以實際上是省略了{}還有return

let multi=a=>a*2

箭頭函式的特性

1.this通常指向全域或是說最近的非箭頭函式的 this 值
2.沒有建構函式
3.在JSX中可能會看到下面那這種()寫法這是因為已經只有一行的狀況下可以省略掉大括弧，那為什麼可以省略?因為在()為群組運算子Grouping operator視為同一行

const callName = (props) => (
  <div>
    <h1>Tom</h1>
  </div>
)

引用資料

MDN 預設參數( Default parameters )
MDN IIFE