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

JavaScriptの分割代入（デストラクチャリング）で変数を入れ替える方法

分割代入（デストラクチャリング）を使うことで、変数の入れ替え（スワップ）は非常に簡単になりました。従来のJavaScriptでは、別の一時変数を用意して入れ替え処理を行うのが一般的でした。動作自体に問題はありませんが、コードが長くなりやすいという課題がありました。一方、モダンJavaScriptでは第3の変数を用意する必要すらありません。本記事では、その方法を詳しく解説します。

例1：一時変数を使った従来の方法

次の例では、「tmp」という一時変数を使って変数aとbを入れ替えています。余分な変数が必要になるため、どうしてもコードが長くなってしまいます。

<html>
<body>
    <script>
        var a = "Sachin";
        var b = "Tendulkar";
        document.write("Before swapping-"+ " "+ a + " " +b);
        var tmp = a;
        a = b;
        b = tmp;
        document.write("</br>");
        document.write("After swapping-"+ " " + a + " " +b);
    </script>
</body>
</html>

出力結果

Before swapping- Sachin Tendulkar
After swapping- Tendulkar Sachin

分割代入を活用すれば、入れ替えの処理はさらにシンプルになります。別の変数を用意する必要はなく、コードも短く保つことができます。

例2：分割代入を使ったモダンな方法

次の例では、第3の変数を使わず、分割代入だけで入れ替えを実現しています。先ほどのコードと比べて、大幅に簡潔になっていることがわかります。

<html>
<body>
    <script>
        var a = "Sachin";
        var b = "Tendulkar";
        document.write("Before swapping-"+ " "+ a + " " +b);
        [a,b] = [b,a];
        document.write("</br>");
        document.write("After swapping-"+ " " + a + " " +b);
    </script>
</body>
</html>

出力結果

Before swapping- Sachin Tendulkar
After swapping- Tendulkar Sachin

仕組みのポイント

[a, b] = [b, a] という構文では、まず右辺の配列 [b, a] が評価され、新しい配列が生成されます。その後、左辺のパターンに従って各要素が変数aとbへ順番に代入されるため、値が正しく入れ替わります。右辺が先に評価される仕組みのため、一時変数を明示的に用意する必要がないのです。

なお、セミコロンを省略しているコードでは、行頭が [ で始まる文が前の行の続きと解釈されることがあるため、文末にはセミコロンを付けておくことをおすすめします。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

    ブロックスコープ変数とはJavaScriptでブロックスコープ変数を宣言するには、ES2015（ES6）で導入された let および const キーワードを使用します。これらのキーワードで宣言された変数は、{ }（波括弧）で囲まれたブロックの中でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。let と const の違いlet は値の再代入が可能な変数を宣言するキーワードで、const は再代入ができない定数を宣言するキーワードです。どちらもブロックスコープを持つため、従来の var（関数スコープ）と異なり、意図しない変数の上書きや漏れを防ぐことができます。特別な