最初に

今回は初心者向けに何故varが嫌われているのか書いてみました。
誤字脱字等ありましたら、優しく教えていただけると幸いです。

なんでvarって嫌われてるの？

そもそもconst let varの違いを理解していますか？
一旦それぞれの特徴について、もう一度まとめてみましょう

これをふまえた上で嫌われている理由をまとめていきます。

初心者の方は再宣言可能の何がいけないのか？と思いますよね？再宣言はプログラムが長くなればなるほど、面倒な仕様になっていきます。

var hello = "hello world"

var hello = "hey"

console.log(hello)

// console: hey

このくらいの行数ならhelloが再宣言されているのでログ出力時にはhello worldではなくheyと表示されるのが分かります。

しかし、これが数百行、数千行、数万行に膨れ上がると面倒なことになります。
本来、関数が代入されていたはずなのに、いつの間にか変数になっていたりなど、再宣言は大規模なプログラムになればなるほど、エラーを吐く原因になっていくのです。

近年は、Visual Studio Code等のエディターの発達にともなって、事前にエラー個所を知らせてくれるので、もしlet constで再宣言をしようとしたら、エディターが教えてくれます。

まずこちらのプログラムを見てください

var hello = "hello world";

function greet() {
    console.log(hello);
    var hello = "hey";
    console.log(hello);
}

greet()

これを実行するとどうなると思いますか？
ほとんどの人は以下のようにログが出力されると思います。

hello world
hey

しかし、実際はこうです。

undefined
hey

何で？って思いますよね？
これは「巻き上げ」という仕様によるものです。
具体的には関数内部で変数を宣言すると関数内ではその変数が優先されるというものです。

そのため、一個目のconsole.logではhello変数は宣言していない判定になるので、undefinedが出てしまうのです。

結論: この二つの仕様からがあるため、varは使わないほうがいいのです。

ここからは番外編です。varが嫌われている理由以外は特に興味ないという方は、ここでブラウザバックしていただいて大丈夫です。

実はconstとletが追加されたのはECMAScript2015(ES6)からで結構最近なんです。
その為、昔のコードにはvarが使われている事が多いんです。

const と let の違いは再代入のみなので、再代入する可能性の有無で考えるのがいいでしょう
大雑把に言うと

関数、パッケージを代入するための変数 → const
それ以外 → let

もちろん例外はありますが、自分はこのように使い分けています。
参考にしていただければ幸いです。

自分は他にもJS/TSに関する記事を複数投稿していますので、良かったら見ていただけると幸いです。