【JavaScript】変数(定数)の宣言と種類～let const var～

多くのプログラミング言語で利用される変数や定数の宣言方法や種類ごとの仕様の違いやルールについてご紹介していきます。

変数(定数とは)

変数や定数の概念についてはJavaScriptだけではなく他のプログラミング言語と同じものになるのでこちらで覚えておくとほかの言語を学習する際にも応用が利きますのでぜひしっかりと身につけましょう。

変数(定数)とは文字列や数値などのデータに固有の名前をつけることで、繰り返し利用できるようにする機能のことです。

よく変数の説明の際に用いられる例としては箱からの出し入れというものがあります。

例えば、犬という名前の変数(箱)に下記の画像の通りに柴犬を入れたとします。

すると、いつでも犬という名前の変数を呼び出すだけで箱にしまわれてしまった柴犬を呼び出すことができます。

上記を例に変数宣言で覚えておきたい用語は以下の通りです

また、変数を定義するには『この文字列は変数です』というのをJavaScript側に理解させる必要があるため、特定のキーワードを使用した宣言を行う必要があります。

これは各言語によって異なるため本記事ではJavaScriptで利用できる変数宣言にフォーカスして紹介していきます。

JavaScriptで利用できる変数(定数)の宣言と使い方

JavaScriptで利用できる変数(定数)の宣言方法には3種類のキーワードがあります。若干の仕様は異なりますが、変数の宣言と値代入のルールには共通部分が多くあります。

変数の宣言方法

宣言キーワード 変数名 = 初期値

代入できる値は下記の4種類

• 数字
• 文字列
• 配列
• オブジェクト

値の代入方法

//数字  そのまま
変数名 = 123

//文字列  ダブルクォーテーションで囲う
変数名 = "柴犬"

//配列 
coming soon

//オブジェクト
coming soon

それではそれぞれの個別仕様についてご紹介していきます。

let 再代入が可能な変数

letは再代入が可能な変数の宣言方法です。変数宣言の際には下記のように先頭に記述して変数名、代入演算子(＝)、代入する初期値の順で記述していきます。

宣言方法1・・・宣言と初期値の代入を同時に行う

let 変数名 = 初期値;

もしくは、下記のように2列に分けで宣言することも可能です。値を格納されていない変数は自動的に値が未定義であることを表す’Undefined’となります。

利用する際には、値を代入することを忘れないようにしましょう。

宣言方法2・・・宣言と初期値の代入を別々に行う

let 変数名;
変数名 = 初期値;

宣言方法3・・・複数の変数を一括して定義を行い、初期値を代入する

let 変数名1 = 初期値1,
    変数名2 = 初期値2;

(,)カンマで区切ることによって複数の変数を一度にまとめて宣言することもできる。

letは再代入で値の上書きが可能です。何度でも値を上書きして再利用することができます。

let dog = "柴犬";
    dog = "パグ";
    dog = "ダックスフンド";
console.log(dog);

“console.log()”は変数の中身を出力することができる関数です。こちらに変数のdogを渡すことで中身を確認することができます。

上記の例では再代入が2回行われ、最終的に出力される値は最後に代入した文字列”ダックスフンド”です。

再代入を使用する際の注意点としては、変数の宣言時に利用したletを記述する必要はないということです。

変数の宣言時のみletを記述して再代入の際には『変数名+再代入する値』のみで書き換えが可能となります。

const 再代入ができない変数(定数)

constは再代入できない変数の宣言方法です。そのような変数のことを一般的には定数と呼ばれます。記述方法は前述したletと同様の書き方になりますが、定数の宣言と初期値の代入を分けることができません。

必ず定数の宣言と初期値の代入を同時に行う必要があることに注意してください。

宣言方法1・・・宣言と初期値の代入を同時に行う

const 定数名 = 初期値;

宣言方法2・・・複数の定数を一括して定義を行い、初期値を代入する

const 定数名1 = 初期値1,
      定数名2 = 初期値2;

(,)カンマで区切ることによって複数の定数を一度にまとめて宣言することもできる。

再代入ができないことに注意

const dog = "柴犬";
      dog = "コーギー";  //エラー発生！
//エラーメッセージ
Uncaught TypeError: Assignment to constant variable.

上記のように既に宣言して初期化した定数に再度新しく値を代入しようとするとエラーが発生してしまいます。

一般的に変数への再代入はバグを発生させやすい要因として認知されています。

そのことから「変数の値は最初に定義した値と常に同じ」というルール(参照透過性といわれています)を元に定義するようにしましょう。

定義した変数に対して値を再代入する必要がない場合は、constで定数宣言することを推奨します。

ここからは余談ですが、constは多くの人から”定数”と言われていますが、厳密には定数ではありません。

本記事でも統一して一般的な認識から”定数”として説明しましたが、正確には代入したものを変更できない変数です。

この知識は特に覚える必要もありませんが、頭の片隅にでもそっと置いておいていただけると幸いです。

Var 再代入が可能な変数(letとほぼ同じ)

