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

JavaScriptで既に宣言済みの変数へ分割代入（デストラクチャリング）することはできる？

結論から言うと、既に宣言されている変数に対しても分割代入（デストラクチャリング）は可能です。ただし、その場合は代入式全体を丸括弧 () で囲む必要があります。

丸括弧が必要な理由は、行頭に { } が現れるとJavaScriptがそれをブロック文として解釈してしまうためです。丸括弧で囲むことで、式として正しく評価されるようになります。

基本的な書き方

let name, age;

// 既に宣言済みの変数への分割代入
({ name, age } = personObj);

let { name, age } = personObj; のように宣言と同時に代入する場合とは異なり、宣言済みの変数に代入するときは ({ name, age } = personObj); という形式になります。

コード例

以下は、宣言済みの変数へオブジェクトを分割代入する実際のコード例です。

<!DOCTYPE html>
<html lang="ja">
<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: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>宣言済み変数への分割代入</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると personObj オブジェクトが分割代入されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let name, age, personObj;
    personObj = {
        name: "Rohan",
        age: 19,
    };
    BtnEle.addEventListener("click", () => {
        ({ name, age } = personObj);
        resEle.innerHTML = " name = " + name + "<br>age = " + age;
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで既に宣言済みの変数へ分割代入（デストラクチャリング）することはできる？

「クリックしてください」ボタンを押すと、personObj オブジェクトから name と age の値が取り出され、それぞれ宣言済みの変数に代入された結果が画面に出力されます。

JavaScriptで既に宣言済みの変数へ分割代入（デストラクチャリング）することはできる？

ポイントまとめ

  • 宣言済みの変数への分割代入は ({ 変数1, 変数2 } = オブジェクト); の形式で行う
  • 丸括弧を省略すると構文エラーになるため注意が必要
  • 配列の場合も同様に、既存変数への代入が可能
  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptでテキストボックスを選択することは可能ですか？select()メソッドの使い方を解説

    はい、可能です。JavaScriptのselect()メソッドを使えば、テキストボックス内のテキストを選択状態にすることができます。まずは、テキスト入力欄を作成してみましょう。 テキストボックスとボタンの作成 Enter your Name:<input type="text" id="txtName" value="John"> <br> <button type="button" onclick="check()">Select Text Box<