【JavaScript】変数宣言の方法を理解する

JavaScriptで変数を宣言するときに使うときには、主にvar、let、constを使います。

varは元々ありましたが、letとconstはES2015から追加された機能で、意外と違いが違いが説明できないことがあります。

そこで今回はJavaScriptの変数の宣言についてまとめてみようと思います。

先に結論を言うと

varで変数宣言

変数をvarで宣言した場合は、変数の上書きも再宣言も可能になります。varでの宣言は、ES2015以前から使われていた変数の宣言です。ES2015以降はあまり使われなくなっています。

これが使われなくなった理由として、

• 無条件に変数が上書きされてしまう。
• 別の処理で全く同じ変数名を宣言できる。

プロジェクトの規模が小さければ、あまり問題にはならないと思いますが、開発規模が大きくなると
変数の中身が意図しない処理で上書きされたり、同じ変数が別の処理にも存在していて非常に分かりにくいコードになってしまいます。

この問題があるのでES2015以降は後述するletとconstを使うことが推奨されています。

以下は変数(var1)の上書きと再宣言をした時の実行結果で、エラーなく実行されています。

var val1 = 5
console.log(val1)

var val1 = 10
console.log(val1)

(出力結果)
[Running] node "c:\javascript\main.js" 
5
10
[Done] exited with code=0 in 0.203 seconds

letで変数宣言

letで変数を宣言した場合は、変数の上書きは可能ですが、再宣言は不可能になります。

//変数の上書き
let val1 = 5
console.log(val1)

val1 = 10
console.log(val1)

(出力結果)
[Running] node "c:\javascript\main.js"
5
10
[Done] exited with code=0 in 0.228 seconds

let val1 = 5
console.log(val1)

//変数の再宣言
let val1 = 10
console.log(val1)

[Running] node "c:\javascript\main.js"
c:\javascript\main.js:5
let val1 = 10
    ^

SyntaxError: Identifier 'val1' has already been declared
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

[Done] exited with code=1 in 0.193 seconds

変数の再宣言をするとすでに変数val1が宣言されているので
Identifier ‘val1’ has already been declaredでエラーとなる。

constで変数宣言

constで変数を宣言した場合は、上書きも再宣言も原則不可能になります。constはconstant(定数)という意味を持っています。

const val1 = 5
console.log(val1)

//変数の上書き
val1 = 10
console.log(val1)

[Running] node "c:\javascript\main.js"
5
c:\javascript\main.js:5
val1 = 10
     ^

TypeError: Assignment to constant variable.
    at Object.<anonymous> (c:\javascript\main.js:5:6)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

[Done] exited with code=1 in 0.176 seconds

変数を上書きしようとするとAssignment to constant variable.でエラーとなる。

const val1 = 5
console.log(val1)

//変数の再宣言
const val1 = 10
console.log(val1)

[Running] node "c:\javascript\main.js"
c:\javascript\main.js:5
const val1 = 10
      ^

SyntaxError: Identifier 'val1' has already been declared
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

[Done] exited with code=1 in 0.209 seconds

変数の再宣言をするとすでに変数val1が宣言されているので
Identifier ‘val1’ has already been declaredでエラーとなる。

constで変数を上書きできるパターン

先ほどから、constで変数を宣言すると原則不可能としていましたが、実は例外があります。
それは、オブジェクト、配列、関数等のオブジェクト型のものを変数として宣言した場合は、変更できます。以下はオブジェクトをconstで宣言した際のサンプルです。

const obj = {
    user:'testuser1',
    group:'A'
};
console.log(obj)

//オブジェクトのgroupを変更
obj.group = 'B'
console.log(obj)

//オブジェクトにmailを追加
obj.mail = 'testuser1@mail.com'
console.log(obj)

[Running] node "c:\javascript\main.js"
{ user: 'testuser1', group: 'A' }
{ user: 'testuser1', group: 'B' }
{ user: 'testuser1', group: 'B', mail: 'testuser1@mail.com' }

[Done] exited with code=0 in 0.146 seconds

エラーなく実行され、groupの変更もmailの追加も問題なく反映されています。

処理内で変数の値を変えながら処理していく変数以外は大体constを使うことが圧倒的に多いと思います。

まとめ

• varで変数を宣言すると、変数の上書きも再宣言もできてしまうので基本使わない
• letで変数を宣言すると上書きのみ可能で再宣言はできないようにしている。
• constで変数を宣言すると上書きも再宣言も原則不可能
• オブジェクト型はconstで宣言しても変数の値を上書きできる。
• オブジェクト型はconstで宣言する