【Javascript】定数・変数の扱い方を徹底解説！

今回の記事は、

• Javascriptの定数の使い方を知りたい
• Javascriptの変数の使い方を知りたい
• 定数と変数がごっちゃになってしまう

というお悩みをお持ちの方に向けた記事になっています。

Javascriptの定数と変数については普段なんとなく使われている方も多いのではないのでしょうか？

それぞれの違いをきちんと把握しておかないと、思わぬところでバグが発生してしまいますので、この機会にもう一度確認しておきましょう！

定数の宣言方法

JavaScriptにおいて定数を定義する際にはconstを使用します。このconstは、JavaScriptの標準規格『ECMAScript』のバージョン2015にて追加されました。

まずはconstの特徴およびオブジェクトを宣言した際の挙動について、それぞれ順番に解説していきます。

constの特徴

では早速、constの特徴について確認していきましょう。constの主な特徴は以下の通りです。

• 一度宣言した変数に別の値を再び代入することができない
• 一度宣言した変数を上書きすることができない
• ブロックスコープである

どういうことか、実際に見てみましょう。

オブジェクトを宣言した際の挙動

constを使った例をそれぞれ順番に解説していきます。

• 正しい使用例
• エラーが起きる使用例1：再代入
• エラーが起きる使用例2：再宣言
• エラーが起きる使用例3：ブロックスコープ

正しい使用例

const title = ‘Hello World!’;
console.log(title);

コンソールに”Hello World!”と表示されます。続いて次の例を見てみましょう。

エラーが起きる使用例1：再代入

const title = ’Hello World!’;
title = ‘Let's Programming!!’

この場合、コンソールにエラーが表示されてしまいます。なぜなら、一度宣言した変数に別の値を再代入することができないからです。

エラーが起きる使用例2：再宣言

const title = ‘Hello World!’;
const title = ‘Let's Programming!!’;

こちらについても、実行結果がエラーとなります。constで一度宣言をすると、同じ変数で再度宣言することができないためです。従って、一度宣言した内容を上書きすることはできません。

エラーが起きる使用例3：ブロックスコープ

function example() {
  if (true) {
    const title = ‘Hello World!’;
  }
  console.log(title); // 同じ関数の中でもブロックスコープの外なのでエラーになる
}

console.log(title); // ブロックスコープの外なのでエラーになる

ブロックスコープとは、{}ごとに作られたメソッドの範囲のことです。constによって宣言された変数は、ブロックスコープの外で呼び出すことができません。従って、実行結果はエラーとなります。

なお、同じ関数の中にある場合についても結果は同様です。

また、あまり使う機会はないですが、const_castというキャストを使ってconstを削除することができます。しかし、使用するとプログラム内で意図しない動作を招く恐れがあるので、注意が必要です。

変数の宣言方法

JavaScriptの宣言で使用する変数は、定数であるconstの他にvarとletがあります。varは初期から存在していますが、『ECMAScript』のバージョン2015にて、constと同じタイミングでletが追加されました。

まずはvarの使い方を見ていきましょう。

varの特徴

varは、変数を再代入・再宣言することができます。さらにconstとは異なり、関数スコープであるという特徴を持っています。varを使った例を3つ紹介します。

• varの使用例1：再代入
• varの使用例2：再宣言
• varの使用例3：関数スコープ

varの使用例1：再代入

var title = ‘Hello World!’;
title = ‘Let's Programming!!’

この状態で変数を呼び出すと、Let’s Programming!!と表示されます。

varの使用例2：再宣言

var title = ‘Hello World!’;
var title = ‘Let's Programming!!’;

こうすることで、同じ変数名で再度宣言をすることができます。ただ、再宣言を行うことは推奨されていません。

なぜならバグの発生や、想定外のエラーが発生する可能性があるからです。さらに、コードの可読性を下げてしまうデメリットもあります。

varの使用例3：関数スコープ

function example() {
  if (true) {
    var title = ‘Hello World!’;
  }
  console.log(title);
}

関数スコープとは、関数（function）ごとに作られたメソッドの範囲のことです。varは、letやconstと比較すると、スコープの範囲が広い特徴を持っています。つまり関数内であれば、{}で括られていても、変数を呼び出すことが可能です。

varとletの違い

letもvarと同じく変数を定義する際に使用するのですが、letの場合、変数の値を再代入できますが、再宣言を行うことができません。

さらにvarとは異なり、ブロックスコープであることが大きな特徴です。その特徴から、ブロックスコープ内で最小限に範囲を抑えつつ、ループ処理などの変数処理を比較的安全に行うことができます。

定数と変数の使い分け

定数と変数について以下のとおりまとめました。

最後に、それぞれ3つの定数と変数の使い分けを考えてみます。

const

基本的に変数を定義する場合は、constを使うと良いでしょう。

constの特徴として再代入かつ再宣言を行えず、スコープの範囲が限られるなどの制約が多いとあまり良いイメージを持たれないかもしれません。

しかし制約が多い分だけ、予期しないバグの発生や、想定外のエラーを防ぐことができるので、安定したプログラムを作ることができます。

let

ループやカウント処理などを実装する際は、letを使いましょう。

letは値を再代入できるため、変数の情報を更新する処理に向いています。

さらに、varと比較して再宣言を行うことができず、constと同じブロックスコープという特徴を持っているので、プログラムをより安全に動作させることができます。

var

一方、varは最近の開発において使う必要はありません。

再代入かつ再宣言を行えるということは、致命的なバグやエラーを引き起こす可能性があるからです。

ただ、letやconstが追加される前に開発されたアプリケーションでは、今も使われている可能性があります。さらに、ネット上でプログラミングを解説した記事では、varを例にした解説がされているものもまだ残っています。

ですので、varは変数としてどのような特徴があるのか。それを理解しておくだけで良いでしょう。

最後に

さて、ここまでJavascriptにおける定数や変数の扱い方について解説してきましたがいかがでしたか？

普段なんとなく使用していた const/let/var も、こうして体系的に整理してあげると場面場面での使い分けに役立てられるかなと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。