【JavaScript】 JavaScriptの変数宣言〜var,let,constの違いを知ろう

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

JavaScriptにおける変数定義

リンクをコピーしました

この章では、JavaScriptにおける変数定義方法について解説します。

varによる変数宣言

リンクをコピーしました

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

1
var firstName;

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

1
2
var firstName; 
firstName = 'asuka';

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

1
var firstName = 'asuka';

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

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

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

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

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

letによる変数宣言

リンクをコピーしました

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

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

1
let lastName = '';

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

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

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

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. 同一スコープにおいて２度以上の宣言ができない
3. 一度定義した定数に再代入をすることができない

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

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を利用することを推奨します。

▼ JavaScriptを本格的に学びたい方は、以下の参考書がおすすめです。基本的な文法から高度な使い方まで非常に広範にわたる内容を学べます。

初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書！

楽天市場

Amazon

実際に変数宣言をしてみよう。

リンクをコピーしました

以下の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 １度定義したvarSampleの値を更新する

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

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

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

役に立ったらSHARE♪

• twitter
• facebook
• はてブ