こんにちは。JavaScriptの世界へようこそ。
現場でコードを書いていると、たまに「古いコード」に出会うことがありますよね。そんな時、必ずと言っていいほど登場するのが `var` というキーワードです。
今は `const` や `let` を使うのが当たり前ですが、なぜ昔は `var` だったのか、そしてなぜ今では「あまり使わない方がいい」と言われるのか。その理由は、この子が持つ「ちょっと自由奔放すぎる性格」にあります。
今日は、この `var` と仲良く付き合うために、その特性を紐解いていきましょう。大丈夫、少しずつ整理すれば、決して怖いことはありませんよ。
—
1. 「家の中ならどこでもOK」な var の性格
まず、`var` の一番の個性は「関数スコープ」です。
これはどういうことか。例えるなら、`var` で宣言した変数は「その関数という名の『家』の中なら、どこからでもアクセスできる」という性質を持っています。
function shopping() {
if (true) {
var item = “りんご”; // if文の中で宣言したけど…
}
console.log(item); // 「家（関数）」の中なので、外からでも見えちゃう！
}
shopping(); // 実行すると「りんご」と表示されます
本来なら、`if`文のような「ブロック（波括弧 `{ }` で囲まれた場所）」の中で宣言したものは、その中だけで使いたいですよね。でも、`var` は「同じ関数の中ならどこでもいいよ！」と壁を突き抜けてしまうんです。これによって、「あ、変数が書き換わっちゃった！」という事故が起きやすくなってしまうのが、`var` の悩ましいところです。
—
2. 「何度でも登場できる」という副作用
`var` のもう一つの困った癖、それは「再宣言が可能」であることです。
これも例えるなら、同じ名前の登場人物が物語の中に何度も現れて、前のキャラクターを塗り替えてしまうようなものです。
var name = “初心者さん”;
console.log(name); // 初心者さん
// 数百行あとのコードで、うっかり同じ名前を使ってしまう…
var name = “熟練者さん”;
console.log(name); // 熟練者さん（前のデータは消滅！）
もしこれが何千行もある大きなプログラムだったらどうでしょう。「あれ？さっきまで『初心者さん』だったはずなのに、いつの間にか『熟練者さん』に変わってる……なんで！？」というバグ探しに、夜通し頭を抱えることになります。
`let` や `const` なら、「同じ名前の変数はもうあるよ！」とブラウザがエラーで教えてくれるので、こうした事故を未然に防げるんです。だからこそ、今のJavaScriptでは `var` を避けるのが定石なんですね。
—
3. 「巻き上げ」という不思議な現象
最後に、少しだけ不思議な話をします。「巻き上げ（ホイスティング）」という言葉を聞いたことはありますか？
`var` は、コードが読み込まれるとき、その関数内の「一番上」に自動的に移動させられるという性質があります。
console.log(fruit); // エラーにならない！でも値は「undefined（未定義）」
var fruit = “みかん”;
本当なら「まだ宣言してないよ！」と怒られそうなものですが、JavaScriptは「先に変数の場所だけ確保しておこう」と気を利かせて、こっそり上に持ち上げてくれるんです。ただ、値を入れるのは実行する瞬間なので、途中の `console.log` では「場所はあるけど、中身は空っぽ（undefined）」という状態になります。
これもまた、初学者が「なんでこうなるの？」と混乱する原因の一つですね。
—
まとめ：これからの書き方
ここまで読んでみて、「`var` ってずいぶん自由気ままでハラハラするやつだな」と感じたなら、あなたはもう素晴らしいセンスを持っています。
現場のリアルなアドバイスとしては、こう覚えておいてください。
- 基本は `const` を使う（一度決めたら変えない箱）
- 値を変える必要がある時だけ `let` を使う（書き換え可能な箱）
- `var` は……古いコードをメンテナンスする時以外は、そっと封印しておく
最初は戸惑うかもしれませんが、`let` と `const` を使うようにするだけで、あなたの書くコードはぐっと堅牢で、バグの少ない美しいものになります。
JavaScriptは、書けば書くほど味が出てくる面白い言語です。失敗しても大丈夫。一つずつ、こうして「なぜそうなるのか」を理解していけば、いつの間にかあなたも、自信を持ってコードを書けるようになっていますよ！
それでは、良いコーディングライフを！
コメント