var・let・const の違い

2023年3月1日

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

var
let
const
varとletの違い
var：関数スコープ
let：ブロックスコープ
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を使った記述。