[Javascript] Const、Let、Varの違い

<!-- wp:paragraph -->
<p>■出典： <a href="https://ko-dev-jp.com/2020/07/31/javascript-const%e3%80%81let%e3%80%81var%e3%81%ae%e9%81%95%e3%81%84/">[Javascript] Const、Let、Varの違い</a><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>目次</strong></h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Javascriptの変数</li><li>Constについて</li><li>Letについて</li><li>Varについて</li><li>まとめ</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>1.Javascriptの変数</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Javascriptは変数を宣言するキーワードconst、let、varがあります。<br>このキーワードは、以下のの違いを持っ​​ています。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>初期値</li><li>重複した値の割り当て</li><li>呼び出しの範囲</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>まずconst、let、varすべての変数は、以下のように<br>、（カンマ）で区切って複数の変数を定義することができます。</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript","makeURLsClickable":false} -->
<pre class="wp-block-syntaxhighlighter-code">const category= "header",
      key= "content-Type",
      value= "application/json";</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>2. Constについて</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>const</code>は、値が変わらない変数を宣言するキーワードです。&nbsp;<br><code>const</code>は必ず初期値を設定をするべきであり、<br>宣言した変数は値を再割り当てすることができません。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>const</code>で宣言した変数に値を再割り当てする場合には、<br>次のようなエラー（&nbsp;&nbsp;<code>TypeError</code>）が発生します。&nbsp;<br></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">const key = "content-Type";
key = "appId"; 
// Result => TypeError: invalid assignment to const 'key'
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>したがって、変数に値を再割り当てする必要がない場合には、&nbsp;<br><code>const</code>キーワードの宣言をお勧めします。<br><br>ループの中で特定の変数が参照している値が変わる場合もあります。&nbsp;<br>そのような場合には、変数に再割り当てすることができる&nbsp;&nbsp;<code>let</code>キーワードで宣言した方が良いです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>3. Letについて</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>let</code>は、初期値を指定しなくても大丈夫です。&nbsp;<br>初期値を指定しない場合は、下記ように<code>undefined</code>で初期化されます。</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let key;
// `key` is initialized `undefined`</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><code>letが宣言されたkeyという変数に "content-Type"という文字列を代入しています。</code></p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let key;
key = "content-type";</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>4. Varについて</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>varキーワードは、初期値を宣言しなくても関係ないし、<br>値を再割り当てしても大丈夫なのでlet似ています。<br>しかし、<code>&nbsp;var</code>キーワードは、同じ名前の変数を再定義することができます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>let</code>と&nbsp;&nbsp;<code>const</code>は同じ名前の変数を定義することができず、<br>次のような構文エラー（&nbsp;&nbsp;<code>SyntaxError</code>）が発生します。&nbsp;<br>したがって、誤って変数を二重に定義してしまうミスを防ぐことができます。</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">let key;
let key; // => SyntaxError: redeclaration of let key</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>一方、&nbsp;&nbsp;<code>var</code>の場合には、同じ名前の変数を再定義することができます。&nbsp;<br>これは、誤って同じ変数名で定義してもエラーが出ず、<br>以前に宣言した値を上書きしてしまいます。</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">var x = 1;
var x = 2;
// x is 2</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><code>let</code>は変数を宣言する前に、その変数を参照すると&nbsp;&nbsp;<code>ReferenceError</code>例外が発生します。&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">var x = 1;
var x = 2;
// x is 2</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>一方&nbsp;&nbsp;<code>var</code>では、変数を宣言する前に、その変数を参照しても&nbsp;&nbsp;<code>undefined</code>になります。&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code {"language":"jscript"} -->
<pre class="wp-block-syntaxhighlighter-code">console.log(x); // => undefined
var x = 1;</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="summary"><strong>5.まとめ</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JavaScriptの変数を宣言するキーワードで&nbsp;&nbsp;<code>const</code>、&nbsp;&nbsp;<code>let</code>、&nbsp;&nbsp;<code>var</code>についてまとめました。</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><code>const</code>は値を再割り当てすることができない変数を宣言するとき使われます。</li><li><code>let</code>、<code>var</code>は再割り当てすることができる変数を宣言することができ、<br>初期値を宣言しなくてもされます。</li><li>varの場合のみ、同じ値を重複宣言することができます。</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><code>const</code>は、再割り当てが不可能な変数を定義するキーワードです。 <br>再割り当てを禁止することにより、誤って別の値を割り当てて発生するバグを減らすことができます。 <br><br>したがって、変数を宣言する場合は、まず  <code>const</code>定義することができないかを検討した後、不可能な場合  <code>let</code>を使用することをお勧めします。</p>
<!-- /wp:paragraph -->
<br><br>