JavaScript 寺子屋 6 / 関数の中で return すると、その時点で関数が終了する

以下のコードを実行するとどうなると思いますか？多分思いつく選択肢は以下の二つですよね。

"JavaScript"

const func1 = () => {
  return "this is returned value";

  console.log("this is console");
};

const res1 = func1();
console.log(res1);

return が実行されたら関数が終了し、それ以降の処理は全く実行されない

結論からいうと、後者の選択肢、つまり "this is returned value" だけが表示されます。

なぜか。

JavaScript の関数は return を実行すると、その時点で「全ての処理を終了」させるからです。ですから return より後ろにある console.log() は「絶対」に実行されません。絶対にです。

return をしたらその時点で関数が終了するというのは地味な現象なので、あまり JavaScript に馴染みがない人は意識していないかもしれませんが、これはとても大事な機能です。

それからなるべく早く return が実行されるようにすることも、読みやすいコードを書くために役立ちます。

なぜなら、コードリーディングをする際に return が実行されるタイミングがわかった時点で、それ以降はもう読まなくていいからです。「読まなくてもいいところを明確にする」というのは可読性の高いコードを書く上で重要です。

先ほどと似たコードですが、return だけを使って値を全く返さないようにすると、何が返ってくるでしょうか。

"JavaScript"

const func2 = () => {
  return;

  console.log("this is console");
};

// undefined が返ってくる
const res2 = func2();
console.log(res2);

undefiend が返ってきます。もちろんその時点で関数の処理は終了するので console.log("this is console") は実行されずじまいです。

次のように明示的に undefined を返しても、一個上のコード同じことになりますね。当然ですが。ただし、あまりこう書く人はいません。結果が同じだからです。

"JavaScript"

const func3 = () => {
  return undefined;

  console.log("this is console");
};

const res3 = func3();
console.log(res3);

今日は以上です！