Zenn
🙈

【ES6】変数宣言const・let・var のまとめ

2021/09/07に公開
JavaScript
React
frontend
es6
tech

これは何？

ES6記法で書く機会が増え、const, let, varの使い分けがよくわかっていないため、どのような違いがあるかまとめてみました

結論

基本的にはconstを使う。
forループの処理などのように再代入が必要なケースのみletを使用する。
varは、挙動が把握しづらく、バグの温床になる可能性があるため使わない。

用語

それぞれの特徴を理解する際に、出てくる用語のまとめ

  • 再代入 = 一度宣言した変数を更新すること
  • 再宣言 = 一度宣言した変数を、同じ変数名を使って再び宣言し直すこと
  • ブロックスコープ = ブロック{}ごとに囲まれた範囲のこと
  • 関数スコープ = 関数のブロック{}ごとに作られる範囲のこと

それぞれの特徴

const

  • 再代入不可

  • 再宣言不可

  • ブロックスコープを持つ
    ブロックスコープ外からのアクセスを制限。つまり、ブロックスコープ外から参照ができない。

  • 関数スコープを持つ
    関数スコープ外からのアクセスを制限。つまり、関数スコープ外から参照ができない。

let

  • 再代入可能

  • 再宣言不可能

  • ブロックスコープを持つ
    ブロックスコープ外からのアクセスを制限。つまり、ブロックスコープ外から参照ができない。

  • 関数スコープを持つ
    関数スコープ外からのアクセスを制限。つまり、関数スコープ外から参照ができない。

var

  • 再代入可能

  • 再宣言可能

  • ブロックスコープを持たない
    ブロックスコープ外からのアクセスを許可する。つまり、ブロックスコープ外から参照ができる。

  • 関数スコープを持つ
    関数スコープ外からのアクセスを制限。つまり、関数スコープ外から参照ができない。

再現

再代入

const constValue = 'Hello!!';
let letValue = 'Hello!!';
var varValue = 'Hello!!';

// 再代入
constValue = 'Goodby!!';
letValue = 'Goodby!!';
varValue = 'Goodby!!';

console.log(constValue);
console.log(letValue);
console.log(varValue);

// エラー内容
Uncaught TypeError: Assignment to constant variable.
Goodby!!
Goodby!!

constのみ再代入しようとするとエラーが吐かれる。

再宣言

const constValue = 'Hello!!';
let letValue = 'Hello!!';
var varValue = 'Hello!!';

// 再宣言
const constValue = 'Goodby!!';
let letValue = 'Goodby!!';
var varValue = 'Goodby!!';

console.log(constValue);
console.log(letValue);
console.log(varValue);

// エラー内容
Uncaught SyntaxError: Identifier 'constValue' has already been declared
Uncaught SyntaxError: Identifier 'letValue' has already been declared"
Goodby!!

constとletは再宣言しようとするとエラーが吐かれる。

ブロックスコープ

const isTest = true;

if(isTest) {
  const constValue = 'Hello!!';
  let letValue = 'Hello!!';
  var varValue = 'Hello!!';
}

console.log(constValue);
console.log(letValue);
console.log(varValue);

// 出力
Uncaught ReferenceError: constValue is not defined
Uncaught ReferenceError: letValue is not defined
"Hello!!"

constとletは、if文などのブロックスコープ外から参照できない

関数スコープ

const setValuables = (text) => {
  const constValue = text;
  let letValue = text;
  var varValue = text;
}

setValuables('Hello!!');

console.log(constValue);
console.log(letValue);
console.log(varValue);

// 出力
Uncaught ReferenceError: constValue is not defined
Uncaught ReferenceError: letValue is not defined
Uncaught ReferenceError: varValue is not defined

const、letとvar全て、関数ブロック外から参照できない

const, letの方が優れている

varだと宣言したブロック以外にも影響をあたえてしまうため、意図しないところで値が変わってしまう。const, letだと宣言したブロック以内に影響が収まるため、意図しないところで値が変わってしまうことを防ぐことができます。

constは定数のように見えて、定数ではない

constは再代入はできないが、オブジェクト型（Array, Objectなど）の中身を変更することができるようです。

例えば、配列に配列を再代入するとエラーになるが、配列の中身の一部を変更する時はエラーにらずに変更することができます。

そのため、constは定数のように見えて、定数ではないと言えます。

まとめ

まとめて見て感じたことは、制限の少ないvarを使うのではなく、制限の多いconst、let
を使う方が良さそうです。
また、基本的には変数はconstで定義してあげて、for文などの処理で、変数を数え上げたりする場合はletを使用するという使い分けで良さそうです。

Discussion