結論
スコープを無視して変数が適用され、思わぬ挙動を行いバグを引き起こす可能性が高いため。
前提知識
let, const, varの存在、それぞれの役割をある程度知っている。
詳しく
ここでは関数スコープとブロックスコープを取り上げてお話しします。
関数スコープは
function a() {
**********
}
「function」と関数宣言し、{ }で囲まれた部分(*********の部分)を関数スコープと呼びます。
ブロックスコープは
{
***********
}
{ }で囲まれた部分がブロックスコープです。
関数スコープとの違いは「function」と最初に関数宣言しているか・していないかの違いです。
変数とスコープ
関数スコープ内でlet, const, varを使って変数を定義した場合、定義した変数はそのスコープ内でのみ使用できます。
function fn() {
let p = 0;
console.log(p);
}
fn();
上記の場合、関数fnのスコープ内にlet p =0; と定義し、スコープ内でconsole.log(p);で出力しており、いずれも関数スコープ内に存在しているため、出力結果が「０」として表示されます。
一方で次の場合だと出力時にエラーが出ます。
function fn() {
let p = 0;
}
console.log(p);
fn();
上記の場合だと、関数スコープ内にlet p = 0; と変数を定義しているのに対し、スコープ外にconsole.log(p);を定義しています。
この場合、変数pは関数fnスコープ内でのみ取得できる値なため、スコープ外から取得しようとするとエラーが出るわけです。
ブロックスコープで考える
結論からいうと、ブロックスコープを使用するときは、letまたはconstで変数宣言を行うということです。
例を見てみます。
{
let p = 1;
console.log(p);
}
この場合は1を出力します。
一方で
{
let p = 1;
}
console.log(p);
の場合はエラーが出ます。ちなみにconstで定義しても同様の結果となります。
対して、varで変数を定義した場合の例を見てみます。
{
var p = 1;
console.log(p);
}
上記の場合は、let,constで変数定義した場合同様、「１」の値が出力されます。
一方で、
{
var p = 1;
}
console.log(p);
この場合はどうでしょうか？
この場合も、「１」の出力がなされます。
この理由は、
varに対して、ブロックスコープが適用されず、ブロックスコープ内で定義された変数（var p =1;)がスコープ外でも利用できるようになっているからです。
基本的に、スコープ内で定義した変数は、そのスコープ内でのみ適用可能であるという前提があります。
コードの記述量が多くなれば、変数の取り扱いもより厳密になってきますが、varで変数定義してしまったがために、その部分で思わぬ挙動をしてしまい、バグを引き起こしてしまう可能性が高くなります。
変数定義する時はletとconstだけを使って定義しよう！！
上記のことから、バグを生み出さないという観点から、JavaScriptで変数を定義する場合は、letとconstを使用して定義するようにしましょう！！
終わりに
まだまだ初学者のレベルのため、認識が間違っている可能性も高いです。「その認識は違うのでは？」などの意見があれば、遠慮なくご指摘いただけますと幸いです。
以上、見ていただきありがとうございました。