函式

函式簡介

當我們有一段程式碼需要重複使用的話，我們就會用一個函式包起來。
所以，每次要使用的話，我們就可以呼叫這個函式就可以囉，而且，也變得比較好維護。

定義函式的方式

a. 函式宣告

funtion triple(number){
    return number*numbre*number
}
console.log(triple(2)); // 8

b. 函式運算式
利用變數來儲存函式

var triple = function(number){
    return number*numbre*number
}
console.log(triple(2)); // 8

c. 用new Funtion關鍵字建立函式

1	var triple = new Funtion('number', 'return numbernumbrenumber')

因為JS最小變數切割範圍是Function，所以，以下就帶入全域變數和區域變數的介紹

變數範圍

變數範圍差異

var num = 1;
function triple(y){
    var num = 100;
    return num + y;
}
console.log(triple(50));  // 150
console.log(num);  // 1

第一，講一下，結果是150的部分
這邊可以看到triple函式內有一個跟外面num變數一樣名稱的變數，但是，因為JS的變數最小範圍是FUNCTION，所以，在triple函式的num跟
外面的num其實是不同的人，所以，當參數傳入50後，當下的num是100，所以，最終計算的結果會是150。
第二，講一下，結果是1的部分
也因為JS的最小變數範圍是FUNCTION的關係，外層是取用不到triple函式內的變數的，所以，造成最終那個console.log(num)的結果是1。

沒有用var宣告的變數

var num = 1;
function triple(y){
    num = 100;
    return num + y;
}
console.log(triple(50));  // 150
console.log(num);  // 100

雖然說在JS中，最小的變數範圍是function，但是，那是在有用var宣告的情況下。
而以上這個範例在triple中的num並沒有用var做宣告，所以，他會向外層查找，此時，他會找到外層第一航宣告的num，
並將他的直改成100，這也就是為什麼最後的console.log(num)會是100的原因囉。
要特別小心這種狀況，不要誤用了。

Hoisting(提升)

變數的Hoisting特性

當我們利用var來宣告變數的時候，宣告部分會被提升到該變數區域的最上面，而該變數的定義部分會來在原地。
Q. 什麼叫做該變數區域的最上面?
當該變數是全域變數，它的宣告部分就會被提升到全域範圍的最上層。
若該變數是區域變數，也就是在某個函式中宣告該變數的話，該變數的宣告部分，就會被提升到該函式內的最上層。

function triple(y){
    console.log(num);  // undefined
    var num = 100;

    return num + y;
}
console.log(triple(50)); // 150

這邊就拆解一下上面的範例，為什麼會是undefined的結果

function triple(y){
    var num;
    console.log(num);  // undefined
    num = 100;

    return num + y;
}
console.log(triple(50)); // 150

這樣就看的出來了吧! 因為宣告部分被提升了，且此時並未被賦值，所以，在下一行要調用該值時，就會是undefined了。

let/const 和 var宣告的差別

它們的差別在於
var宣告有Hoisting的特性。
let/const宣告沒有Hoisting的特性。
也因為let/const沒有提升的特性，也就造成了，它們有死區的特性。

function的Hoisting特性 - 不同宣告方式的差異

若使用函式宣告的方式，該函式是有提升的特性的。
若使用函式運算式的宣告方式，該函式是沒有提升特性，

---函式宣告---
console.log(triple(2)) // 8
function triple(num){
    return num*num*num;
}

---函式運算式宣告---
console.log(triple(2)) // TypeError: triple is not a funtion
var triple = function (num){  
    return num*num*num;
}

Landy Blog

JS核心篇-第二章筆記

函式