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

今回の記事は、

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

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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

定数の宣言方法


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

定数と変数の使い分け

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

変数名再代入再宣言スコープの種類
var関数スコープ
letブロックスコープ
constブロックスコープ

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

const

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

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

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

let

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

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

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

var

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

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

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

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

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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