var・let・const の違い[JavaScript]

JavaScriptのvar・let・constの違いについて、簡単にまとめました。

var

「変数」
・再代入:OK
・再定義:OK

var testNumber = 0;
testNumber = 1; // 再代入OK
var testNumber = 1; // 再定義OK

let

「変数」
・再代入:OK
・再定義:NG

let testNumber = 0;
testNumber = 1; // 再代入OK
let testNumber = 1; // 再定義NG(エラー出る)

const

「定数」
・再代入:NG
・再定義:NG
※ただし、配列やオブジェクトは変更OK

const testNumber = 0;
testNumber = 1; // 再代入NG(エラー出る)
const testNumber = 1; // 再定義NG(エラー出る)

const animal = {
  name: 'cat';
};
animal.name = 'dog'; // 変更OK

varとletの違い

varとletはスコープが違う。

var:関数スコープ

・関数内のどこからでも参照できる
・意図せず同じ変数名を使用して、バグが起きやすい

const test = (scope) => {
  if(scope === 'function'){
    var name = '関数スコープ';
  }
  console.log(name); // 参照できる
}
test('function');

let:ブロックスコープ

・ブロック内からのみ参照できる
・letの方が使用範囲が限られるので、バグが起きにくい

const test = (scope) => {
  if(scope === 'block'){
    let name = 'ブロックスコープ';
  }
  console.log(name); // 参照できない(エラー)
}
test('block');

letとconstの始まり

・ES6(ES2015)から使えるようになった
・バグや仕様に抜けがあったvarの代わりとして作られた
・これまでの開発もあるのでvar自体はすぐに無くならない
 が、今の主流はletとconstを使った記述。