[TypeScript] ver/let/constの違い

はじめに

TypeScriptの学習を始めた時に、サンプルコードを見てver/let/constの違いが分かりませんでした。
下記書籍でver/let/constの違いを理解したので、執筆しします。

結論

それぞれの違いは、再代入と再宣言が可能かどうかになります。

基本的には潜在的なバグを生みにくい順番としてconst > let > varである

変数宣言	意味	再代入	再宣言
var	varible(変数)	〇	〇
let	let it be (あるがままに)	〇	×
const	constant (定数)	×	×

理由: 再代入/再宣言が可能なほど意図しない動作が発生するの為
→ 安定したプログラムを作成する時は、constを優先的に使用し、再代入したい場合は、letを使用する。

解説

varible (変数)とは

下記の表の通りになります。

宣言	意味	再代入	再宣言
var	varible(変数)	〇	〇

再代入

var の再代入についてサンプルコードとともに確認します。

// 初回宣言
var price = 100;
console.log(price);

// 再代入
price = 120;
console.log(price);

var の再代入が可能である事が確認出来ました。

----- 出力結果 -----
100
120

再宣言

var の再宣言についてサンプルコードとともに確認します。

// 初回宣言
var price = 100;
console.log(price);

// 再宣言
var price = 200;
console.log(price);

var の再宣言が可能である事が確認出来ました。

----- 出力結果 -----
100
200

let it be (あるがままに)とは

下記の表の通りになります。

宣言	意味	再代入	再宣言
let	let it be (あるがままに)	〇	×

再代入

let の再代入についてサンプルコードとともに確認します。

// 初回宣言
let price = 100;
console.log(price);

// 再代入
price = 120;
console.log(price);

let の再代入が可能である事が確認出来ました。

----- 出力結果 -----
100
120

再宣言

let の再宣言についてサンプルコードとともに確認します。

// 初回宣言
let price = 100;
console.log(price);

// 再宣言
let price = 200;
console.log(price);

let を使って同じ変数を再宣言している

----- 出力結果 -----
error TS2451: Cannot redeclare block-scoped variable 'price'.

constant (定数)とは

下記の表の通りになります。

宣言	意味	再代入	再宣言
const	constant (定数)	×	×

再代入

const の再代入についてサンプルコードとともに確認します。

// 初回宣言
const price = 100;
console.log(price);

// 再代入
price = 120;
console.log(price);

const で定義している変数に対して再代入が発生している

----- 出力結果 -----
error TS2588: Cannot assign to 'price' because it is a constant.

再宣言

const の再宣言についてサンプルコードとともに確認します。

// 初回宣言
const price = 100;
console.log(price);

// 再宣言
const price = 200;
console.log(price);

const を使って同じ変数を再宣言している

----- 出力結果 -----
error TS2451: Cannot redeclare block-scoped variable 'price'.