変数を理解する JavaScript 初学者講座

JavaScriptに限らずプログラムには値を格納しておくための変数というものが存在します。

変数はその値に他の値を代入して使ったり、を決まった値（定数）として様々なところで使いまわしたりと様々な場面で使用されます。

変数の宣言
1. let
2. const
変数のスコープ
使い分け
終わりに

変数の宣言

変数の宣言や代入は下記のように行います。

// 変数を宣言
var a;
console.log(a) // undefined

// 変数に値を代入
var a = 1;
console.log(a) // 1

以前は変数の宣言にはvarによって行われましたが、JavaScriptは2015年6月に発行されたES2015(ES6)から多くの機能、構文が追加され、下記２つの宣言も追加されました。

// 再代入、再宣言不可の const
const a;
console.log(a) //

// 再代入可、再宣言不可の let
let b;
console.log(b)

// 再代入、再宣言可の var
var c;

letやconstは再宣言が不可能なため、誤って同じ変数名を付けてしまった場合にもコンソールログでエラーを検知できます。

let

let a = 0;
console.log(a) // 0

a = a + 1;
console.log(a) // 1 再代入可のため新しい値に上書きすることは可能

let a = 0;

let a;
// コンソールに「Uncaught SyntaxError: Identifier 'a' has already been declared 」とエラーが表示される。

letは再宣言が不可のため既に宣言されているとエラーが表示されました。

const

const b = 0;

b = b + 1;
// コンソールに「Uncaught TypeError: Assignment to constant variable.」とエラーが表示される

constは再代入、再宣言ともに不可のため新たに値を代入しようとしたところ、定数への代入とエラーが表示されています。

変数のスコープ

varとlet、constにはスコープの範囲にも違いがあり、varは関数内であれば参照できるのに対し、letやconstはブロック内でのスコープとなります。

const varTest = (num) => {
  if ( num == 0 ) {
    var result = 1;
  }
  console.log(result);
}
varTest(0) // 1 resultに代入された1が表示されます。

const constTest = (num) => {
  if ( num == 0 ) {
    const result = 1;
  }
  console.log(result);
}
constTest(0) // ifのブロック外でresultを表示しようとしているため、エラーになります。

const letTest = (num) => {
  if ( num == 0 ) {
    let result = 1;
  }
  console.log(result);
}
letTest(0) // ifのブロック外でresultを表示しようとしているため、エラーになります。

このようにvarはifのブロック内で宣言され、ブロック外でもresultの値を参照することができましたが、letやconstの場合は参照することができませんでした。

またvar、let、constのいずれもつけずに宣言した場合はグローバルスコープとなります。

const globalCall = () => {
  a = 1;
}

globalCall();
console.log(a); // 1

const call  = () => {
  const b = 1;
}

call();
console.log(b); // Uncaught ReferenceError: b is not defined

変数aは関数内で宣言された変数でも、関数を使用した後にその変数を使えていますが、bの場合は「bが定義されていません」のエラーが出ています。これはvarでもletでも同じエラーが表示されます。

全部をグローバル変数にすれば扱いやすいと思われた方は要注意です。このように1つの変数名がどこでも使えてしまうと、誤って同じ名前をつけた場合に想定しないの関数からの値を参照してしまうことがあるかもしれません。

想定外の挙動やエラーが起こらないようにするためにも、変数のスコープは意識をしてプログラムするように心がけましょう。

使い分け

ここまでvar、let、constについて説明してきました。実際の使い分け方について勉強していきますが、結果から言ってしまうと

varは使わない
だいたいはconstでOK
再代入がある場合はconst→letに変更する

で良いと考えています。

varによる宣言は再宣言、再代入の両方が可能なため自由度が高くてカジュアルに使いたくなりますが、コードが長くなってきた場合に同じ変数名がぶつかってしまったり、意図しない再代入が行われてしまう可能性があります。

小さいプログラムを作っている時点からlet, constによる宣言に慣れておいた方がいいでしょう。

またconstは再代入不可とされていますが、配列やオブジェクトへの変更は再代入とならないので、値の追加や変更が可能です。配列やオブジェクトについては別記事で詳しく勉強していこうと考えておりますので、ここでは一旦下記の例を試してみましょう。

const ary = [1,2,3];

// 配列へ追加
ary[3] = 4;

console.log(ary);
// [1,2,3,4]

// 配列の値を更新
ary[3] = 5;

console.log(ary);
// [1,2,3,5]

const obj = {
  sample01: {
    test: 1,
    body: "最初"
  },
  sample02: {
    test: 2,
    body: "途中"
  }
}

obj.sample03 = { test:3, body:"最後"}
console.log(obj);
/*
sample01: {test: 4, body: '最初'}
sample02: {test: 2, body: '途中'}
sample03: {test: 3, body: '最後'}
*/

obj.sample01.test = 4;

console.log(obj);
// test: 1→4に変更される