JavaScript

JavaScriptの変数(let)と定数(const)はどっちを使うべき?

JavaScriptの変数・定数といえば「let」と「const」ですが、こちらの二つについて使い分け出来ているでしょうか?

この記事では、この二つの変数・定数の使い分けについて解説します。

変数(let)と定数(cosnt)について

まずは、変数letと定数constについて簡単に解説をすると、どちらも数値や文字列などのデータの値に名前を付け、繰り返し使うためのものです。

基本的な構文は、「let(const) 変数(定数)名 = 値」というような記述となります。

let test = "変数です”;

const test2 = "定数です”;

どちらも値を代入し繰り返し使うという点では同じですが、2つは「再代入が出来るか出来ないか」という点で使用方法が異なります。

変数(let)は再代入が可能

変数letは一度値を代入しても、あとで値を変数することが可能な変数です。

下記が実際の例ですが、「testStr」に「apple」という値を代入した後、「banana」と代入し直すことで、それ以降は、「testStr」には「banana」という値に変わっていることがわかります。

let testStr = "apple";

//コンソールに「apple」と出力されます。
console.log(testStr);

testStr = "banana";

//コンソールに「banana」と出力されます。
console.log(testStr);

定数(const)は再代入が不可能

一方、定数(const)は、再代入が不可となります。

下記が実際の例ですが、「testStr」に「apple」という値を代入した後、「banana」と代入し直していますが、「Assignment to constant variable」とエラーが出力され、際に

const testStr = "apple";

//コンソールに「apple」と出力されます。
console.log(testStr);

//コンソールに「Assignment to constant variable」とエラーが出力されます。
testStr = "banana";

定数(const)を使える時は定数を使うが原則

上記の2つの例の様に、2つは「再代入が出来るか出来ないか」という点で使用方法が異なることがわかります。
それでは、実際の記述をする際にどのように使えばよいのでしょうか?

結論は、「定数を使える時は定数を使い、定数が使えない場合は変数を使う」となります。

正直に言ってしまえば、定数constが使えるケースは、全て変数letに置き換えることが可能です。
しかし、以下の2つの理由から定数を使えるところは使うのべきです。

  1. constを使うことで可読性が向上する
  2. constを使うことでバクの防止をすることができる

定数を使うことで可読性が向上する

定数constは、再代入ができないため、コードを読む際に常に同じ値だと認識して読むことが可能ですが、変数letの場合、どこかで値が変更される可能性があると考えながらコードを読む必要があり、コードを読む側からすればかなり負担です。

変数letを使う場合に可読性が低くなるため、値に変更がない場合などは定数constを使用するべきです。

定数を使うことでバクの防止をすることができる

定数constは、再代入ができないため、万が一、間違えて再代入した場合にはエラーとなります。

逆に変数letは、再代入が出来るため、作成者が意図しないところで、値に再代入をしてしまい、バグとなってしまう可能性があります。

こうしたことからも、出来るだけ定数constを使うべきです。

変数(var)について

変数には、もう一つ「var」というものがあります。

基本的な、使い方は、letと同じだと思っていただいて大丈夫なのですが、varには、同じ名前の変数を再度定義できてしまうという問題点があります。

let test = "Hello World";

//エラーとなる
let test = 5;

var test = "Hello World";

//エラーとならない
var test = 5;

このように、varの場合、同じ変数名でも再度定義出来てしまうため、思わぬバグが発生することがあります。

なぜ、「var」と「let」と似たような用途の変数が存在するかと言いますと、実は、JavaScriptは元々値を定義する宣言は「var」しかありませんでした。

しかし、上記のように「var」には、いくつか問題点があり、それを解決する手段として2015年のJavaScriptの改善(ECMAScript 2015)で、「const」と「let」が追加されたためです。

従って、今後学習されるのであれば、基本的には、「const」と「let」を利用し、「var」は使用しないようにしましょう。