Zenn
🌟

JavaScriptにおけるconst, let, varによる宣言の違い

2022/06/26に公開
JavaScript
JavaScript
変数
変数宣言
tech

この記事でとかletとかvarとか結局どれがどう違くてどれを使えばいいの？ってなる人が少しでも減ればと思います。
使用するコードはgitに用意しているので適宜コピーして試してみてください。
URL：https://github.com/Souru-Hishinuma/variable

前提知識・対象者

・JavaScript初学者
・JavaScriptの基礎をある程度理解しているが変数宣言を雰囲気で済ませてしまった方
・JavaScriptの学習を終えてこれからフレームワークを用いた高度なJavaScriptの学習にステップアップを考えている方

1.varを用いた変数宣言

まず、ES6以前の変数宣言から再確認していきましょう。

var value = "var";
console.log(value);

value = "var上書き";
console.log(value);

var value = "再宣言";
console.log(value);

consoleの値を確認するため下記のHTMLを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script src="./index.js"></script>
</body>
</html>

ディベロッパーツールを使用して確認してみましょう

このようにvarを用いると変数の値の変更や再定義までエラーが起きず実行されてしまうのでプロジェクトの規模が大きくなりコードの量が長くなってくると、意図しない変更が反映されてしまう可能性があるため現在は利用を推奨されていません。

2.letを用いた変数宣言

次にletを用いた変数宣言を見ていきましょう。

let value2 = "let";
console.log(value2);

value2 = "let上書き";
console.log(value2);

ディベロッパーツールで確認しましょう。

letを用いるとvarのように変数の値を上書きすることができます。

let value2 = "再宣言";
console.log(value2);

ですが、上のように再宣言を行おうとすると、、、

このようにエラーが出てしまい、変数の値を出力することができませんでした。
このようにvarとは異なり、再宣言はできないのがletです。変数を宣言する際には現在はこちらを使用することが主流になっています。

3.constを用いた変数宣言

最後にconstを用いた定数宣言を見ていきましょう。

const value3 = "const変数";
console.log(value3);

constを用いるとvarやletのように変数の定義を行うことができます。
ディベロッパーツールで確認しましょう。

無事出力できていることがわかります。

value3 = "const上書き";

しかし、値の上書きをしようとすると、、、

このようにエラーが出てしまいました。
constを使用すると最初の宣言以外でエラーが出てしまうので一番保守性が高いです。
値を変更する予定がないものについてはconstを利用するようにしましょう。
もちろん、letでも行えなかった再宣言もすることができません。

まとめ

JavaScriptの変数宣言において
const > let > varの順に保守性が高いことを説明しました。
最後にそれぞれができることをまとめていきます。
const：最初の変数宣言のみ可能
let：最初の変数宣言と値の変更が可能
var：最初の変数宣言、値の変更、再宣言すべてが可能
まあとりあえずよほどのことがなければvarを使わないようにしましょうねという話です。
お疲れさまでした！

Discussion