【JavaScript入門】constで定数を宣言する！letやvarとの違いも詳しく解説

JavaScriptでは、変数の宣言時に使用できるキーワードがいくつか存在します。
そのうちの１つが、constです。

今回は、constを使って変数を宣言する方法について、詳しく解説をしていきたいと思います。

javascriptのconstとは？

constは、JavaScriptで変数を宣言する際に使用するキーワードのうちの１つです。

JavaScriptには、変数の宣言時に使用可能な以下の３つのキーワードが存在します。
使用するキーワードによって、変数の再宣言や再代入の可否と、スコープ (変数の参照範囲) が異なります。

• var … 再宣言・再代入可能、関数スコープ
• let … 再宣言不可、再代入可能、ブロックスコープ
• const … 再宣言・再代入不可、ブロックスコープ

再宣言と再代入のどちらも不可とするため、使用可能なキーワードの中で最も保守性が高いのがconstの特徴です。

また、上記の特徴から、他のプログラミング言語における定数に近い形で変数を宣言することができます。
（JavaScriptのconstは配列などの中身を変更することができるため、厳密には定数とは異なります）

constで変数を宣言する

constを使用して変数を宣言する方法について見ていきましょう。

基本構文

まずは基本構文から解説していきます。
constを使用して変数を宣言する際は、以下のようにコードを記述します。

【基本構文】

const 変数名 = 値;

constで宣言した変数は値の再代入ができないため、宣言時に必ず値を指定する必要があります。

constの基本的な使い方

constを使用した際の実際の動きを、以下のサンプルコードで見てみましょう。

【サンプルコード】

const Pi = 3.14

function circumference(diameter){
    return diameter * Pi
}

console.log(circumference(100));

【実行結果】

314

上記のサンプルでは、任意の値で円周を求める関数を作成し、その実行結果をコンソールに表示しています。
計算を行う上で必要な２つの値のうち、円周率は数値が固定となるため、constを使って後から変更されることがないように宣言しています。

実際に、constで宣言したプリミティブ型の変数に再代入しようとすると、以下のエラーが発生します。

【サンプルコード】

const Pi = 3.14

Pi = 3;

【実行結果】

TypeError: Assignment to constant variable.

記述ミスなどによって必要のない変更を加えられてしまうリスクが下がるため、基本的には constで宣言することをオススメします。

なお、配列などのオブジェクト型の場合は、参照の関係により要素の値を変更することは可能となっています。
ただし、別の配列で上書きするといったような、オブジェクトそのものを再代入することはできません。

【サンプルコード】

const sampleArray = [1, 2, 3];

// 要素の値を変更することは可能
sampleArray[0] = 3;

// オブジェクト単位での再代入は不可
sampleArray = [3, 2, 3];

他の変数宣言の方法とconstとの違い

変数宣言に使用できるキーワードはconstを含めて全部で３つあると冒頭で解説しました。
このうち、letとvarのそれぞれについて、constとの違いを具体的に確認していきましょう。

letで変数を宣言する

letで変数を宣言した場合と、constで変数を宣言した場合の違いは、再代入か可能であるか否かとなります。

letと constはどちらも再宣言不可、かつ変数のスコープがブロックスコープとなるキーワードです。
そのため、使い分けを行う際は、再代入を可能とする必要があるかどうかに条件を絞ることができます。

letを使用するケースで特に多いのは、for文のカウンター変数を宣言するパターンです。
カウンター変数はループごとに値が再代入されるため、constを使用することはできません。

【サンプルコード】

const sampleArray = [1, 2, 3];

// constは使えないため、letを使用する
for(let i = 0; i < 3; i++){
    console.log(sampleArray[i]);
}

【実行結果】

1
2
3

上記のような constが使用できないケースでは letを、そうでない場合は constと使い分けるといいでしょう。

なお余談ですが、for…in文や for…of文の場合はループごとに新たにブロックスコープが作られるため、constでの変数宣言が可能となっています。

【サンプルコード】

const sampleArray = [1, 2, 3];

// この場合はconstが使える
for(const num of sampleArray){
    console.log(num);
}