Varはlet同様に再代入が可能な変数宣言です。仕様自体もletとほとんど同じになります。

宣言方法1・・・宣言と初期値の代入を同時に行う

var 変数名 = 初期値;

宣言方法2・・・宣言と初期値の代入を別々に行う

var 変数名;
変数名 = 初期値;

宣言方法3・・・複数の変数を一括して定義を行い、初期値を代入する

var 変数名1 = 初期値1,
    変数名2 = 初期値2;

(,)カンマで区切ることによって複数の変数を一度にまとめて宣言することもできる。

varと他の変数宣言(let,const)との違いと注意点

varとそのほかの変数との違いについてご紹介していきます。

一昔は最も広く利用されていた変数宣言だったvarですが、ある問題点があったため最近ではほとんど利用されることは無くなりました。

その問題点とはvarで変数宣言された変数名は再定義できてしまうということにあります。

どういうことかというと通常一度定義された変数名と同じ変数名を定義して利用することができません。

同じ名前の変数が複数存在してしまうと何が格納されているのか解らなくなるだけではなくお互いの再代入で値を上書きしてしまいます。

それによってバグの原因となる可能性が高いからです。

比較的最近実装された宣言であるletやconstで宣言されると同名の変数が既に存在した場合にはエラーを表示してくれます。

ですが、varで宣言された変数はエラーとなることなくそのまま実行されてしまいます。実際に確認してみましょう。

letで同名の変数を宣言

let dog = "柴犬";

let dog = "シーズー"; //エラー発生！
//エラーメッセージ
Uncaught SyntaxError: Identifier 'dog' has already been declared

変数dogが既に宣言されているためエラーが発生しました。

varで同名の変数を宣言

var dog = "柴犬";

var dog = "シーズー"; //エラーは発生しない
console.log(dog);  //出力結果  シーズー

varで宣言された場合にはエラーは発生せずに2つ目に宣言した変数dogの文字列”シーズー”を出力されました。

このようなことが起こると作成者にとって意図していない挙動が起こってしまう可能性がありますが、letやconstではこの問題は解消されています。

特別な理由がなければ変数宣言にはvarの利用は避けてletやconstを利用しましょう。

変数名の命名規則(使用できる文字のルール)

変数名の命名規則について紹介していきます。これまでに3つの変数宣言とそれぞれのルールについてお話ししましたが、変数名のつけ方にもルール(命名規則)があります。

ちなみにですが、変数宣言の方法によって変数名のつけ方のルールが異なることはありません。すべての宣言で同様のルールとなります。

JavaScriptでは大文字と小文字は区別されるためどちらも別の文字として識別されます。

また、日本語(ひらがなと漢字)も利用することはできますが、プログラミングにおいて日本語などの全角文字が含まれると環境によってはバグの原因になったりしてしまいます。

その為、変数名のルールとしては個人的には除外させていただきました。特別な理由がなければ避けておきましょう。

JavaScriptの予約語

JavaScriptの予約語についてお話していきます。予約語とはそのプログラミング言語にとって特別な意味を持つ用語のことです。

主な予約語の一覧は以下になります

これでもまだ一部の記載になりますが、これらの用語はJavaScriptにおいて固有の意味を持つ用語の為、予約語として変数名に利用できないようになっています。

見ていただければわかるようにすでに紹介した変数宣言のlet,const,varなども含まれています。

変数名を付ける際にはさまざまなルールがあるためすべて覚える必要はありませんが、自身で命名した変数におかしな挙動やエラーが発生したらぜひ確認してみましょう。

typeofで変数や定数のデータ型を確認しよう

Javascriptは動的型付け言語と言われるプログラミング言語です。

動的型付け言語とは変数や定数に格納した値によって、定義した変数自体のデータ型が変わる言語ということです。

まずは以下を見てみましょう

let variable = 'こんにちは';
console.log(typeof variable);

//出力結果
string

上記の例では、変数variableを宣言しており、文字列に『こんにちは』を格納しています。

コンソール画面で出力する際によく利用されるconsole.log()とデータ型を判定してくれるtypeofを使用して変数variableのデータがを確認しています。

今回、変数に格納している値は文字列型となるStringと判定されていることがわかると思います。

それでは以下のように値を変えた場合ではどうなるでしょうか？結果を見てみましょう。

//変数の定義                 |   データ型の判定結果
let variable = 'こんにちは';     //String
let variable = 12;              //Number
let variable = true;            //Boolean
let variable = undefined;       //Undefined

このように同じ変数を定義して使用していたとしても格納する値によって変数のデータ型が異なっていきます。

これが動的型付け言語と言われるJavascriptの特徴でもあります。開発を行っていく際に現在使用しているデータの方がわからなくなってしまった場合にはtypeofを使用してデータ型を確認してみましょう。

余談ですが、静的型付け言語と言われるプログラミング言語も多くあります。これは変数を宣言した際にデータ型も同時に宣言を行うことで格納できる値を事前に限定することができるプログラミング言語です。

主にJavaなどが該当します