立即執行函式(IIFE)與箭頭函式

再深入提及函式陳述式與函式表達式提升(Hoisting)的概念，及進一步說明立即執行函式(IIFE)，及介紹箭頭函式

函式陳述式與函式表達式差異與立即執行函式(IIFE)說明

先前在函式基本概念中，初步說明函式陳述式與函式表達式寫法方式，現在我們針對這兩個函式寫法做深入的描述，進行更詳細的說明，並延伸描述關於立即執行函式(IIFE)的觀念，也為接下來要介紹的箭頭函式，做個引導式開頭。

函式陳述式

再說一下陳述式的概念，為直接給定函式名稱來直接宣告一個函式，也是一般的函式宣告，而宣告時，Javascript會保留記憶空間，所以也涉及提升的概念，因此在函式被宣告前可做呼叫，但是陳述式本身不會回傳值，我們也無法將它賦予、指向給變數。

// 可以在宣告函式前做呼叫
A();

function A() {
//     do something
}

函式表達式

概念為直接把一個函式指派給另一個變數，函式也一種物件，因此可以被指派，
但是此宣告方式並不會在一開始就可以被呼叫，也就是不會被提升，只有在執行的階段，才會把函式指派給變數，並且它可以當成一個值(表達式會回傳值)

// A is not a function
A();

//在這裡才會被指派給變數 
var A = function() {
//     do something
}

立即執行函式(IIFE)

概念為在函式被創造後立刻執行，IIFE全名為Immediately Invoked Functions Expressions，指的是可以立即執行的Functions Expressions函式表達式，

先說明基本IIFE，
一般表達式，要在指派變數之後，允許被呼叫，因此一般我們呼叫表達式微:

var A = function(name){
	console.log('hi ' + name);
};
// 給予變數之後進行呼叫
A('Shawn');//印出 hi Shawn

而IIFE，則是省略名稱，直接以()進行呼叫:

var A = function(name){
	console.log('hi ' + name);
}('Shawn');
// 印出hi Shawn

直接以開發者工具操作進行:

因此，上方說明IIFE後，其寫法又分為:

// IIFE表示:
var A = function(name){
	console.log('hi ' + name);
}('Shawn');//印出 hi Shawn

// 這也是IIFE，也是最常在JS框架、套件看到的寫法。
(function(name){
	console.log('hi' + name)
}('Shawn'));

// 立即呼叫的()可放裡面(上方表示)或外面(下方表示)
(function(name){
	console.log('hi' + name)
})('Shawn');

用於開發者有些變數只希望給某一段邏輯使用時，且也想要在程式載入後直接執行，適合使用IIFE。而由於立即函式創造出一個函式範疇，還可以用來避免汙染全域執行環境的東西，減少開發時因相同命名相衝的bug。

文章參考:

箭頭函式

基礎寫法

箭頭函式有兩個重點:

更簡短的函式寫法

this 變數強制綁定

在說明ES6箭頭函式前，再寫一段程式來看陳述式及表達式及箭頭函式的差異:

// 函式陳述式
function numA (x){
    return x * x;
}

// 函式表達式
const numB = function(x){
    return x * x;
}

// 箭頭函式
const numC = (x) => {
    return x * x;
}

因此基本寫法為，表達式去除掉function，在()後加上=>:

const numC = (x) => {
    return x * x;
}
// 也能這樣撰寫
const numD = (x,y) => {
    const a = 3;
    const b = 4;
    return a * b * x * y;
}

再縮寫

在箭頭函式中假如函式搭配到return，可縮減為

// 原本箭頭函式為
const A = (name) => {
    return `hi ${name}`;
};

A('Shawn')//顯示hi Shawn

// 可去掉{}，縮寫為
const A = (name) => return `hi ${name}`;

// 更可去掉return，再進一步縮寫為
const A = (name) => `hi ${name}`;

假如參數只有一個，更可以省略()，若兩個參數仍需要括號，沒參數亦然:

1	const A = name => `hi ${name}`;

函式回傳函式寫法

函式可以被傳給另一個函式，可以這麼寫:

1
2
3

const A = name => slogan => `Hi ${name} ${slogan}`;
A('Shawn')('how are you')
// 'Hi Shawn how are you'

箭頭函式與this

this與箭頭函式的部分，會在this的介紹中再做說明，總之箭頭函式沒有this。

參考資料:
書籍- 008天重新認識Javascript (許國政著)