Day3 Javascript宣告變數及變量

2022 iThome 鐵人賽

DAY 3

Modern Web

Javascripts惡補小教室系列第 3 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-09-18 12:24:47

655 瀏覽

分享至

宣告變數

在我們開始浩大的網頁工程前，第一步就是需要宣告變數，那Javascript如何宣告，又有哪些類型呢?
接下來就開始介紹吧!

var

可以透過var宣告一個變數，並且給他值(變量)。

    var name = "jason";

那可以只宣告變數，而不賦予它值嗎?是可以的，但讓我們看看會有甚麼結果。

    var name ;
    console.log(name); //這時候會出現undefined

畢竟我們沒給他任何值，所以出現undefined也是理所當然的嘛!
我們可以將變數帶入前一篇的概念裡，改變html的元素。

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").innerHTML = name;
    }

    var name;
    name = "jason";
  </script>

let

同樣都是宣告，那let跟var有甚麼不同呢?這時候就要牽扯到作用域三個字!
透過var宣告的變數，是全局作用域，每一個地方都存取的到，舉個例子:

    function change() {
      document.getElementById("demo").innerHTML = name;
    }
    var name;
    name = "jason";

透過var 宣告的name ，在函數裡change()也存取的到!那let呢?

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      document.getElementById("demo").innerHTML = myname;
    }
    let myname = "Leo";
  </script>

這時候會出現undefined，因為let宣告的變數是局部作用域，只能在他宣告的函數內、花括號內裡存取。

  <body>
    <p id="demo">哈囉，悲慘的世界</p>
    <button onclick="change()">按鈕</button>
  </body>

  <script>
    function change() {
      let myname = "Leo";
      document.getElementById("demo").innerHTML = myname;
    }
  </script>

這時就能順利改變內容!在介紹一下容易搞混的部分。

  <script>
    var myname = "Jason";
    function change() {
      let myname = "Leo";
      console.log(myname); //myname是Leo
    }
    console.log(myname);// myname是Jason
  </script>

雖然兩者變數相同，但作用域的關西，let只在他的函數裡(局部)，所以當函數外時，myname一樣是Jason。

ES5寫法以後，還有一個宣告變數const沒介紹到，下一篇就讓我們來看看吧!