【JavaScript】JavaScriptの変数宣言を徹底解説

JavaScript

JavaScriptにおける変数定義

JavaScriptには変数を定義する方法として、var, let, constの三つの方法があります。それぞれについて1つずつ学んでみましょう。

varによる変数宣言
リンクをコピーしました

varを使う場合は以下のように記述することで変数を宣言することができます。

javascript
1
var firstName;

このように変数を宣言した場合は初期値が’undefined’になります。
'undefined’ではなく実際の値を代入する際には ‘=’ を使うことで変数に値を代入することができます

javascript
1
2
var firstName; 
firstName = 'asuka';

また上記のようなコードは以下のように書くことで、’firstName’変数を宣言する際に’sato’という文字列で初期化することができます

javascript
1
var firstName = 'asuka';

また変数名を付ける際は以下のルールに従う必要があります。

  1. 必ずアルファベットかアンダースコア (_) かドル記号 ($) から始めること。
  2. 使えるアルファベットは “A” から “Z”(大文字)と “a” から “z”(小文字)であること
  3. ※ 最初の文字でなければ文字は数字 (0-9) が使えます。
  4. ※ ひらがなや漢字を利用した変数の定義も可能ですが、全角文字を変数名に利用することはほとんどありません。

また変数名には利用できない予約語 - JavaScript | MDNとよばれる単語が存在しています。

’var’, ‘const’, ‘if’, ‘for’, ‘break’, ‘with’ のようなJavaScriptの構文として利用することができるものは変数に利用できません。

また将来的にJavaScriptに実装されるかもしれない ‘class’, 'import’といった単語も予約語に含まれます。詳しくは先ほどのリンクを参照してみてください。

letによる変数宣言
リンクをコピーしました

let、後述するconstキーワードを用いた変数宣言はECMAScript2015以降の環境にて利用することができます。

letの使い方は先ほどのvarとほとんどおなじように扱うことができます。

javascript
1
let lastName = '';

varとの違いはスコープが厳密再定義という観点で2つあります。

スコープについては別記事(準備中)にて詳しく紹介をするため現段階ではvarより優れている変数宣言の方法がletということを覚えてください。

let、およびconstを用いた変数宣言は同一スコープにおいて2度以上宣言することができません

javascript
1
2
3
4
5
6
var number = 100;
var number = 200; // numberという変数が再定義される
let number2 = 100;
let number2 = 200;
//Uncaught SyntaxError: Identifier 'number2' has already been declared at <anonymous>:1:1
number2 = 200; // これは可能

このように、同じ変数名を使った宣言をするとletの場合はsyntax errorとなってしまいます。

しかし、実際にプログラミングをしている最中において同名の変数を定義することはほとんどないため、同じ変数名がSyntaxErrorになるのは意図しない変数の上書きを防げることにも繋がるため、varを避け、letを使うことが多いです。

constによる変数宣言
リンクをコピーしました

constの特徴はletの特徴に加えて再代入ができない変数宣言ができるという点です。

再代入ができない変数のことは’定数’と呼ばれることが多いためこれより先では’定数’と呼ぶことにします。

constの特徴は
1. スコープが厳密
2. 同一スコープにおいて2度以上の宣言ができない
3. 一度定義した定数に’再代入’をすることができない

これらの特徴を実際のコードをみてみましょう。

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const number3 = 100;
const number3 = 200;
//Uncaught SyntaxError: Identifier 'number3' has already been declared

const number4 = 100;
number4 = 150; // Uncaught TypeError: Assignment to constant variable.


// 円の面積を求める場合は?
const diameter = 9 // ここでは直径が変化しないものとする
const PI = 3.14 // 円周率は絶対変わらないためconstで宣言
diameter * PI // => 28.26

// 日本の首都は? 
const CAPITAL_CITY = 'TOKYO'

このようにletと同じく複数回の宣言はSyntaxErrorに、定数への再代入はTypeErrorになります。

定数はプログラムの内部において変更がされないものに利用します。

今回の例では, 円周率であるPI、日本の首都を定数として定義してみました。

このconstは複数回の代入ができないという特徴がとても素晴らしく、意図しない変数の値の変更が起き得ないため、どうしても変数の値を更新しないといけない場合を除きconstを利用することを推奨します。

実際に変数宣言をしてみよう。
リンクをコピーしました

以下のCodePenのBabelタブ(javascriptをかけるタブ)にて以下の問題を解いてみましょう。

※JSに集中するため、問題中の変数名にしたがって問題をとけば、HTMLの出力がされるようになっています。

  • 1.1 varを用いて ’varSample’という変数に 'varSample'という文字列を代入する。
  • 1.2 varSampleの値を更新(上書き)してみる
  • 2.1 letを用いて’letSample’という変数に'letSample'という文字列を代入する
  • 2.2 letSampleの値を更新する
  • 3. constを用いて'constSample'という変数に’constSample’という文字列を代入する

※ let, constでは再定義ができないことの確認などもしてみましょう。

See the Pen ecmascript_var_let_const by miyajima yuya (@pikawaka) on CodePen.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// TODO varを用いて ’varSample’という変数に 'varSample'という文字列を代入する
// TODO 1度定義したvarSampleの値を更新する

var varSample = 'varSample';
varSample = 'updatedVarSample';

/*---------------*/
// TODO letを用いて’letSample’という変数に'letSample'という文字列を代入する
// TODO letSampleの値を更新する
let letSample = 'letSample';
letSample = 'updatedLetSample';

/*---------------*/
// TODO constを用いて'constSample'という変数に’constSample’という文字列を代入する
const constSample = 'constSample';
まとめ

ES6以降の記法が使える環境であれば、constをメインに利用し、どうしても変更が必要な変数を利用する場合にのみletを使うようにしましょう。