JavaScriptの奇妙な構文について質問です

Question

現在Reactのチュートリアルのtic-tac-toe gameの最後の練習問題をやっている途中です。
自分で色々考えてみた後に答えを探してみるとここにありました。
https://codepen.io/m0neysha/pen/PWJyEx?editors=0010

その練習問題の4つ目に
4. Add a toggle button that lets you sort the moves in either ascending or descending order.
というのがありその部分のコードが上のリンクの162行目にあるのですが、これがよくわかりませんでした。

{(() => this.state.ascending === true? <ol>{moves}</ol> : <ol>{moves.reverse()}</ol>) ()}

this.state.ascendingがtrueのときは<ol>{move}</ol>を返せ、
this.state.ascendingがfalseのときは<ol>{move.reverse()}</ol>を返せとこの行で行いたい目的はわかるのですが、構文の意味がわかりません。
特に最後に()が付されているのが理解できません。

恐らくアロー関数に関することだと思いこのサイトを参照してみると以下のように書いてありました。

var a = b = c = d = e = f = g = h = 5

var fn = a => b = c => d = e = f => g => h
console.log(fn()()()())
console.log(a,b,c,d,e,f,g,h)

これに従うと関数宣言を行い、その後関数を実行する時にその関数が入れ子になっていれば「()」が必要となるというふうに取れるのですが、問題のコードは実行時に急に「()」が付いています。

es6に詳しくないのでどういったキーワードで検索すれば求めていることを知れるのかわからず困っています。
簡単な例を提示して解説して頂けるとうれしいです。
よろしくお願いします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、一旦「解決済」にされてはいかがでしょうか。

Answer 1

{(/*関数*/)()} //こうなっているだけでは。

// こういう構文と同じ
let test = (function(){return 'text'})(); // 'text' が変数testに入る

/* 関数部分を冗長に書くなら */
() => { return this.state.ascending === true? <ol>{moves}</ol> : <ol>{moves.reverse()}</ol>; }

【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

Answer 2

render() { 
    const renderSomething = () => {
        return this.state.ascending ? <ol>{moves}</ol> : <ol>{moves.reverse()}</ol>
    }

    return (
        {renderSomething()}
    )
}

やってることはこれと同じです。無名関数を即時関数として実行しているので、読みなれないと読みづらいだけで。

Comments

[退会済みユーザー]

回答ありがとうございました！
僕が検索をかけるべきキーワードは「アロー関数」ではなく「即時関数」でした。
即時関数のことを知らなかったので混乱したみたいです。ありがとうございました。