57765


以下のラインでなぜ `abc` という文字列が `cba` と逆になるのか理解できません。

`reversed = char + reversed;`

[code]

    function reverse(str) {
        let reversed = "";
        for (let char of str) {
            reversed = char + reversed;
        }
        return reversed;
    };
    
    console.log(reverse("abc"));
[/code]


CC BY-SA 4.0
2019-09-01T07:06:35.470
57747
2019-09-02T07:24:35.523
2019-09-02T02:26:05.493
29826
22895
question
javascript
for of を使ったReverse Stringの挙動が分からない


「例示は理解の試金石」です。実際にこの関数がどのように動いているのか、各変数の内容を追いながら確かめてみましょう。

まず最初に変数 `reversed` は空文字列 `""` で初期化されます。

[code]

    let reversed = "";
    
[/code]

次に問題の for of です。

[code]

    for (let char of str) {
        reversed = char + reversed;
    }
    
[/code]

最初のループでは、`str` の最初のコードポイントである `"a"` が変数 `char` に代入されます。そして `char +
reversed`、つまり `"a" + ""` が新しく `reversed` に代入されます。

[code]

    char = "a", reversed = "a"
    
[/code]

次のループでは `str` の次のコードポイントである `"b"` が変数 `char` に代入され、`"b" + "a"` が `reversed`
に代入されます。

[code]

    char = "b", reversed = "ba"
    
[/code]

次のループでは `"c"` が `char` に代入され、`"c" + "ba"` が `reversed` に代入されます。

[code]

    char = "c", reversed = "cba"
    
[/code]

これでループから抜けます。最後に `return reversed` ということで `"cba"` が返されます。


CC BY-SA 4.0
2019-09-02T07:14:15.587
57765
2019-09-02T07:14:15.587
19110
57747
answer


@kunif さんのアドバイスのように下記のスニペットを実行することで、どのように逆になっていくか把握できるのではないでしょうか。

[code]

    function reverse(str) {
        let reversed = "";
        for (let char of str) {
            console.log("charには'" + char + "'が、reversedには'" + reversed + "'が入っています。");
            console.log("reversedは'" + char + "' + '" + reversed + "'が代入されて'" + char + reversed + "'になります。");
            reversed = char + reversed;
        }
        console.log("forが終わった時点でreversedには'" + reversed + "'が入っています。");
        return reversed;
    };
    
    console.log(reverse("abc"));
[/code]

@nekketsuu さんの回答とも類似していますが、せっかく書いたので投稿します。  
パソコンに入っているモダンなブラウザならば1行ごとに処理を止めて変数を読み込みながらデバッグ(ステップ実行と言います)もできます。

  * [Google Chrome](https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=ja)
  * [Firefox](https://developer.mozilla.org/ja/docs/Tools/Debugger)


CC BY-SA 4.0
2019-09-02T07:24:35.523
57766
2019-09-02T07:24:35.523
9820
57747
answer