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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/10/02 23:42