window.location.href に return が必要な理由

JavaScriptのリダイレクト処理でやりがちなミスについて、同じ過ちを繰り返さないよう記事に残します。

誤ったイメージ

// googleへのリダイレクト処理が実行されれば後続のYahooへのリダイレクトは実行されないはず
if (true) {
    window.location.href = 'https://www.google.co.jp/';
}
window.location.href = 'https://www.yahoo.co.jp/';

googleにリダイレクトされるはず。リダイレクト処理が実行中なので後続のYahooへのリダイレクトは実行されないはず。
しかし、実際にはgooleではなくYahooにリダイレクトされてしまう。

実際の挙動

googleにリダイレクトされるはずが、Yahooにリダイレクトされてしまう

なぜか？

googleへのリダイレクト処理が実行されている間、後続のyahooへの処理が実行されるため。
言い換えれば、returnがないので後続の処理が続けて実行されている。

if (true) {
    window.location.href = 'https://www.google.co.jp/';
    // 'return'がないので後続の処理が続けて実行される
}
window.location.href = 'https://www.yahoo.co.jp/';

returnを記述

// googleにリダイレクトされるので問題ない
if (true) {
    return window.location.href = 'https://www.google.co.jp/';
} else {
    return window.location.href = 'https://www.yahoo.co.jp/';
}

returnを記述することで、想定通りGoogleへのリダイレクトが実行され、後続の処理が止まる

なぜreturnを書かなくて良いと考えてしまったのか？

あるコードでreturnを書かずにwindow.location.hrefを実行している箇所がありました。
そのコードは関数の最後に記述されており、後続の処理がないためreturnを書かずとも問題なく動作していました。

恥ずかしながら、「JavaScriptのリダイレクト処理にはreturnが不要なんだな」という先入観が生まれ、リダイレクト処理がうまくいかない事態に陥り、解決に時間を費やすことになりました・・・

最後に

「他のコードがこうだから」
「たぶんこうなるだろう」
「とりあえずこれ書いておけばいいよね」
少し考えればわかることでも、こうした先入観や思い込みでエラーにハマってしまうことがあります。
思考停止せず、一旦立ち止まって理解を深める姿勢を大切にしていきたいものです。