JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

JavaScriptで変数がロード済み（値が代入済み）かどうかを確認するには、その変数が undefined または null であるかを比較することで判定できます。さらに、typeof 演算子は常に文字列を返すという特性があるため、これを利用して変数の状態をチェックすることも可能です。

それでは、実際にJavaScriptの変数がロードされているかどうかを確認できるサンプルコードを見ていきましょう。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Check if a variable is loaded or not</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see if the object obj has been loaded or not
</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj;
    BtnEle.addEventListener("click", () => {
        if (obj === null || obj === undefined) {
            resEle.innerHTML = "The object obj hasn't loaded yet";
            obj = { firstName: "Rohan", lastName: "Sharma" };
        }
        else {
            resEle.innerHTML = "The object obj has been loaded";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、オブジェクト obj はまだロードされていないため、未ロードのメッセージが表示されます。

JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

この時点で obj に値が代入されるため、もう一度「CLICK HERE」ボタンをクリックすると、今度はオブジェクトがロード済みであることを示すメッセージが表示されます。

JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

ポイントまとめ

  • obj === null || obj === undefined のように比較することで、変数に値が代入されているかを正確に判定できます。
  • typeof obj === "undefined" を使えば、宣言されていない変数に対してもエラーを発生させずに安全にチェックが可能です。
  • == null を使うと、null と undefined の両方を同時に判定できるというテクニックもあります。
  1. JavaScriptでオブジェクトのプロパティを削除する方法をわかりやすく解説

    JavaScriptでオブジェクトのプロパティを削除するには、delete演算子を使用します。delete演算子は、指定したオブジェクトからプロパティそのものを取り除き、削除に成功した場合はtrueを返します。以下に、オブジェクトのプロパティを削除するサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0

  2. JavaScriptでオブジェクト内のnull・偽値(falsy)を「-」に一括置換する方法

    JavaScriptでは、多くのキーを持つオブジェクトを受け取り、その中のすべての偽値(falsy value)をダッシュ「-」に置き換える関数を実装したい場面があります。この記事では、元のオブジェクトをそのまま走査し、偽値が格納されているキーを検出して、余分なメモリを消費することなく(in-placeで)「-」に置き換える方法を解説します。JavaScriptにおける偽値(falsy)とは実装の前に、JavaScriptで条件式の中で「偽」と評価される値を確認しておきましょう。以下の6つが代表的な偽値です。false(真偽値) / (空文字列)null(意図的な「無」を表す値)undefin