JSにおいて変数を宣言する上で必要なvarとletですが、正しく使用するためにそれぞれの違いをまとめます。
##1 varで宣言
単純な宣言であると
var 変数名;
var 変数名 = hoge;
となります。
varによる変数の宣言はどこでもできますが、同じ変数名での宣言は複数できません。（スコープが違えば可能）
基本的にプログラミングでは上から下に処理が実行されるので、変数を使用する処理より上にその変数を定義しておかなければなりませんが、
JSの場合はvarの巻き上げと言って処理を開始する前にvarを探し出し変数の宣言を先に行うことができます。
なので変数を使う処理の下にその処理に使う変数を宣言してもエラーにはなりませんが、undifindが表示されます。
##2 letで宣言
こちらも
let 変数名;
let 変数名 = hoge;
のように宣言します。
letも巻き上げはありますが、varと違い、巻き上げた上でエラーを発生させます。
なので、変数の宣言より上でその変数を使った処理を行うとエラーが出ます。
これもvarとletの一つの違いです。
##3 varとletの違い
二つの違いは変数の使える範囲（スコープ）です。
varは関数スコープを持っており、関数内で使用した場合、その関数の中でしか使用できません。
逆に言うと関数内で使用している変数は関数外であれば同じ名前で別物の変数として使用することができます。
letはブロックスコープを持っており、if文などの{}の中でしかアクセスできません。
##4 まとめ
それぞれ使える範囲による違いや、巻き上げの仕方の違いなどがあり、
変数を宣言する上で必要なvarとletですが、その違いをしっかり認識する必要があると感じました。