👨‍👦‍👦

[TypeScript] ver/let/constの違い

2023/06/22に公開

はじめに

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

結論

解説

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);
----- 出力結果 -----
error TS2451: Cannot redeclare block-scoped variable 'price'.

constant (定数)とは

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

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

再代入

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

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

// 再代入
price = 120;
console.log(price);
----- 出力結果 -----
error TS2588: Cannot assign to 'price' because it is a constant.

再宣言

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

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

// 再宣言
const price = 200;
console.log(price);
----- 出力結果 -----
error TS2451: Cannot redeclare block-scoped variable 'price'.
GitHubで編集を提案

Discussion