CODE

JavaScript

【JavaScript初心者必見】var, let, constの違いを丁寧に解説！！！

公開日 2021/4/30

こんにちは！ニタマサ(@NewM07x2)です。

・JavaScriptの変数や定数の使い分けが微妙。。。
・var, let, constの違いが知りたい！

JavaScriptを扱っていると、こんな風に思ったことがあるかと思います。
自分もこの疑問にぶち当たったので、JavaScriptの変数の使い方をまとめました。

それでは始めていきましょう。

var、let、constとは？

var、let、constとは全てJavaScriptで変数を宣言する際に使うキーワードです。
JavaScriptでは、変数や定数を使う際、変数名を宣言することが推奨されています。

たとえば、以下のように記述することで変数を宣言できます。

var text_var = ‘テストvar ’
let text_let = ‘テストlet ’
const text_con = ‘text_con’

“let”、”const”は新しい記法

let、constに関してはECMAScript2015から採用された比較的に新しい宣言方法のキーワードです。
※ECMAScript2015（エクマスクリプト） : JavaScriptの標準仕様

導入から約6年が経過しているので多くの開発現場で浸透している記法です。

また、国際団体で標準化されたうえでGoogle Chrome や Internet Explorer 11以降、ブラウザで広く採用されています。

“var, let”と”const”の違い

それでは３つの変数宣言の違いについてみていきます。

結論から言うと

「再代入可能か、否か」

です。

再代入とは一度宣言した変数に対し、値を再び代入することです。

例えば、“var”を用いた宣言の場合、

var text_var = ‘変数前’
text_var = ‘変数後’

となります。
こちらは”let”の場合でも、同様です。

“const”の時だけはvar,letとは異なり、再代入することができないのです。

もし、再代入しようとすると、エラーとなり実行することができません。

再代入を少なくすることは、予期せぬ不具合などの減少やコードが読みやすいといった利点があります。
そのため、再代入が必要な場合を除いて、できるだけconstを使いましょう。

“var”, “let” の違い

続いて、“var”, “let” の違いについてです。

こちらは大きく2点あります。

「再宣言」が可能か否か

1点目は「再宣言」が可能か否か です。

再宣言とは以下のように、同変数に対して変数宣言を再度行うことです。

●

var text_var = ‘変数前’
var text_var = ‘変数後’

✖︎

let text_var = ‘変数前’
let text_var = ‘変数後’

こちらは、”var”は再宣言が可能で、”let”はエラーとなってしまいます。

「スコープ」の違い

2点目は「スコープ」の違いです。
スコープとは変数の有効範囲のことです。

変数には以下のように２つの変数に分類されます。

グローバル変数：コード全体
ローカル変数：ブロック( if文, for文など )

こちらの観点で見てみると、“var”, “let”は以下に当てはまります。

グローバル変数：var
ローカル変数：let ( const )

例えば、varで変数宣言すると以下のようになります。

function test() {
  if (true) {
    //条件式の中で宣言
    var AAA = 1;
  }
  console.log(AAA) 
}

let(const)で変数宣言すると以下のようになります。
※ブロック外になるので、undefined(未定義)と出力されます。

function test() {
  if (true) {
    //条件式の中で宣言
    let BBB = 1;
    const  CCC = ‘test’

  }
  console.log(BBB) 
  console.log(CCC)
}

狭いスコープではその変数の使われ方が明確になり、バグを起こしづらいコードを記述可能です。
そのため、グローバル変数は極力減らしたコードにしたほうが良さげです。

変数宣言を行う際に利用する優先順位は以下が良いですね。

const > let > var

まとめ

いかがだったでしょうか。

今回は『var, let, constの違い』について解説してきました。

大きな違いは再代入・再宣言ができるかどうか、スコープの違いの部分です。
変数宣言を行う際に利用する優先順位は

const > let > var

として方が、予期せぬバグが発生しづらいコードになるので、ぜひ実践してみてください。

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）

では！See you again!(´∀｀)

こんにちは！ニタマサ(@NewM07x2)です。

タグ

const

JavaScript

let