はじめに

こんにちは、SHIFTのITソリューション部に所属している新卒1年目のHoribeです。現在は開発支援プロダクト推進部に一時在籍し、プロダクト開発に取り組んでいます。

JavaScriptで変数を宣言する場合、const・let・varの3つを使うことができます。変数を宣言する際はできる限りconstを使うべきだと教わったため、これまで主にconstを用いてきました。constを使うべき理由はそれとなく知っていたものの、きちんと理解しておきたかったので今回改めて調べてみることにしました。

本記事では、JavaScriptにおける変数宣言はどのような仕様なのか、なぜconstを使うべきなのかについてまとめます。

const・let・varの違い

元々JavaScriptの変数宣言にはvarしか存在しておらず、ECMAScript 2015でconstとletが追加されました。このことからわかるように、constとletは基本的にはvarの上位互換のような仕様となっています。

それぞれの変数宣言を「再宣言の可不可」「再代入の可不可」「可変/不可変」の3つの観点で比べてみます。表にまとめると以下のようになります。

それでは1つずつ見ていきます。

再宣言の可不可

const・letは再宣言できず、varのみ再宣言できます。
同じ変数名で二重に宣言できてしまうvarは、意図しないバグを生んでしまいかねません。

// constの場合
const dogName = 'ベン';
const dogName = 'エル'; // エラーになる <- 再宣言できない
console.log(dogName);

// letの場合
let catName = 'チチ';
let catName = 'ルン'; // エラーになる <- 再宣言できない
console.log(catName);

// varの場合
var penguinName = 'ペン';
var penguinName = 'ギン';
console.log(penguinName); // ギンと出力される <- 再宣言できる

再代入の可不可

let・varは再代入できますが、constは再代入できません。

// constの場合
const dogName = 'ベン';
dogName = 'エル'; // エラーになる <- 再代入できない
console.log(dogName);

// letの場合
let catName = 'チチ';
catName = 'ルン';
console.log(catName); // ルンと出力される <- 再代入できる

// varの場合
var penguinName = 'ペン';
penguinName = 'ギン';
console.log(penguinName); // ギンと出力される <- 再代入できる

可変/不可変

const・let・varの3つとも可変です。

let・varは再代入可能なので可変であることは自明ですが、再宣言・再代入ともに不可なconstが可変であることは疑問に思った方も多いのではないでしょうか？

以下のコードはconstが可変である一例です。

const animals = ['dog', 'cat', 'penguin'];

animals.push('bear');
console.log(animals); // ['dog', 'cat', 'penguin', 'bear']と出力される <- 可変

animals.pop();
console.log(animals); // ['dog', 'cat', 'penguin']と出力される <- 可変

実は、constは再代入ができないだけで書き換えることは可能な場合があります。これにはデータ型が関わっています。

JavaScriptのデータ型は、プリミティブ型とオブジェクト型の2つに分類することができます。

プリミティブ型は数値や文字列、真偽値などの基本的な値の型です。
プリミティブ型の変数には値そのものが格納されています。値に対してラベルを貼り付けているようなイメージです。

対して、オブジェクト型は配列、オブジェクトなどプリミティブ型以外のすべての型を指します。オブジェクト型の変数には、値そのものではなく値のアドレスが格納されています。値が入った箱に対してラベルを貼り付けているようなイメージです。

前述した再代入というのは、このラベルを別の値や箱に貼り替える行為のことです。letとvarで宣言した変数は自由に貼り替えることができますが、constでは制限されています。

しかし、constで制限されているのはあくまでラベルを貼り替えることであり、オブジェクト型のようにラベルを張り替えずに、つまりアドレスを変更せずに箱の中身を入れ替えることは可能です。

上記の例では、animalsという箱にラベルを貼ったままbearという値を出し入れしていたため、エラーが出ませんでした。アドレスの中身を変更しているだけで、アドレス自体は最初のまま変わっていません。

これが再宣言・再代入ともに不可なconstが可変である理由です。

まとめ

ここまで「再宣言の可不可」「再代入の可不可」「可変/不可変」の3つの観点で変数宣言について見てきました。

一般的にconstを使うべきと言われる理由は、再宣言と再代入が共に不可であるからです。一度宣言されてしまえばその変数にどんな値が入っているのかわかるため、可読性が向上します。

letやvarで宣言してしまうと、その後どこかで値が書き換わっていないか気にしながらコードを追う必要があり、かなりの負担になってしまいます。

また、不慮のバグを防ぐ効果もあります。constで宣言していれば、意図せず再代入してしまってもエラーとなるためミスに気づくことができます。
一方、letやconstだと再代入ができてしまうため、思わぬところでバグになってしまう恐れがあります。

ただし、前述したようにオブジェクト型の場合には、配列に要素を追加したりオブジェクトにプロパティを追加することが可能です。あくまで可変であることに注意する必要があります。

したがって、基本的にはconstを使って変数宣言し、どうしても再代入が必要な場合のみletを使うのが良いと思います。varを使うメリットはありません。

終わりに

今回の記事では、JavaScriptの変数宣言とconstの挙動についてまとめました。

ベストプラクティスとされている書き方を学ぶことはもちろん大切ですが、なぜそうなっているのかの理屈まで調べることでより理解が深まると感じました。
JavaScriptを使っている方、特に初学者の方の参考になれば幸いです。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/