iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0

變數

在程式中將一個值指定(assign)給一個符號式的容器(symbolic container),叫做一個變數(variable)。

宣告

在JS中目前提供了三種宣告方式:

  1. var
    宣告一個變數,可選擇是否給予一個初始值。

    作用範圍 (scope) 於該函式之內; 但是如果在函式外宣告, 其作用範圍則為全域性 (global)。

    var price = 10;
    price = price * 2;
    console.log(price);
    
  2. let(ES6新增)
    宣告一個區塊範圍(scope)內的本地變數,可選擇是否給予一個初始值。

    let prices = 10;
    
    if (prices === 10) {
      let prices = 20;
    
      console.log(prices);// 20
    
    }
    
    console.log(prices); // 10
    
  3. const(ES6新增)
    宣告一個只能讀取區塊範圍(scope)內的本地變數。

    const price = 10;
    console.log(price);//10
    price = 20 ; //Uncaught TypeError: Assignment to constant variable.
    

如果在宣告時候未給予值,JS會預設為 undefined(除了 const)

var a ;
console.log(a)//undefined
let b;
console.log(b)//undefined
const c;
//Uncaught SyntaxError: Missing initializer in const declaration

命名規則

在命名時候需要注意下面幾點規則:

  1. 開頭不能數字
  2. 英文大小寫是有區分的
  3. 不可使用保留字元
    MDN 中有列出了哪些是 JS的保留字元。

函式

程式拆解成可重複使用的片段

具名程式碼片段(a named section of code)可以藉由名稱來 呼叫執行。

可選擇是否接受引數(arguments 即參數(parameters))

宣告

函式由三個關鍵字組成,依序是:

  1. 名稱
  2. 參數列表
  3. 大括號 {}

這邊舉個例子:

function totalPrice(number,price){
    return number*price
}
totalPrice(2,20)

函式totalPrice使用了兩個參數numberprice,兩著相乘後透過return回傳其值。

函式通常會有回傳值,但並非每種函式都需要回傳值,也有可能利用輸出的方式來輸出結果。

function totalPrice(number,price){
    console.log(number*price) 
}
totalPrice(2,20)//40

在宣告函式時可以選擇不撰寫名稱,這將會使函式成為一個匿名函式,通常作為一個指定值,指定給一個變數後,該變數便成為了這個匿名函式的名稱。

var total = function (number,price){
    console.log(number*price) 
}
total(2,20)//40

以函式作為參數傳入
在JS中也能將函式做完參數傳入到另一個函式,而且在函式的最後也可以回傳函式。這種函式的結構稱之為 高階函式(Higher-order function)。我們常聽到的 callback就是高階函式的應用,不過這會在很後面才提到。在這邊只需要了解函式也能當作參數即可。

var total = function(count,fn){
    return fn(count)
}
var price = function(count){
    return count * 20
}
console.log(total(10,price))//200

參考資料:
變數、常數與命名

https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/function_scope.html

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements


上一篇
學JS的心路歷程 Day1 - 資料型別
下一篇
學JS的心路歷程 Day3-範圍 Scope 和 提升(Hoisting)
系列文
學JS的心路歷程30

尚未有邦友留言

立即登入留言