蜻蛉のバグ取り部屋: 【JavaScript】関数内でconstで宣言された変数は、次の関数呼び出しで変更できる

JavaScriptのconstの使い方について気になって調べたのでメモ。

ポイント

関数内でconstで宣言された変数は、次の関数呼び出しで変更できる

【問題】
ある関数内で、変数をエイリアスとして使用することを考える。
例えば、以下のような感じ。

function tmp() {
    const arrayLength= array.length;
    console.log(arrayLength);
}

配列の長さが変わった際に、再度この関数が呼び出されるとどうなるのか。
このconstが「関数の呼び出しのたびに毎回値を設定します」ということであれば望む結果が得られるだろうが、もし仮に、「関数の最初の呼び出しで決まり、それ以降の呼び出しでは変更できません」だと困ったことになる。
C++を扱った感覚では、前者の動作が当然のように思われるが、気になってしまった以上調べないわけにはいかない。

【答え】
ちゃんと再設定される。

開発・実行環境

ブラウザ Google Chrome
バージョン: 78.0.3904.70（Official Build）（64 ビット）
起動時オプション:
--flag-switches-begin --flag-switches-end

PC
プロセッサ: Intel(R) Core(TM) i5-5200U CPU @2.20GHz
メモリ: 8.00 GB
OS: Windows 8.1 (64bit)
compiler: Microsoft (R) C/C++ Optimizing Compiler Version 19.00.24215.1 for x86

コード

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charser="utf-8" />
    <title>Odonata Bug Hunt Blog</title>
    <link rel="manifest" href="/manifest.json">
    <script type="text/javascript">
      var lastValue=0;
      const addOne = () => {
        const constValue=lastValue+1;
        // constValue = 1;  // This code become an error.
        var elem = document.getElementById("id_value");
        elem.innerText = constValue;
        lastValue = constValue;
      };
    </script>
  </head>
  <body>
    <input type="button" value="Increment" onclick="addOne();"><br />
    value: <span id="id_value"></span><br />
  </body>
</html>

lastValueは数を保存しておくためのグローバル変数だ。
constValueはlastValueに1を加えた値を入れておくための変数で、関数呼び出しのたびに更新さる。
ボタンクリックで関数が呼ばれる。

実行結果

Odonata Bug Hunt Blog
value:

（私の環境では更新されています）

蜻蛉のバグ取り部屋

ページ

2019年10月31日木曜日

【JavaScript】関数内でconstで宣言された変数は、次の関数呼び出しで変更できる

ポイント

関数内でconstで宣言された変数は、次の関数呼び出しで変更できる

開発・実行環境

コード

test.html

実行結果

0 件のコメント:

コメントを投稿