【JavaScript】 constとletの使い分け

なんとなくわかっていたつもりでいた、変数のconstとletの違いをまとめてみました。
varは非推奨のため、使わないようにしています。

見直すきっかけ
JavaScriptの変数宣言について
- 再宣言とは
- 再代入とは
配列の追加
まとめ

見直すきっかけ

現在もりけん塾でJavaScriptの課題に取り組んでいます。
その課題の中で連想配列の変数名にletを使用していましたが、
森田先生からconstを使ってくださいとプルリクの中でコメントを頂きました。

私がletを使用したのは、配列を追加したい場合、
constだと追加できないと考えていたからです。

連想配列をconstで宣言し、pushで配列追加を試してみたところ、
普通に配列追加できました。

これを機会に改めて、変数constとletについてまとめます。

JavaScriptの変数宣言について

変数宣言には、const、let、varの3つがあります。
この3つの違いは以下になります。

	const	let	var
再宣言	×	×	〇
再代入	×	〇	〇
スコープ	ブロック	ブロック	関数

再宣言とは

同じ変数名で、変数の宣言をし直すことを再宣言といいます。

var num = 1;
var num = 2;
console.log(num); //2と表示される

改めて変数(var,let,const)は〇〇ですと宣言することになります。
これができるのはvarのみです。そのため現状非推奨とされています。

再代入とは

宣言した変数の値を変更する(代入する)ことを再代入と言います。

let num = 0;
num = 1;
console.log(num); //1と表示される

プログラミングのにおいて「＝」は右側の値を左側の変数に入れますという、代入を意味する演算子となります。変数名＝値で記述すると値を変数に代入するということになります。

再代入ができるのは、var、letのみとなります。

配列の追加

見直すきっかけとなった連想配列への追加は、
連想配列の追加(再代入、再宣言でもない)となるためconstでも定義ができます。

ただし、配列自体を再宣言する場合はconstは使用できません。

const createLists = [
  { anchor: 'a1.html', text: 'a1' },
  { anchor: 'a2.html', text: 'a2' }
]

createLists = new Array();


createLists.push({anchor : 'a3.html', text:'a3'});
//Uncaught TypeError: Assignment to constant variable. とエラーがでる。

この場合はcreateListsという名前の配列を新たに作成(再宣言)したため、
エラーとなります。

もし配列の再宣言が必要となる場合は、
letを使用する必要があります。

let createLists = [
  { anchor: 'a1.html', text: 'a1' },
  { anchor: 'a2.html', text: 'a2' }
]

createLists = new Array();


createLists.push({anchor : 'a3.html', text:'a3'});
//createListsには{anchor : 'a3.html', text:'a3'}のみ格納

この配列に関しては、プリミティブ型、オブジェクトへの参照の話が関わるのですが、
これはまた別記事でまとめようと思います。