JavaScript初心者必見!constとは?基礎の基礎を解説!

変数の宣言は色々な書き方がありますが、その中でもちょっと特殊なのが、あとから値を書き換えたくない変数を作るconstというものです。

constなんて初めて聞いた…
どうやって使うんだろう…
 

という疑問をお持ちの方、今回の記事は必見です。
変数の宣言方法のひとつ、constについて解説していきます。

下記の流れで、constについて理解を深めていきましょう。

【基礎】変数とは
【基礎】constとは
【基礎】constの使い方
【発展】他の宣言方法との違い

変数を使いこなすには、constをしっかり理解する必要があります。
この記事でバッチリ学んでいってくださいね!

変数とは?

変数とは、プログラミングで使われる、値を入れておくための箱です。

同じ値を使いまわしたいとき、いちいち書いたりするのは面倒ですよね。
または、途中で値が変わってもちゃんと引き継いだ状態で使いまわしたい時なんかに使われます。

変数の宣言方法はいろいろありますが、今回解説していくのは、その中でも値の書き換えを禁止した状態の変数を宣言できるconstというものです。

定数を宣言するconstとは?

constとは値書き換えを禁止した変数を宣言する方法です。

例えば同じ値を使いまわす場合、うっかり途中で値が書き換わってしまったなんて経験はありませんか?
それに気づかずプログラムを進めていくと、思わぬバグの原因になってしまいます。

そんな時に便利なのが、constです。
事前に値を変えないことがわかっている場合は、constを使うようにしましょう! 

constで宣言する方法

次に、具体的な使い方について説明します。

constは以下のように、constを先頭につけて変数を宣言します。

const 変数名 = 変数に入れる値;

変数名は書き換え不可の変数であることがわかるように、大文字 + 「_」(アンダーバー)で設定するのが一般的です。

変数宣言と同時に値を入れる必要があることに注意して下さい。

constの使い方

次に、constの具体的な使い方のサンプルをご紹介します!

サンプルコード:

const TAX_RATE = 0.08;//消費税率

function test(){
    var cost = 1000; //単価
    var num = 2;     //数
    var taxCost;     //消費税額
    var totalCost;   //合計金額
    
    //消費税金額計算
    taxCost = cost * TAX_RATE
    
    //合計金額を計算
    totalCost = (cost + taxCost) * num;
    console.log(totalCost);
}

test();

実行結果:

2160

この例では、TAX_RATEに消費税率を入れ、合計金額をログに出力しています。

試しに、途中でTAX_RATEの値を再代入してみましょう。

サンプルコード:

const TAX_RATE = 0.08;//消費税率
const TAX_RATE = 0.05;//再代入

function test(){
    var cost = 1000; //単価
    var num = 2;     //数
    var taxCost;     //消費税額
    var totalCost;   //合計金額
    
    //消費税金額計算
    taxCost = cost * TAX_RATE
    
    //合計金額を計算
    totalCost = (cost + taxCost) * num;
    console.log(totalCost);
}

test();

実行結果:

SyntaxError: Identifier 'TAX_RATE' has already been declared〜

エラーが表示されちゃいましたね。

このように、constが途中で上書きされると、エラーを吐いて教えてくれるのです。

つまり消費税率のように、処理の途中で値を変えたくない場合は、constを使うとミスが減ります
これは活用していきたいですね。

変数宣言の種類

変数の定義方法は、const以外にもvarletなどがあります。

どんな違いがあるのか、確認しておきましょう!

var

一番基本的な変数の宣言方法です。
関数の中で宣言すると、その関数の中でしか使えないローカル変数として宣言することができます。

var item = 0; //グローバル変数
 
function test() {
    var item = 10; //ローカル変数
    console.log(item);
}
 
test();
console.log(item);

実行結果:

10
0

上記の例を見ると、1回目のconsole.logでは10が表示されますが、2回目のconsole.logでは0のままになっていますね。
このように、変数を宣言する位置によって、その変数の適用範囲が変わってくるのです。

varについては、下記の記事でもっと詳しく解説しています。
こちらも併せて確認してみてください。

>>変数定義の基礎!varとは?

let

letはvarと同じように変数を宣言するときに使います。

しかしvarとはちょっと違い、letを使うと変数のスコープがブロックに限定されます。

次のプログラムで確認してみましょう。

let num = 123;
console.log(num);
{
    let num = 456;
    console.log(num);
}
console.log(num);

実行結果:

123
456
123

プログラムの実行結果から、変数のスコープがブロック内に限定されていることが確認できました。

letの詳しい使い方については、下記の記事でもっと詳しく解説しています。
こちらも併せて確認してみましょう。

>>変数定義の基礎!varとは?

3つの違いは?

var、let、constの違いをまとめると、下記のような感じです。

var:変数のスコープが関数内
let:変数のスコープがブロック内
const:最初の宣言から値を変更させない

どれも同じ変数の宣言ではありますが、それぞれの特徴があることがわかりますね。

うまく使い分けていきましょう!

こんな時はconstを使おう!

先ほどの例のように、消費税率など値を変更したくない場合のみconstを使うのが推奨されています。

ずっと同じ値を使い続けるならば、const一択な訳です。

途中で値が変わることを想定しているならば、varletをうまく使い分けるようにしましょう。

まとめ

今回は、constの使い方について解説しました。

constを使うことで値を変更したくない変数を、誤って書き換えるミスを減らすことができます。

使い方も簡単ですので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説