JavascriptでCurry化したときの非同期処理

6695 ワード
Curry async JavaScript JavaScript テキストリンク

ちょっとハマったのでqiitaに書いて、同じところでハマった人の一助になれれば幸いです。
表題のとおり、関数をcurry化させてそのなかで非同期処理を書いたときの内容です。

下記の通り、curry化の2つ目の関数に非同期処理を書いた場合は、問題なく実装できました。

const hoge = (bar) => {
  return async (foo) => {
    const fuga = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(foo)
      }, 1000);
    })
    console.log(fuga)
  }
}
hoge('ichiro')('matsui')

この書き方で1つ目の関数で非同期処理がある場合、こう書けばいいと思ったのがエラーになってしまいます。

const hoge = async (bar) => {
  const fuga = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(bar)
    }, 1000);
  });
  console.log(fuga)
  return (foo) => {
    console.log(foo)
  }
}
hoge('ichiro')('matsui')
エラー内容
Uncaught TypeError: hoge(...) is not a function

どうしたものかとハマってしまいました。

こう書こう

const player = async () => {
  const hoge = async (bar) => {
    const fuga = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(bar)
      }, 1000);
    });
    console.log(fuga)
    return (foo) => {
      console.log(foo)
    }
  }
  const piyo = await hoge('ichiro')
  piyo('matsui') 
}

player()

このように非同期処理した結果を変数で受け取ってから2つ目の関数を書く。
これでエラーなく実装できました。