【JavaScript】var, let, constの違いと使い方

この記事はJavaScriptの変数宣言であるvar, let, constの違いと使い方について書いています。

基本的な部分ではありますが、これが分かってないと予期しないエラーが起こったりするかもしれません。

ということで、var, let, constについて認識を深めましょう。

var, let, constの違いと使い方

まずはvar, let, constの違いを表で見てみましょう。

分からないところもあると思うので、以下で１つずつ解説していきます。

再代入

　// 変数宣言
  var _var = "var";
  let _let = "let";
  const _const = "const";

  // 再代入
  _var = "var new";
  _let = "let new";
  _const = "const new";

  // コンソールに出力
  console.log(_var);
  console.log(_let);
  console.log(_const);

これが再代入です。

変数宣言後、その変数に違う値を代入するのが再代入です。

最初の表にある通り、constで宣言した変数は再代入できません。

ですので、コンソールを見ると「TypeError: “_const” is read-only at _readOnlyError」とエラーが表示されているはずです。

再宣言

// 変数宣言
  var _var = "var";
  let _let = "let";
  const _const = "const";

  // 再宣言
  var _var = "var new";
  let _let = "let new";
  const _const = "const new";

  // コンソールに出力
  console.log(_var);
  console.log(_let);
  console.log(_const);

これが再宣言です。

letとconstは再宣言ができません。

ブロックスコープ

// ブロックスコープ
  {
    // 変数宣言
    var _var = "var";
    let _let = "let";
    const _const = "const";
  }

  // コンソールに出力
  console.log(_var);
  console.log(_let);
  console.log(_const);

{}で囲ってますが、これがブロックスコープです。

varは、ブロックスコープで囲われていてもコンソールに表示されますが、letとconstは表示されないのが確認できると思います。

コンソールをみると「Uncaught ReferenceError: _let is not defined」というエラーがでているはずです。

”_let（上記の例の変数名）は定義されていません”という内容です。

letとconstで宣言された変数にはスコープの外部からアクセスできないのです。

関数スコープ

 // 関数スコープ
  function fn() {
    // 変数宣言
    var _var = "var";
    let _let = "let";
    const _const = "const";
  }

  // コンソールに出力
  console.log(_var);
  console.log(_let);
  console.log(_const);

functionで囲っているのが関数スコープです。

さきほどのブロックスコープではvarが表示されましたが、関数スコープで囲うとコンソールに「Uncaught ReferenceError: _var is not defined」と表示されアクセスできていないことがわかります。

ここまでがvar, let, constの違いです。

変数宣言はletかconstを使おう

JavaScriptはもともとvarで記述されていましたが、ES2015でletとconstが追加されました。

※ES2015はECMAScript 2015の略で、ES6とも表現され、2015年6月にEcma Internationalから公表されたJavaScriptの仕様をいいます。

前述の通り、varは再宣言やブロックスコープにアクセスでき、バグを生みやすいため現在は非推奨です。

再代入が不要な場合はconst、再代入が必要な場合はletと、この2つを使い分けて使用するとよいです。