はじめに

ふとvar let const の違いを聞かれたときにはっきりと分からなかったので、調べてここにアウトプットします。

そもそもvar let constとは

全てJavascriptにて***変数宣言をする際に使うキーワード***

その中で、letとconstはECMAScript2015から採用された新しい宣言記法。

var let constの違い

全て変数宣言に使われる記述ですが、3つの要素に違いがあります。

１再代入、再宣言が可能か

再代入...すでに宣言していた変数に、値を再び入れなおすこと再宣言...すでに宣言していた変数の名前を、キーワードごと丸っと宣言しなおして、上書きすること

再代入

var

var techacademy = '代入1回目';
techacademy = '代入2回目' //再代入時にvarのキーワードを書かない

let

let techacademy = '代入1回目';
techacademy = '代入2回目' //再代入時にvarのキーワードを書かない

const

const techacademy = '代入1回目';
techacademy = '代入2回目' //エラーとなり実行できない

constのみ再代入ができません。
再代入をできるだけ少なくすることで、変数の中身が明確になり、見通しの良い読みやすいコードができます。そこから生まれる予期せぬ挙動を防ぐこともできるため、極力constを使うようにします。

再宣言

宣言の上書きを行うため、Javascriptで再宣言をしてしますと予期せぬエラーを招きます。コードの読みやすさを低下させることからも、通常は避けられています。

再宣言が可能なのはvarのみです。

var techacademy = '宣言1回目';
//一度宣言した後に、再度同じ変数名で宣言しなおせる
var techacademy = '宣言2回目'

letとconstでは、再宣言をするとエラーになります。
再宣言をして思わぬバグを生むことを防げるため、let,constを使うのが良いです。

２スコープの違い

スコープ...「変数の有効範囲」のこと宣言した変数は、コードのどこでも使えるわけではなく、一定の決められた範囲でのみ使えます。

varは関数スコープ

varは、let constに比べて広いスコープを持っています。ある関数内でvarを用いて宣言した変数は、その関数をどこからでも呼び出すことが可能です。

const testFunc = () => {
if(true){
....
 var x = 1
}

console.log(x) //条件式の中で定義されたxも、条件外で呼び出しても、関数内なので1が表示される

let, constはブロックスコープ

ブロック...{}で括られた処理のこと

let,constの場合は、同じ関数内であってもブロック外側からは変数を呼び出せません。

const testFunc = () => {
//ifが{}のブロック
if(true){
....
 let x = 1
 const y = 2
}

 console.log(x) //ブロックの外側なのでundefined(未定義)となる
  console.log(y) //constを使った場合も同様にundefinedとなる

より狭いスコープであると、その変数がどこから来たものなのか、どう使われているかが明確になります。バグを起こしずらい記述となり、let,constの方が望ましいです。

var let constの使い分け

基本的にconst

再宣言・再代入のどちらもできない事に加えて、スコープも狭いconstは最も制約が多いです。そのことより、予期せぬ実装を防ぐことができ、安全なキーワードといえまず。基本はconstを使います。

constを使えないときにlet

基本的にはconstを使いますが、やむを得ずletを使う必要があるときもあります。

例えば、繰り替えし行われる処理に対して、合計で何回行ったかカウントを取りたい場合などは、letの再代入可能という仕様が活用できます。

let totalClicked = 0;

window.addEventListener('click', () => {
 //++を使うと、現在の値に1足した数を再代入できる
  totalClicked++;
  console.log(totalClicked); //5回クリック済みであれば、5と表示される
})

varは基本使わない

varを使うべきケースはほぼありません。

ネット上でコードを読むときに出くわすことがあるため、その時に読めるように最低限の知識を持つだけで良さそうです。

注意点

constの配列の値は変えられる

const 宣言は、値への読み取り専用の参照を作ります。その値が不変ということではなく、その変数識別子が再代入できないというだけです。たとえば、定数がオブジェクトのコンテンツの場合、オブジェクトのコンテンツ(例その引数)自体は変更可能です。

このように、
「配列そのもの」を交換するとエラーとなりますが、配列の「中身」を変えることはできます。
「再代入」は不可能ですが、改変は可能です。

const test = []
test = [] //エラー