varで変数を宣言する

varは、３つのキーワードの中で最も制限が緩いキーワードとなります。
変数への再代入だけでなく、constやletでは不可能な変数の再宣言も行うことができます。

【サンプルコード】

const sampleConst = 0;
// 再宣言不可のためエラーになる
const sampleConst = 1;

var sampleVar = 0;
// 再宣言してもエラーにならない
var sampleVar = 1;

また、変数のスコープが constや letとは異なり、関数スコープとなっているのも特徴の１つです。

変数のスコープは大まかに、グローバルスコープとローカルスコープの２種類に分けられ、その内のローカルスコープ側に分類されるのが関数スコープとブロックスコープです。
ローカルスコープは、対応するスコープ内で宣言した変数をローカル変数とし、スコープ外からアクセスできないようにします。

ブロックスコープが適用される constと letは、関数内で変数を宣言した場合と、if文などのブロック内で変数を宣言した場合のどちらもローカル変数として扱われるため、ブロック外で宣言した変数を呼び出そうとするとエラーとなります。

【サンプルコード】

const sampleConst = 10;

for(let i = 0; i < 3; i++){
    // ブロック内のみ有効のため、既存の変数名と同じ名前で宣言できる
    const sampleConst = i;
    const blockVal = i;
}

// ブロック内で宣言した変数は外での呼び出しはできない
console.log(blockVal);

【実行結果】

ReferenceError: blockVal is not defined

一方、varは関数スコープであるため、関数ではない if文などのブロック内で変数を宣言した場合、スコープは適用されずグローバル変数と同じ扱いとなります。
ブロック外からも変数の呼び出しが可能である他、既存の変数と同名の変数を宣言した場合は再宣言したものと見なされます。

【サンプルコード】

var sampleConst = 10;

for(let i = 0; i < 3; i++){
    // 既存のメソッドと同名の場合、再宣言扱いとなる
    var sampleConst = i;
    var blockVal = i;
}

console.log(sampleConst);
// ブロック内で宣言した変数も呼び出し可能
console.log(blockVal);

【実行結果】

2
2

上記の仕様上、varはコードミスがあってもエラーが発生しない場合がほとんどのため、間違いに気付かないままに想定外の動作を引き起こすリスクが最も高いキーワードとなっています。
そのため、変数の宣言は constと letの２つのみで使い分けるようにすることをオススメします。

constとアロー関数式で関数を宣言する

変数には、数値や文字列などの値だけでなく、関数を代入することもできます。
その際に便利なのが、アロー関数式です。

アロー関数式とは、関数の記述を簡潔に行うことができる記法のことを言います。

【サンプルコード】

const sampleFunc = () => console.log("Hello World!");

上記のコードのうち、「() => console.log(“Hello World!”)」 と記述されている部分がアロー関数式です。
複雑な処理を行う関数の記述には向いていませんが、内容に応じてアロー関数式を活用することで、より簡潔で見やすいコードにまとめることができます。

ただし、アロー関数式を使用する際は、ホイスティング（巻き上げ）が行われない点に注意が必要です。

ホイスティングとは、変数や関数が定義されるより前に、メモリに配置される挙動のことを言います。
例えば、以下のようなケースです。

【サンプルコード】

sampleFunc();

function sampleFunc(){
    console.log("Hello World!");
}

【実行結果】

Hello World!

関数の宣言よりも先に呼び出しが行われていますが、ホイスティングによってエラーが発生することなく実行されています。

一方、アロー関数式は関数の宣言ではなく、変数に代入する値として扱われるため、ホイスティングは適用されません。

【サンプルコード】

console.log(sampleFunc);

const sampleFunc = () => "Hello World!";

【実行結果】

ReferenceError: Cannot access 'sampleFunc' before initialization

アロー関数式を使用する際は、ケースにより通常の関数宣言と挙動が異なる場合がある点に気を付けてください。

まとめ

今回は、constを使って変数宣言する方法について解説しました。
使うキーワードによって変数の挙動が変わるため、状況に応じて上手く使い分けしていきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。