JavaScriptを学び始めると、変数の宣言方法としてvar、let、constの3つを目にしたことがあるでしょう。
それぞれの違いや使い分けを理解することは、バグの起きにくいコードを書くために非常に重要です。
この記事では、「３つあるけどどう違うの？」「使い分け方が分からない ...」「何となく使っている」という方に向けて、
それぞれの特徴と具体的な使い分けについて詳しく解説します。

この記事のポイント

• 3つの変数宣言の違いが分かる
• 状況に応じた変数宣言の使い分けができるようになる

そもそも変数とは？

変数は、データを一時的に保存するための名前付き領域のことを指します。
イメージとしては中身に値が入った名前付きの箱のようなものです。
変数を使用することで、その値を再利用したり操作したりすることができます。
一般的に、let、var で宣言したもののことを「変数」、const で宣言したもののことを「定数」と呼び分けます。

注意点として、varは保守性や扱いづらさなどの観点から現在非推奨になっているため、あまり使いません。
変数の宣言には「letとconstのみ使えば問題ない」と覚えておきましょう。

var ,let ,constの違い

スコープとホイスティングは初心者には難しいかもしれませんので、そういった方は一旦、再宣言と再代入まで理解しましょう。

再宣言

一度宣言した変数と同じ名前の変数を宣言し直すことです。
例えば以下のような場合です。

var x = 10;
var x = 20; // x=20

let x = 10; 
let x = 20; // エラー

const x = 10;
const x = 20; // エラー

上の表でも分かるように、let ,constは再宣言できないのでこのコードはエラーになります。varはエラーにならず後に定義した変数の値で上書きされます。

再代入

一度宣言した変数に値を設定し直すことです。
例えば以下のような場合です。

var x = 10;
x = 20; // x=20

let x = 10; 
x = 20; // x=20

const x = 10;
x = 20; // エラー

上の表でも分かるように、constは再代入できないのでこのコードはエラーになります。let ,varはエラーにならず後に代入した変数の値で上書きされます。

また、constは再代入できないため、当然ながら宣言時に初期値がないとエラーになってしまいます。
let ,verは再代入できるため、エラーではなくundefinedになります。

スコープ

実行中のコードから参照できる範囲のことです。
const ,letはブロックスコープ({}で囲われた部分 - if文やfor文など)が適用されますが、varはブロックスコープが適用されません。
※ 関数スコープ(関数宣言の{})は、var/const/letすべてに適用されます。
例えば以下のような場合です。

//ブロックスコープ
if (3>2) {
var x = 10;
}
console.log(x) // x=10

//関数スコープ
function hoge () {
var y = 10;
}
console.log(y) // エラー

//ブロックスコープ
if (3>2) {
let z = 10;
const a=10
}
console.log(z) // エラー
console.log(a) // エラー

//関数スコープ
function hoge () {
let z = 10;
const a = 10;
}
console.log(z) // エラー
console.log(a) // エラー

つまり、letやconstはif文などのブロックスコープの中で宣言した変数と同名の変数をブロックスコープ外で宣言したとしてもお互いにスコープ範囲が別になるため問題ありません。
一方、varはブロックスコープの影響を受けないため、外からでもアクセスできてしまいます。
あなたはこれを聞いて、「スコープ範囲が広い方が便利そう」と思いましたか？
しかし、影響範囲が広くなると、予期せぬバグやエラーの原因になりうるため好ましくありません。

ホイスティング

変数宣言が常に関数の先頭で行われたことにされる挙動のことです。別名(変数の巻き上げ)といいいます。
変数を定義する前に参照しようとするとどうなるかの挙動の違いに現れます。
例えば以下のような場合です。

console.log(x) // undefined →ホイスティングの影響を受けエラーにはならない
var x = 10; 
console.log(x) // 10

console.log(y) //エラー →ホイスティングの影響を受けないため、エラー
console.log(z) //エラー
let y = 10; 
const z = 10; 
console.log(y) // 10
console.log(z) // 10

varの場合、まだ定義していないはずの変数をエラーなく参照できてしまうので、どの段階で変数定義したか気づきにくくなるかもしれません。

結局どうすればいいの？使い分けのポイント

今から述べることを意識してコードを書けば基本的には問題ないので、これだけはおさえておきましょう。

1. 第一にconstを使うようにする。
   →再代入できないなど制約の多いconstを使用することで、予期せぬ再代入によるバグを極力防ぐことができます。
   
2. 変数の値を変更する再代入が必要な場合のみletを考える。
   →定義時に分からない場合はconstで定義して必要な時に変更でOK。letもconstの次に安全であるためです。
   
3. varは基本的に使わないようにする。
   →新しいコードではvarを使用する理由はほとんどありません。letやconstを使用することで、スコープの問題や巻き上げによるバグを避けることができます。

CodeVilageでは無料カウンセリングを実施しております！

まずはお気軽に無料カウンセリングへご参加ください！
「興味はあるけど、自分にできるか不安...」
「どんなキャリアを描けばいいのか分からない...」
そんなあなたのために!!
何でも相談できる無料カウンセリングを実施しています。

無料カウンセリングに申し込む>>