Promiseの実行順序

Question

前提・実現したいこと

JavaScriptのPromise.finally関数の仕様について知りたいのです。

もともとのソースコード(以下、"変更前コード")は、『ハンズオンNode.js』という書籍のサンプルコードです。
変更前コードに対し、
「アロー関数式の記載時は、"{}"でくくるように統一したほうが良い」
と考えたので
まず、Promise.finally関数の引数として関数を指定するときに、"{}"でくくるようにしました。
(以下、"変更後コード")

発生している問題・エラーメッセージ

####問題点：
変更前コードと変更後コードでコンソールへの出力内容は同じだと考えていたのですが、
以下のように変わってしまっています。
finallyメソッドの仕様(アロー関数式の仕様?)としてこのような違いが出てくるのであれば、
その部分についてご教示いただきたく思います。

#####コンソールへの出力内容：

######変更前コード

Promise { <pending> }

finally()で1秒経過

foo

※">"が引用だと解釈されてしまっています。

処理順は以下の通り？
1)finally関数が呼び出しているコールバック関数の戻り値が解決する
2)finally関数が戻り値(Promise)を返す

######変更後コード

Promise { <pending> }

foo

finally()で1秒経過

※">"が引用だと解釈されてしまっています。

処理順は以下の通り？
1)finally関数が戻り値(Promise)を返す
2)finally関数が呼び出しているコールバック関数の戻り値が解決する

該当のソースコード

/*変更前コード*/
.editor
Promise 
  .resolve('foo') 
  .finally(() => 
    new Promise(resolve => 
      setTimeout( 
        () => { 
          console.log('finally()で1秒経過') 
          resolve() 
        }, 
        1000 
      ) 
    ) 
) 
  .then(console.log) 

/*変更後コード*/
.editor
Promise 
  .resolve('foo') 
  .finally(
      () => { // ここに{を追加
      new Promise(resolve => 
        setTimeout( 
          () => { 
            console.log('finally()で1秒経過') 
            resolve() 
          }, 
          1000 
        ) 
      ) 
    }　// ここに}を追加
  ) 
  .then(console.log) 

試したこと

以下の2サイトを確認したのですが、私は実行順序の違いそのものの記載を見つけることができませんでした。
・finally関数の仕様
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

・アロー関数式の仕様
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

補足情報（FW/ツールのバージョンなど）

・実行環境
OS:Windows 10 Pro　20H2
node.js:v14.17.5(REPL上で実行しています。)

・書籍のサンプルコード置き場
https://github.com/oreilly-japan/hands-on-nodejs/tree/master/ch02

Answer 1

コールバックの記述に「{}」をいれたのであれば、returnされなくなります

new Promise(resolve => 
↓↓↓
return new Promise(resolve => 

Comments

[blackcloud]

ご回答ありがとうございます。
ご指摘いただいいた通り修正したところ、変更前コードとコンソールの出力が一致しました。
またアロー関数式の仕様を見直したところ、

"同様に、本文に処理の追加の行が必要な場合は、中括弧に加えて "return" を入れなおす必要があります (アロー関数は "return" する場所や返値を魔法のように推測できるわけではありません)。"

という一文がありました。
これは"中括弧を使う⇒デフォルトでは何も返さない"ということだったのですね。
今回の例では、関数が1行なので、returnも不要なのかと考えておりました。

とても勉強になりました。重ね重ねありがとうございます。

[yambejp]

参考までに
const a=1;
console.log((()=>a)()); // 1
console.log((()=>{a})()); // undefined
console.log((()=>({a}))()); // {a:1}

Answer 2

.finallyのコールバック関数がPromiseを返す場合、.finally自体の返り値となるPromiseはコールバック関数が返したPromiseも待つようになります。

• () => new Promise()の場合、コールバックはPromiseを返す
• () => { new Promise() }の場合、Promiseはつくられるけど返り値にはならない

という違いがあります。

Comments

[blackcloud]

ご回答ありがとうございます。
問題が解決いたしました。

アロー関数式の仕様を見直したところ、

"同様に、本文に処理の追加の行が必要な場合は、中括弧に加えて "return" を入れなおす必要があります (アロー関数は "return" する場所や返値を魔法のように推測できるわけではありません)。"

という一文がありました。
これは"中括弧を使う⇒デフォルトでは何も返さない"ということだったのですね。
今回の例では、関数が1行なので、returnも不要なのかと考えておりました。

ご回答の内容が、とても勉強になりました。
言語仕様の細かいところについて、より勉強を進めるよう精進いたします。
重ね重ねではありますがありがとうございます。