戻り値を使用する判断基準について理解したい

1. 実現したいこと

returnは具体的にどのようなケースで必要になるのか理解したいです。

2. 前提

javascriptでビンゴゲームの作成に挑戦しています。

作成の過程で、「columns配列の内容を出力する為には、
createColumn関数の結果をreturnで返す必要がある」と学習しました。

お手本のコードは以下です。

js
1  function createColumn (col) {
2    
3    const source = [];
4    for (let i = 0; i < 15; i++){
5      source[i] = i + 1 + 15 * col;
6    };
7  
8    const column = [];
9    for (let i = 0; i < 5; i++ ) {
10      column[i] = source.splice(Math.floor(Math.random() * source.length), 1)[0];
11    }
12
13    return column;
14  }
15
16  const columns = [];
17  columns[0] = createColumn(0);
18  columns[1] = createColumn(1);
19  columns[2] = createColumn(2);
20  columns[3] = createColumn(3);
21  columns[4] = createColumn(4);
22  columns[2][2] = "FREE";
23
24  console.table(columns);

3. 課題

なぜ今回だけreturnで値を返す必要があるのか分かりません。

そもそも戻り値には2つの意義があると考えます。
➀関数呼び出し時に、呼び出し元に値を返す
➁その時点で処理を停止する

今回は➀に準じてreturnを使用したのだと思います。

ですが、これまで関数を定義してきた際に、
戻り値を指定する機会はあまりありませんでした。

例えば、ストップウォッチを作成するお手本コードにおいて、
同様に関数が呼び出されていますが、returnは使用されていません。

js
1'use strict';
2
3{
4  const timer = document.getElementById('timer');
5  const start = document.getElementById('start');
6  const stop = document.getElementById('stop');
7  const reset = document.getElementById('reset');
8
9  let startTime;
10  let TimeoutId;
11  let elapsedTime = 0;
12
13  function countUp() {
14    const d = new Date(Date.now() - startTime + elapsedTime);
15    const m = String(d.getMinutes()).padStart(2, '0');
16    const s = String(d.getSeconds()).padStart(2, '0');
17    const ms = String(d.getMilliseconds()).padStart(3, '0');
18    timer.textContent = `${m}:${s}.${ms}`;
19
20    TimeoutId = setTimeout(() => {
21      countUp();
22    }, 10);
23  }
24
25  function Initial() {
26    start.disabled = false;
27    stop.disabled = true;
28    reset.disabled = true;
29};
30
31  function Running() {
32    start.disabled = true;
33    stop.disabled = false;
34    reset.disabled = true;
35};
36
37function Stopped() {
38  start.disabled = false;
39  stop.disabled = true;
40  reset.disabled = false;
41};
42
43  Initial();
44
45  start.addEventListener('click', () => {
46    Running() ;
47    startTime = Date.now();
48    countUp();
49  });
50
51  stop.addEventListener('click', () => {
52    Stopped() ;
53    clearTimeout(TimeoutId);
54    elapsedTime = Date.now() - startTime;
55  });
56
57  reset.addEventListener('click', () => {
58    Initial();
59    timer.textContent = "00:00.000";
60  });
61}

関数を呼び出して値を使用するならば、
同様に➀に準ずるのではかと考えましたが、
returnには使用するケースとそうでないケースがあるのでしょうか。

また、あるとするならばその判断基準は何になるのでしょうか。

4. 試してみたこと

戻り値の定義、使い方や使用例を検索しましたが、
具体的なイメージが掴めませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

➀関数呼び出し時に、呼び出し元に値を返す
➁その時点で処理を停止する

今回は➀に準じてreturnを使用したのだと思います。

returnの意味の解釈については、質問者様のおっしゃられている通りです。
そしてなぜストップウォッチにはいらないのか、という理由ですが、グローバルの変数の値を変えているからです。

return不要の例

元の数字に10を足す処理をする関数です。

javascript
1let number = 0;
2
3function plus10() {
4	number = number + 10;
5} 
6
7plus10();
8console.log(number); // 10

グローバル変数に直接値を代入しなおしている（グローバル変数を書き換えている）ので、returnが不要です。
これがストップウォッチにある関数の原理です。

returnがいる例

javascript
1function plus10(num) {
2	return num + 10;
3}
4
5let result = plus10(5);
6console.log(result); // 15

こちらの例では、グローバル変数をいじっているわけではなく、ただたんに値を生成しているだけです。
従って、returnで値を戻してどこかに格納してやる必要があります。
これがビンゴゲームの原理です。

使い分け

グローバル変数を書き換える「returnなし」でたくさん関数をつくると、グローバルに変数だらけになってしまうと思います。
なので基本的に「returnあり」での処理を優先させた方が、グローバルがスッキリ綺麗ですし、色々便利です。
ただし、いろいろな関数で共通して使用される値の場合はグローバル変数として用意しておいて、必要に応じて「returnなし」で値を書き換えるようにします。

投稿2022/10/02 08:53

編集2022/10/02 09:38