JavaScript varの特徴 - NRIネットコムBlog

本記事は執筆デビューWeek 7日目の記事です。
✨ 6日目 ▶▶ 本記事 ▶▶ 8日目 🔰

はじめに
環境
varは宣言したスコープの外から参照できる
- varが外からの参照を受け付ける理由
var は再宣言可能
まとめ

はじめに

初めまして、執筆デビューWeek7日目を担当する新井です。
皆さんはJavaScriptには変数を宣言する際、varとletを使い分けられていますか？私はvarが昔からある機能でletの方が新しい、くらいにしか認識しておらず、感覚で使い分けていました。それではよくないので根拠をもって使い分けられるよう、varの特徴について学習を兼ねて紹介します。

環境

使用するブラウザはChromeで、エディタにVisual Studio Codeを使用しています。
ファイル構成は以下です。

JavaScriptの挙動を確認するだけなので、htmlファイルにはscriptファイルを参照することだけ記述しています。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script src="sample.js"></script>
</body>
</html>

varは宣言したスコープの外から参照できる

　結論から述べると、varとletは参照できる範囲が異なります。 varで定義した変数はブロックスコープに対応しておらず、letで定義した変数はブロックスコープに対応します。（関数スコープについてはlet、varともに影響を受けます）
実際にコードで確かめてみましょう。

{
    var var_object = "varで宣言しました";
    let let_object = "letで宣言しました";
}

console.log(var_object);
console.log(let_object);

結果

letで定義された変数はエラーを出しているのに対し、 varで定義された変数はグローバルスコープ、つまりどこからでも参照が可能であるため、コードの通りブロック内で宣言してもブロックの外で呼び出すことが可能です。

varが外からの参照を受け付ける理由

先ほど記述したコードでは、varで宣言された変数はグローバルオブジェクトに保持されます。
実際にグローバルオブジェクトの中身をコンソールで確認してみましょう。省略先ほど定義したvar_objectを見つけました。実際にグローバルオブジェクトに保持されているのが確認できます。これは、varはガベージコレクションの対象にならず、windowオブジェクトによって保持され続けることを意味します。大きな影響を及ぼすことはそうそうないとは思いますが、varで大量の変数を定義する際は、パフォーマンス面にも気を配る必要がありそうです。

var は再宣言可能

個人的にはこれが一番問題なのではないか、と感じています。 letはスコープが違えば同じ変数名での宣言は可能ですが、それぞれ保持される場所が異なるため、干渉しません。しかし、varはブロックスコープに対応しないため、再宣言可能だと元々グローバルオブジェクトに保持されていた関数や変数などが意図せずして上書きされる可能性があります。上記はグローバルオブジェクトが元々保持している関数の一部です。そこへ以下のようなコードを書いてしまうと……