JavaScriptのletとは？知っておくべき特徴と使い方について

従来のJavaScriptでは、変数宣言をする時にvarしかなかったので迷うことはありませんでした。ところが、ES6が一般的になってきた現在ではvar / let / constの3種類で変数を宣言できるようになりました。

これからJavaScriptを学習しようとする初心者の方にとって、上記のような疑問が思い浮かぶのではないでしょうか。

そこで、本記事ではletの基本的な使い方から従来のvarと何が違うのか？さらには、constとの使い分けについても徹底的に解説をしていきます。JavaScriptの基本である変数宣言をしっかりとマスターして、ぜひ自身のスキルアップを目指してください！

JavaScriptのletとは

従来から利用しているvarによる変数宣言は、いろいろと落とし穴が存在しており初心者にあまり優しくありませんでした。詳細は後述しますが、例えば一度定義した変数名とまったく同じ変数名で再度定義できるため、プログラムにバグが潜む可能性が高くなっていました。

このような不自然な挙動を排除して、効率よくプログラムするために登場したのがletという変数宣言方法なのです。（constも同様）

そこで、letを学習するために最低限知っておくべきポイントは2つあります。

上記の内容が従来のvarと比べてもっとも分かりやすい違いと言えます。これらの内容を踏まえながら、実際のプログラムを見ていきましょう！

letの使い方

letの記述方法

letの記述方法は、基本的にvarの記述方法と同じです。

そのため、何か新しい宣言方法を覚える必要はありません。つまり、単純にvarの部分をletに置き換えるだけで使うことができるわけです。

次のサンプル例を見てください。

var test1 = 10;

let test2 = 10;

上記のコードは、従来通りのvarによる変数宣言とletによる変数宣言の記述になります。コードを見ても分かるように特別な記述方法はなく、varで宣言するかletで宣言するかの違いだけになります。

再宣言のポイント

letによる変数宣言において、もっとも注意が必要な点として変数の「再宣言」があります。

この再宣言に関してはvarの欠点でもあったわけですが、同じ変数名で再度宣言ができてしまうという点です。

例えば、以下のサンプル例はvarを利用した再宣言になります。

var test = 10;

// 再宣言
var test = 1000;

console.log(test);

実行結果

1000

上記のコードを見ると、まったく同じ変数名で再宣言しているのが分かります。注目すべき点は、エラーが発生せずに一番最後に宣言された変数が動作しているところです。

複雑なプログラムになってくると、うっかり同じ変数名で宣言してしまうこともあるため、エラーが出なければバグを未然に防ぐのが難しくなります。

次に、letを利用して同じことをやってみましょう。

let test = 10;

let test = 1000;

console.log(test);

実行結果

SyntaxError: Identifier 'test' has already been declared

varをletに置き換えただけですが、今度は再宣言した時に実行結果としてエラーが発生しているのが分かりますね。つまり、letによる変数宣言を行うだけで、うっかりミスを未然に防げるようになるわけです。

スコープについて

スコープは、変数などを利用できる範囲のことを指します。

そのため範囲外で変数を利用しようと思ってもできず、「宣言されていません」とエラーメッセージが表示されることになります。

それでは、その範囲とはどこを指すのでしょうか？

letの場合はブロックスコープと言って、for文やif文のような1つのブロックの中で宣言した変数はその中だけ有効になります。

例えば、letを利用して以下のようなコードを書いてみましょう。

let i = 100;

for(let i=0; i<5; i++) { }

console.log(i);

実行結果

100

最初に変数「i」に100を代入していますね。そのあとにfor文の中でも同じく変数「i」を宣言しています。同じ変数名を利用していますが、これは再宣言には該当せずに機能します。

なぜかと言うと、for文という1つのブロックの中で変数を宣言しているからです。つまり、for文の中で宣言した変数「i」はその中だけしか有効でないので他に影響しないのです。

varとletの違い

letの特徴をいくつか紹介しましたが、ここでvarとletの違いを簡単にまとめてみましょう。

ポイントは以下の2つです。

以下のサンプル例はvarとletによる再宣言のコードになります。

var test = 0;

// varは再宣言可能
var test = 100;


let sample = 0;

// letは再宣言不可
let sample = 100; // エラーになる

letは再宣言するとエラーで知らせてくれるので、想定外のバグを未然に防げるようになります。

また、スコープについてですが、letはブロックスコープなので例えばfor文の中で宣言した変数はその中だけで有効になります。

let i = 100;

for(let i=0; i<5; i++) {}

console.log(i); // 100

for文の中で同じ変数名を使用しても、for文の外で宣言した変数には影響しません。

しかし、varにはブロックスコープが無いのでfor文の中で同じ変数名を利用して宣言すると外で宣言した同じ変数名に影響がでます。

var i = 100;

for(var i=0; i<5; i++) {}

console.log(i); // 5

最初に変数「i」には100が代入されていますが、for文の中で同じ変数名を使って値を変化させているので、コンソールログには最終的に利用された変数「i」の値が出力されます。

ただし、varには関数スコープがあるので関数の中で宣言された変数はその中だけで有効になります。

var i = 100;

function sample() {
 for(var i=0; i<5; i++) {}
}

console.log(i); // 100

上記コードはfor文を関数で囲んだだけですが、関数の中で同じ変数名を利用して値を変化させても外で宣言された変数に影響が出ていないことが分かります。

letとconstの違い

JavaScriptの変数宣言はvarとletだけでなく、もう1つconstがあります。

基本的な特徴はletとほとんど同じなのですが、大きく異なる点として「再代入」ができないことが挙げられます。つまり、再宣言も再代入もできないため、値を一度決めたら途中で変更ができないことになります。

次のサンプル例を見てください。

var test = 10;

test = 1000; // 再代入はOK


let sample = 10;

sample = 1000; // 再代入はOK

上記コードはvarとletにおける再代入のサンプル例になります。どちらも特に問題なく実行できる点に注目してください。

次にconstを利用して同じことをしてみましょう。

const test = 10;

test = 1000;

実行結果

TypeError: Assignment to constant variable.

上記コードでは、ごく普通に値を再代入しているだけですがconstの場合はこの処理がエラーになります。このため、プログラムの途中で意図しない変数の変更が行われないのでより安全に利用できるわけです。

for文のカウンター変数のように、あらかじめ変数の中身が変化することが分かっている場合はletを使うようにして、それ以外の場合は基本的にconstを利用して変数宣言を行うと良いでしょう。

ただし、constは再代入ができないだけなので、例えばオブジェクトの値を途中で変更することは可能になっている点に注意してください。

次のサンプル例を見てください。

const sample = {
 name: '太郎',
 age: 30
}

sample.name = '花子';

console.log(sample);

実行結果

{ name: '花子', age: 30 }

この例では、constを利用してオブジェクトを作成しています。

途中でnameプロパティの値を変更していますが、constを使っていてもこのような処理は可能になるわけです。

まとめ

今回は、JavaScriptで変数宣言を行うletについて解説をしました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！