markdown JavaScript的回のの使い所

Posted 2021-05-05

# rerutnの使い方

自分のアウトプット用に作成しました。

戻り値ってどのタイミングで使ったらいいの？
という疑問がサッと答えられなかったので戻り値について調べました。

## 戻り値

関数の処理結果を呼び出し元に戻す仕組み。<br>
わかりやすいけど戻すタイミングって何？となったことから始まりました。


まずreturnを使わないときだとこのようになります。

```
function sumArray(list){
	let sum = 0;
  for(let num of list){
  	sum += num;
  }
 console.log("合計値: " + sum); 
}

let list1 = [5,6,10,55,4,9],
	list2 = [2,7,66,4,9],
  list3 = [8,6,13,6,9,11,5];
    
sumArray(list1);
sumArray(list2);
sumArray(list3);

実行結果
合計値: 89
合計値: 88
合計値: 58

```

次にreturnの場合

```
function calcArraySum(list){
	let sum = 0;
  for(let num of list){
  	sum += num;
  }
  return sum;
}

let list1 = [5,6,10,55,4,9],
	list2 = [2,7,66,4,9],
  list3 = [8,6,13,6,9,11,5];

let sum1 = calcArraySum(list1),
	sum2 = calcArraySum(list2),
  sum3 = calcArraySum(list3);
    
console.log("list1の合計値: " + sum1);
console.log("list2の合計値: " + sum2);
console.log("list3の合計値: " + sum3);

実行結果
list1の合計値: 89
list2の合計値: 88
list3の合計値: 58
```

合計値は同じです。

最初の関数のときは、関数内でconsole.logが出力されておりそこに変数list1/list2/list3をアクセスして出力しています。<br>
関数のみの実行です。

次のreturnを使った関数は計算を行い、それを出力元のsumに合計値を返しています。<br>
この関数の目的は『合計値の出力が目的』だったため合計値を返しました。

その関数で行った計算結果を変数に格納してそれぞれconsole.logで出力しています。<br>
基本的に呼び出し側でreturnを受け取らないとならないので変数に代入しています。


returnがないほうがソースコードがきれいじゃない？<br>
となる気がしますが、returnはあっても良いし無くてもよいのです。フリーダムなのです。<br>
returnを使うかどうかは作成した関数をどのように使用するかということ。つまり目的です。


ここで合計値を求めるのに、平均値を求めるのも加えます。


```
function calcArraySum(list){
	let sum = 0;
  for(let num of list){
  	sum += num;
  }
  return sum;
}

function calcAve(list){
	let sum = calcArraySum(list),
  		length = list.length;
  return sum / length;
}

let list1 = [5,6,10,55,4,9],
    list2 = [2,7,66,4,9],
  	list3 = [8,6,13,6,9,11,5];
    
 let sum1 = calcArraySum(list1),
 			sum2 = calcArraySum(list2),
      sum3 = calcArraySum(list3);

let ave1 = calcAve(list1),
		ave2 = calcAve(list2),
    ave3 = calcAve(list3);
    
console.log("list1の合計: " + sum1 + ";平均: " + ave1);
console.log("list2の合計: " + sum2 + ";平均: " + ave2);
console.log("list3の合計: " + sum3 + ";平均: " + ave3);
```

最初の関数でreturnしたことで一度計算が終わります。
その後その関数結果をさらに次の関数で使用することができるようになるのです。

returnを使うときの状況はこのように自由です。目的を持って関数を作ると作りやすいと思います。