Javascriptの非同期処理について

Firebaseを使用したアカウント登録処理を実装しようとしております。
非同期での振る舞いの中で理解できない点があったため質問致します。

アカウントを作成
戻り値を使用しdisplayUserNameを登録
displayUserName登録後にログイン

のような流れを実現したいと思っております

// アカウント登録処理
createUser(user) {
  createUserWithEmailAndPassword(this.auth,user.mail, user.password)
      .then((result) => {
        this.addUserName(result.user, user.userName);
        this.login(user);
      })
      .catch((erroe) => console.log(error));
  }
}

// userName登録処理
addUserName(user: User, userName: string) {
    updateProfile(user, { displayName: userName })
      .then(() => {})
      .catch((erroe) => console.log(error));
  }

// login処理
 login(user) {
    signInWithEmailAndPassword(this.auth, user.userMail, user.userPassword)
      .then((result) => console.log(result))
      .catch((error) => console.log(error));
  }

最初のアカウント登録関数の非同期処理終了後、thenの中で
２つの非同期の処理を行っているものと思っております。
現状タスク通りのdisplayUserName登録後にログインするになっているのですが、login関数が同期的に行われている理由がわかりません。
addUserNameの戻り値はvoidでupdateProfileはpromise<void>なのですが、非同期で行われていないのでしょうか？

試したこと
addUserNameが非同期だと思っていたので、

addUserName(user: User, userName: string) {
    updateProfile(user, { displayName: userName })
      .then(() => {
　　  /*ここで非同期ではない時間のかかる処理*/
　　　})
      .catch((erroe) => console.log(error));
 　　 }

を試してみたのですがタスク通りの動きになります。
想像では、login関数のほうが早く処理されると思ってしまっています。
どこの認識が間違っているのでしょうか？

maisumakun

2022/06/02 03:56

> login関数が同期的に行われている「何に対して」同期的、という話でしょうか。

sho.cat

2022/06/02 04:11

修正依頼ありがとうございます。知識不足で適切な返答でなかったら申し訳ありません。同期的というのはaddUserName関数が終わった後にlogin関数が実行されることを指しています。 thenの中のaddUserName関数とlogin関数が非同期で行われると思っていまして login関数内の処理が先に行われない理由が分かっておりません。

maisumakun

2022/06/02 04:15

> （中略）を試してみたのですが本当に、「時間のかかる処理」よりあとにログインが進行していると確認できましたか？（updateProfileとsignInWithEmailAndPasswordを「開始する」順番だけ書いた順になっている、というような状況も考えられます）

sho.cat

2022/06/02 04:23 編集

愚直な方法なのですが、下記を試しconsoleが　1 2 3 ・・・200000 resultでしたのでそのように思っておりました。 ``` addUserName(user: User, userName: string) { updateProfile(user, { displayName: userName }) .then(() => { for( let i = 0;i<200000;i++){ console.log(i) } 　　　}) .catch((erroe) => console.log(error)); 　　 } login(user) { signInWithEmailAndPassword(this.auth, user.userMail, user.userPassword) .then((result) => console.log(result)) .catch((error) => console.log(error)); } ```

maisumakun

2022/06/02 04:31

forループは（途中でawaitしない限り）全体が同期的に実行されます。得られた結果は、「updateProfileの実行完了のほうがsignInWithEmailAndPasswordの実行完了より早かった」というだけの意味しかありません。

sho.cat

2022/06/02 04:39 編集

間違っていたらすみません。 forループが同期的に行われるので updateProfileの実行完了のほうがsignInWithEmailAndPasswordの実行完了より早かったというのは結果的に非同期の確認にはならないのでしょうか？(例えばforループにもっと時間をかけるなど)

maisumakun

2022/06/02 05:04 編集

> 結果的に非同期の確認にはならないのでしょうか？同期的であっても非同期的であっても、結果のような出力が得られる挙動になりうるので、「どちらかを結論づける根拠にはならない」です。