JavaScriptの変数と定数
JavaScriptの変数の宣言について、まとめてみました。
１．変数とは
例えば中学校での数学の時間に
a=1
b=2
c=a+b
問：cの中の値はいくらでしょう？
答：
とあったとき答え3ですね。
aやbやcを「文字」とか「変数」とか説明を受けたかもしれません。「変数」は箱だと例える人がいます。箱の中にあらゆる数字(や文字など)を入れ替わり代入することで、プログラムの汎用性が広がります。
では、上の式をプログラムっぽくしてみます。
「変数」について、a,b,cといったものは予め用意してくれていません。箱を作るのにリソース（＝メモリ）が必要だからです。
ですから変数を作る作業が必要です。これを「変数の宣言」と言います。
２．従来の変数の宣言「var」
変数のことを「variable」といいます。
例えば変数「a」を宣言するには、「変数のaを作る」→「variable a」→variableは長いので前３文字で「var a」となります。
プログラムのおしまいは「;(セミコロン)」をつけますので空っぽの「変数a」の宣言の式としては次のようになります。
var a;
ですので、最初の式は次のように置き換えられます。
var a=1
var b=2
var c=a+b
document.getElementById("output")=c;
「3」が出力されます。「=(イコール)」はJavaScriptでは等しいではなく「右のものを左に代入する」という意味です。
従来の変数はこれだけ覚えておけばOKでした。ところが・・・
３．変数の宣言「let」
変数宣言「var」から「let」に移行中です。
例えば、varをletにそのまま置き換えてみましょう。
let a=1
let b=2
let c=a+b
document.getElementById("output")=c;
「3」が出力されます。ではvarとletとの違いはなんでしょう。
var は再宣言ができますが、letは禁止されています。例えば
var a=1;
var a=2;
document.getElementById("output") = a;
「2」が出力されますが、
let a=1;
let a=2;
document.getElementById("output") = a;
aの値は出力されず、デベロッパツールにエラー(Uncaught SyntaxError: Identifier 'a' has already been declared)が表示されます。
例えば、複数人でプログラム開発をしている時、
・Aさんが変数aの値を1として、
・1万行下でBさんがAさんが変数aを指定しているのを知らずに、
新たに変数aの値を2とすると、
誤った値「2」が表示されます。それはAさんが困ります、むしろエラーになったほうが「なんだなんだ？」とわかってよいですね。
ちなみに「let」というのは、「aを1にする」を英文では「let a be 1.」と書きます。「〜を〜にする」という動詞からだと思われます。
４．定数の宣言「const」
「const」は定数(constant variable)。「宣言後に勝手に値を変えられると困るような変数」に使用します。また宣言時には必ず値を代入します。例えば
①円周率の値が変えられたら困るから
const PI = Math.PI;
②取得した要素が入替わったら困るから。
const element1 = document.getElementById("output1");
③NAKASHIMAという「もの」は決して変えたくないから。
const NAKASHIMA = {weight:65,height:185,age:35};
ただしそのプロパティ（体重、身長、年齢のこと）の値は変更可能です。
また「let」と同様に再宣言はできません。
const a = 1;
const a = 2;
document.getElementById("output") = a;
aの値は表示されず、開発者ツールのconsoleにエラー(Uncaught SyntaxError: Identifier 'a' has already been declared)が表示されます。
ちなみに、constは定数ですから、次のように値を変更することもできません。
const a = 1;
a=2;
document.getElementById("output") = a;
aの値はやはり、エラー(Uncaught TypeError: Assignment to constant variable.)となります。
また、定数は宣言した時に同時に値を代入しなければなりません。ですので、次の命令文はNGです。
const a;
a=2;
document.getElementById("output") = a;
５．スコープ
letとconst vs varの宣言では「スコープ」が関係してきます。
スコープとは関数やif文で使用するブロック「{〜}」の影響範囲と思ってください。
・varは、宣言した「{〜}」の中外で有効できますが、
・ letやconstは「{〜}」の中でのみ有効です。
(1) 例えばvarの場合
var a=1; //① 値を1に設定
function fn1(){var a=2;} //② {〜}内で2にした
fn1();
document.getElementById("output") = a; //①に②が影響して2になる
{〜}の外でも有効なので、「2」が表示されます。
(2) これが、letの場合だと
let a=1; //① 値を1に設定
function fn1(){let a=2;} //② {〜}内で2にしたが、{〜}内でのみ有効
fn1(); //③ 関数②の実行
document.getElementById("output") = a; //①に②が影響せず1になる
「1」が表示されました。{〜}の中で変数宣言すると、それは{〜}の外で変宣言したlet変数とは、別のlet変数になり{〜}の中でのみ有効となります。
これらもやはり、使用できる範囲を狭めて、思わぬところで値が変わることを防止するためのようです。
ちなみに、{〜}の外で宣言したものはグローバル変数と呼ばれ、{〜}内にも影響します。
let a=1; //① 値を1に設定
function fn1(){a=2;} //② {〜}内でグローバル変数を2にした
fn1(); //③関数②の実行
document.getElementById("output") = a; //①に②が影響して2になる
「2」が表示されます。ちなみに、{〜}内で宣言、影響するものをローカル変数といいます。
よく例えに出すのですが、「壁の外で生まれた巨人(フローバル変数)は壁の中に侵入できる、壁の中で生まれた人類(ローカル変数)は壁の外に出られない」でたら・・・と連想してもいいかもしれませんね。
６．どれを使用すべきか
現在の市販の教科書や過去の参考サイトでは、varを使用しているケースも多くありますので「var」で学びましょう。そして、変数は「let」、定数は「const」も学んでいきましょう。
使い方については、例えば、
・プログラム全体に影響する変数は定数「const」として値を代入して宣言する。例えば、要素取得して得られたものや、円周率の値など。
・局所的なもので値が変わるものは変数「let」として宣言する。
・「var」は知識として過去のプログラムを理解する際に思い出す。
といったところでしょう。ただ、変数の使い分けについては様々な意見が公開されていますので、興味のある人はググってみてください。
【PR】
①初心者向けHTML5対面教室（東京・大阪）
②HTML5の検定にチャレンジ！（オンライン）