JS趴趴往上走-函式新手篇

函式

函式是一種用來執行某一事件或計算的語法，它可以包含一段或多段語法，可以重複使用；但是你使用typeof時你會得到function的結果，但是它是屬於物件object哦

一個函式的組成為:
1.函式名稱
2.參數列表:放置括號( )內
3.執行內容:放置大括號{ }內

fumction 名稱([參數]){
   //執行內容
}

此組成屬於函式陳述句也稱函式宣告，我們帶入值會變成

 
function abc(number){ //abc為函數名稱  number為參數
 var a=1;
 console.log(a+number);
}//大括號為內容

abc(2);//執行abc函式，()內的參數會傳到number內

//所以console.log(a+number)的結果為3

全域變數和區域變數的差異

在變數篇有提到變數在不同地方，它能使用的區域也會不一樣

 var x=1; 
 console.log(x); 

這邊答案是1


那這樣呢?

 var x=1;
 function abc(){
  var x=2;
 
 } 
 abc();
 console.log(x); 
 

猜出來答案是多少嗎?





答案也是1哦!


在這邊，因為var x=2; 是在function內部宣告的，function內宣告的只會在function裡執行完成，所以在這裡的x是屬於區域變數，而console.log(x);是在function外執行，所以它拿到的x值是外面x的哦


接下來下面這題呢

 var x=1;
 function abc(num){
  var x=2+num;
  console.log(x);
 } 
 abc(2);

 

答案是4哦! ，依照上述所說，console.log()是寫在function內部，所以它執行是內部的x，接著abc的參數為2，故2+2=4


接著這題範例答案大家猜猜看x和b是多少

 var x=123;

 function abc(){
  var b=456
  x=2;
 } 
 abc();
 console.log(x);
 console.log(b);
 

答案是........x是2，b是ReferenceError: a is not defined

大家會覺得奇怪，明明是在外面console.log();的，怎麼會是拿內部的x呢?

其實大家有沒有發現，內部的x沒有使用var宣告呢，當你沒重新宣告，那就不屬於內部的function了，它就會往最外層找它的同伴，找到有宣告的同名變數

故這裡的function內的x就開始往外找，找到外層的x後變更了它的數值，外層的數值改變成了2哦

而b顯示錯誤則是因為它是屬於function內部的區域變數，當fuction執行完畢後就會被刪除，記憶體空間也會被釋放，導致內部宣告的區域變數是無法拿到外層去使用的

所以說function可以讀取外層已宣告的變數，但外層不可以拿內層宣告的變數哦，顧名思義愈外面階層愈低

提升 (Hoisting)

 console.log(a);

 var a=123;

 consoloe.log(a);
 

答案是多少呢?



答案是undefined和123

會產生這樣的結果是變數的宣告被提升(Hoisting)跑到最前面去了，依照剛剛的範例來說，JS知道你宣告了一個a，但還不知道你宣告的變數是多少，所以第一個console.log(a)是undefined，到了下一行它知道你a=123，所以下一個console.log(a);就是123

在JS的眼裡，它的樣子是變成

 var a;

 console.log(a); //undefined

 a=123;

 consoloe.log(a); //123
 

接下來我們來看這個範例

 a();

 function a(){

 console.log("hello");
}

答案是"hello"，function也跟var一樣，也會提升哦

這邊提醒大家，若function和var比，function的提升會比var優先載入

 console.log(a); //function

 var a=124;

 function a(){}

這邊你可能會疑惑說，照function先提升的話,那var a=124;不是一個一個執行後會被蓋過去，所以console.log(a);應該等於124呀?

因為提升的只有變數的宣告，賦值不會!

所以，在JS眼裡它覺得是

 function a(){}
 
 var a; //已宣告過a，變數重複宣告是沒用的

 console.log(a); //function

 a=124;

 

若你在最下面增加console.log(a);會得到的答案是124

再來我們看這題

 var name="abcde";
 function name(){
  console.log("呼叫1");
 }
 function name(){
  console.log("呼叫2");
 }
 name();
 

答案是"呼叫2"

在JS的眼裡，它的樣子是

 function name(){      //先提升function
  console.log("呼叫1");
 }

 var name;             //宣告name(已宣告過name所以此行沒用)


//其他的一行一行執行
 name="abcde";       
 
 name=function(){ 
  console.log("呼叫2");
 }

 name();
 

retrun

return是一種可以回傳function結果的功能
剛剛我們有提到，區域變數執行完後就會刪除，所以我們可以搭配 function在運算完以後使用return,外部的 呼叫就能知道回傳的結果，當然只能限定你要return的值，其他依然還是會被刪除哦

 function a(num){
  retrun num+3
 }
 
 a(5); //8
 

以上面範例來講，當你給的參數5，丟給function的參數執行，而你要retrun結果的值num+3，之後回傳給function，答案就是8

我們換另一種方法
假如說有一家麵包店的麵包賣35元，小明進去購買3個麵包的價錢，但是小明在店內打破了別人的盤子，總共花費了205元，但你只叫小明回傳(return)購買的麵包多少錢，而其他小明在店內所發生的事情是不知道的哦

 function bakery(num){
  var bread=35;
  var fixed=100;
  var total=bread*num+fixed;
  return bread*num //回傳買了3個35元的麵包
 }
 
  var ming=bakery(3); //購買3個
  console.log(ming) //105
 

所以當你要回傳你要的結果，可以使用return，不然外面都不知道這個function在裡面都做了什麼事了www



參考資料:
https://ithelp.ithome.com.tw/articles/10191549
https://blog.techbridge.cc/2018/11/10/javascript-hoisting/