JavaScript 関数 戻り値

コード１

const add=(a,b)=>{
  console.log(a+b);
};
add(3,7);

出力

10

コード１は、
受け取る引数をaとbとして、
関数の処理部分を「a+b」の値を出力するようにし、
引数に「3」と「7」を渡して関数を呼び出しています。

PC君がこのコードを処理していく流れ？的なものを私の勝手なイメージで想像すると

・『引数「a」「b」、処理「a+bを出力」』の関数を発見！
↓
・発見した関数の引数に「3」と「7」を渡してコンソールに呼び出してやろう！
↓
（コンソール側）
・関数が送られてきたな！
「a」が「3」で「b」が「7」を受け取っていて、
それを足せばいいから出力は「10」だな！

という感じで「10」が出力されているというイメージですかね？

コード１−２

const add=(a,b)=>{
  console.log(a+b);
};
const sum=add(3,7);
consol.log(sum);

出力

undefined

しかしコード1−２のように、
定数「sum」を定義し、関数の呼び出しを代入、
そして定数「sum」を出力すると、
「undefined(値が存在せず定義されていないという意味)」
と出力されます。
というのも「add(3,7);」は関数に「3」と「7」を渡して関数を呼び出すだけで、
「add(3,7);」自体が別の値に置き換わったりしないので、
「undefined」と出力されました。

これもPC君のコードを処理していく流れ？的なものを私の独断なイメージで想像すると

・『引数「a」「b」、処理「a+bを出力」』の関数を発見！
↓
・『発見した関数の引数に「3」と「7」を渡してコンソールに呼び出す』
という関数呼出方法（呼出依頼ではない）をサム箱（定数「sum」）に代入してるみたいだね！
↓
（コンソール側）
・まだ関数呼び出し依頼こないなぁ、、、
↓
・「console.log(sum);」ってことはサム箱（定数「sum」）の出力か！
コンソールさんサム箱わたすんで出力おねしゃす！
↓
（コンソール側）
・お！出力依頼来た来た！
えーっとこの「サム箱」の中身の出力依頼か、、
ん？この箱の中身は関数呼出方法だけで呼出命令が入ってないぞ？
これは何を呼び出せばいいかわからんなぁ。
出力内容の値がないから「undefined」で出力しまーす！

という感じ？(笑)で「10」ではなく「undefined」が出力されてしまいます。

この定数「sum」に代入する「add(3,7);」の意味が、
今回でいう関数呼出方法ではなくて
「10」となったらコンソール君も迷わず出力してくれるはずです！

ここで役に立つのが関数の処理部分に記述することができる
「戻り値（return 値;）」です

コード２

const add=(a,b)=>{
  return a+b;
};
const sum=add(3,7);
console.log(sum);

出力

10

「return 値;」を関数の処理部分に記述すると、
関数の処理結果を「呼出元」に返して、
関数を呼び出す『呼出元「add(3,7);」』を「10」に変えてしまいます。
この返された値である「10」を「戻り値」と言います。

コード２は、
関数の引数「a」「b」に、
「add(3,7);」により「3」と「7」を渡し、
「a」と「b」を足した値「10」を呼出元である「add(3,7);」に返して、
その返された戻り値「10」を定数「sum」に代入、
値「10」が代入された定数「sum」を出力。
という記述です。

またまたPC君のコードを処理していく流れ的なものを私の独断と偏見のイメージで想像すると

・『引数「a」「b」、処理「戻り値「a+b」を呼出元に返す」』の関数を発見！
↓
・発見した関数の引数に「3」と「7」を渡し、
「a+b」の値「10」を戻り値として呼出元「add(3,7)」に返しまーす。
↓
・値「10」を返されたことで、
『関数呼出君「add(3,7)」』が「10」に変身！
↓
・サム箱（定数「sum」）を作って
さっき変身した戻り値「10」をサム箱に入れちゃうよ！
↓
（コンソール側）
・まだ関数呼び出し依頼こないなぁ、、、
↓
・「console.log(sum);」ってことはサム箱（定数「sum」）の出力か！
コンソールさんサム箱わたすんで出力おねしゃす！
↓
（コンソール側）
・お！出力依頼来た来た！
えーっとこの「サム箱」の中身の値は「10」ね〜。
てことで「10」を出力しまーす！

みたいな感じ？で無事「10」を出力することができました！

ちなみに今までの説明でもわかるかもですが、
「呼出元」が戻り値として「値」を受け取った段階で、
そいつにはもう関数を呼び出す機能は備わっていません。なので

コード３

const number=(a,b)=>{
   return a+b;
 };
 number(3,7);

出力

コード３の記述では、
「 number(3,7);」はreturnにより戻り値「10」となっていて、
本来の「関数に引数を渡して呼び出す」という機能がなくなっており、
他に「console.log();」等の記述もないため、
コンソールには何も出力されないという状況が生まれます。