JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで変数を再宣言すると値は破棄される？varの再宣言と再代入の違いを解説

結論から言うと、JavaScriptで変数を再宣言しても、その変数の値は破棄されません。値が失われるのは、再宣言の際に別の新しい値を代入した場合だけです。

次の例では、変数「x」と「y」にそれぞれ4と8が代入されています。その後、これらの変数を再宣言して新しい値を代入すると、古い値は新しい値に置き換えられ、出力結果にもそのように表示されます。

例1：再宣言と同時に再代入する場合

<html>
<body>
   <script>
      var x = new Number(4);
      var x = 7;
      var y = 8;
      var y = 10;
      document.write(x);
      document.write("</br>");
      document.write(y);
   </script>
</body>
</html>

出力

7
10

この例では、変数が再宣言されると同時に新しい値が再代入されたため、元の値（4と8）はそれぞれ7と10に上書きされています。

一方、次の例では変数を再宣言していますが、新しい値は代入していません。この場合、変数は元の値を保持し続けます。

例2：再宣言のみで再代入しない場合

<html>
<body>
   <script>
      var x = new Number(4);
      var x;
      var y = 8;
      var y;
      document.write(x);
      document.write("</br>");
      document.write(y);
   </script>
</body>
</html>

出力

4
8

出力結果を見ると、値を代入せずに再宣言しても、元の値（4と8）がそのまま残っていることが確認できます。これは、varによる再宣言が既存の変数とその値に何ら影響を与えないためです。

補足：let と const の場合はどうなる？

なお、ES2015（ES6）以降で導入されたletやconstは、同じスコープ内での再宣言が許可されていません。同じ名前の変数を再度宣言しようとすると「SyntaxError」が発生します。意図しない値の上書きを防ぐためにも、現代のJavaScript開発ではvarではなくletやconstの使用が推奨されています。

  1. JavaScriptで<text>要素の値を変数に抽出する方法

    JavaScriptで要素の値を変数に抽出するにはSVGの<text>要素のテキスト値を変数に抽出したい場合は、textContentプロパティを使用します。基本的な書き方は以下の通りです。document.getElementById(yourTextIdValue).textContentgetElementById()メソッドで対象の要素をIDから取得し、そのtextContentプロパティを参照することで、要素内のテキストを文字列として変数に格納できます。textContentとinnerHTMLの違いなお、SVG要素の場合はinnerHTMLよりもtextContentを

  2. JavaScriptでHTMLのH1要素のテキストを変数に取得する方法

    HTML内の <h1> 要素のテキストをJavaScriptの変数に格納したい場合は、document.getElementById() と innerHTML を組み合わせて使用するのが基本です。 H1の値を取得する基本的な方法 document.getElementById(id名).innerHTML と記述することで、指定したIDを持つ要素の内容（テキスト）を取得できます。 例として、次のようなH1見出しがHTMLにあると仮定しましょう。 <h1 id=demo>これはJavaScriptのデモプログラムです……</h1> このH1の値を取得するには