Javascript funciónがわからない

Question

función calcCircle(radius) {
return radius * radios * 3.14;
}

función callFunc() {
área = calcCorcle(5);
return área;
}

console.log(callFunc());

現在Javascriptを勉強しているのですが関数のところでつまづいています。
上にあげたコードの説明をしてもらえないでしょうか。

Answer 1

function calcCircle(radius) { 
          return radius * radius * 3.14; 
} 

function callFunc() { 
          area = calcCircle(5); 
         return area; 
} 

console.log(callFunc()); 

まず、エラーが出ないよう、関数名、変数名などを修正しました。
出力結果は「78.5」でした。円の面積を求めるコードでしょうね。

---

JavaScriptに限らず、C言語など手続き型指向の言語には、
たいてい関数があります。

ややこしいですが、関数型指向の言語の関数とは別です。
つまり、数学の関数とは別です。

手続き型指向の言語における「関数」とは、機能を持った部品です。
文章が段落に分かれているように、
人間に認識しやすくするため、関数に分けて構造化します。

上のサンプルコードを解説しますと、

console.log(callFunc()) → function callFunc() →
function calcCircle → console.log（コンソールに表示）

という流れで関数がリレー的に呼ばれて、
円の面積を求めて表示するという目的を果たします。

しかし、そもそもなぜ関数化するか、もう少し補足します。

まあ今回だといかにも例のための例で、
関数化する意味があんまり分からない（回りくどく思える）と思いますが、
プログラムが百行以上になったとき、関数に切り出すのは非常に重要です。

もし関数への切り出し（構造化）ができないと、
プログラムが長くなるほど複雑性が増えてしまって破たんします。
関数化は大きなプログラムを作るのに必須だと思ってください。

Answer 2

まず一番最初のこの関数、

function calcCircle(radius) {
          return radius * radios * 3.14;
} 

これは円の面積を求める関数だというのはお分かりかと思います。
念のため解説しますと、

function calcCircle(radius) {

この行で「calcCircleという関数を宣言します。この関数は予めradiusという外からデータを受け取るための変数を持っています」と宣言してます。続いて

        return radius * radius * 3.14;

この行では実際の関数の動作を指示しています。「半径 × 半径 × 3.14」をした結果を、関数を呼び出したプログラムに返すように指示しています。
そして

}

この括弧で関数の動作の定義を終了しています。

問題は次の関数とconsole.log()からでしょうか。

function callFunc() {
          area = calcCircle(5);
         return area;
} 

まずこの関数の1行目では「callFuncという関数を定義します。この関数は外からデータを受け取る変数を何も持っていません」と宣言しております。
2行目では「areaという変数にcalcCircleのradiusに5を代入し、計算した結果を代入します」と指示しています。
そして3行目ではareaの値を関数を呼び出したプログラムに返す指示をしています。

最後です。

console.log(callFunc()); 

これで先ほどのcallFuncを呼び出して、その結果が返ってくるわけですが……。結果として以下のように関数を見に行っています。

console.log → callFunc() → calcCircle(radius)

結局のところ、

• console.logがcallFuncの結果を出す
• callFuncはcalcCircleのradiusに5を代入した結果を出す
• calcCircleはcallFuncに「radiusに5を代入した計算をして」と言われたので計算して結果を出す

という流れです。

長々と説明して余計ややこしくなったかもしれませんが、参考になれば幸いです。

Answer 3

function calcCircle(radius) {
          return radius * radius * 3.14;
}

function callFunc() {
         area = calcCircle(5);
         return area;
}

console.log(callFunc());

なぜスペイン語なのか不明ですが、上記の通り英語でないと動作しません。
上から、
1.calcCircle関数の宣言。
2.callFunc関数の宣言。
3.そして、console.log(...となっています。

実行順番としては、
console.log内のcallFunc()でcallFunc関数が呼ばれます。
callFunc内ではcalcCircle関数を呼び、引数に5を与えています。
calcCircle関数では、引数をradiusで受け取り、
radius * radius * 3.14 つまり 5 * 5 * 3.14 の計算結果をreturn文によって呼び出し元へ返しています。
callFuncでは戻り値78.5(5 * 5 * 3.14の計算結果)をarea変数で受け取り、それを呼び出し元へ返しています。
最初の呼び出し元へ値78.5が返り、
console.logに渡り、
ブラウザの開発者ツール内に表示されます。

console.logの結果はブラウザの開発者ツールを表示させなければ表示されません。