JavaScript　関数の書き方まとめ

## この記事のきっかけ
C言語からプログラミングの勉強を始め、
AtCoderでC++の記法を学び、
JavaScriptやReactの勉強をしていたら関数の書き方に混乱してきました。
備忘としてここにまとめます。

## まずは一覧

```js:js
[1]
function 関数名(引数1, 引数２){
  処理;
}

[2]
const 関数名 = function(引数1, 引数２){
  処理;
}

[3]  /* オブジェクト内では[2]のconstは省略できる */
関数名: function (引数1, 引数2){
  処理;
}


--------------
ここからアロー関数
--------------
[4]
(引数1, 引数2)=>{
    処理;
    return 返り値;
}

[5]  /* 引数がひとつの場合、()を省略可能　*/
引数1 => {
    処理;
    return 返り値;
}

[6]  /* 引数がない場合は()だけ記載 */
()=>{
    処理;
    return 返り値;
}

[7]  /* 中身が1行（return行)のみの場合、"return"も省略可 */
(引数1, 引数2)=>{返り値;}


----------------
[special]
シンプルな書き方紹介
----------------
1. () => {返り値;}
2. 引数 => {返り値;}

```

## JSはオブジェクト言語なので、C言語っぽい書き方ができる
まずは[1]~[3]から。

### 基本形[1]

```C:C言語
// 戻り値のある関数
戻り値の型 関数名(型名 引数1, 型名 引数2, ...){
    処理;
    return 戻り値;
}

// 戻り値のない関数
void 関数名(型名 引数1, 型名 引数2, ...){
    処理;
}
```

```js:js
// 戻り値のある関数
[1]
function 関数名(引数1, 引数2, ...){
    処理;
    return 戻り値;
}
```
こちらを基本形[1]とします。

実際に数値等を入れてみたのが下記。

```C:C_example
float double_num(int num){
    return num*2;
}
int main(){
    int ans;
    ans = double_num(4);
    printf("%d", ans);
}
```

```js:js [1] example
function doubleNum(num){
    return num*2;
}
const ans = doubleNum(4);
console.log(ans);
```
いずれも出力結果は4となります。

### 基本形[2]: 関数を変数に格納
**JavaScriptでは**、数字や文字列だけでなく、**関数もオブジェクト**です。
ですから、**数字や文字列と同じように、関数も変数に格納**できます。

すると、次のような応用が効くことがわかります。
```JavaScript:js
[2]
const 関数名 = function (引数1, 引数2, ...){
    処理;
    return 戻り値;
}
```
```js:js [2] example
const doubleNum = function(num){
    return num*2;
}
// 以下は[1]の例と同じ
const ans = doubleNum(4);
console.log(ans);
```

### [3]: 別オブジェクトの要素のときはconstも消える
要素を複数もつオブジェクトを想定します。
```js
const apple = {
  color: 'red',
  size: ９ｃｍ,
  name: ['りんご', '赤リンゴ', 'ふじ']
}
```
ここに`function greet()={console.log("Hi! This is an apple!");}`という要素を加えると次のようになるでしょうか？
```js:[1]型から[2]型への書き換え
[1]
function greet()={console.log("Hi! This is an apple!");}
[2]
const greet = function(){console.log("Hi! This is an apple!");}
```
```diff_javascript: 要素へ挿入
const apple = {
   color: 'red',
   size: ９ｃｍ,
   name: ['りんご', '赤リンゴ', 'ふじ']
+  greet: function(){console.log("Hi! This is an apple!");}
}
```
:::note warn
[3]型はオブジェクトの要素としてしか登場しない
:::

### アロー関数[4]~[7]
これは上記一覧を覚えてしまったほうが早そうです。

---
## 応用編
下記のC言語関数を、JavaScriptで記載してみます。

#### 元になるC言語記述
```C:C言語
#include <stdio.h>

float pi=3.14;
float calc_area(float r){
    area = r * r * pi;
    return area;
}
float calc_length(float r){
    length = 2 * pi * r;
    return length;
}
void prt(float r, float a, float l) {
    printf("半径%.1fの円の面積は%.2f、円周の長さは%.2f\n", r, a, l);
}


// ここで関数を計算する。
int main(void) {
    float r = 10.0f, gross_area = 0, len = 0;
    gross_area = calc_area(r);
    len = calc_length(r);
    prt(r, gross_area, len);
 
    return 0;
}
```

#### JavaScript
##### [1]で書き換える場合
```js:js [1]
const pi=3.14;
function calc_area(r){
    area = r * r * pi;
    return area;
}
function calc_length(r){
    length = 2 * pi * r;
    return length;
}
function prt(r, a, l) {
    console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);
}

// ここで関数を計算する。
function main() {
    const r = 10.0;
    let gross_area = 0;
    let len = 0;
    gross_area = calc_area(r);
    len = calc_length(r);
    prt(r, gross_area, len);
}
```

##### [2]で書き換える場合
```js:js [2]
const pi=3.14;
const calc_area = function(r){
    area = r * r * pi;
    return area;
}
const calc_length = function(r){
    length = 2 * pi * r;
    return length;
}
const prt = function(r, a, l){
    console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);
}

// ここで関数を計算する。
const main =function(){
    const r = 10.0;
    let gross_area = 0;
    let len = 0;
    gross_area = calc_area(r);
    len = calc_length(r);
    prt(r, gross_area, len);
}
```

##### アロー関数を使って書き換える場合
```diff_javascript:js [arrow]_途中経過
const pi=3.14;
- const calc_area = function(r){
-     area = r * r * pi;
-     return area;
- }
- const calc_length = function(r){
-     length = 2 * pi * r;
-     return length;
- }

const prt = function(r, a, l){
    console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);
}

// ここで関数を計算する。
const main =function(){
    const r = 10.0;
    let gross_area = 0;
    let len = 0;

-    gross_area = calc_area(r);
+    gross_area = {r => r*r*pi;}
-    len = calc_length(r);
+    len = {r => 2*r*pi;}

    prt(r, gross_area, len);
}
```
`calc_area`,`cale_length`はアロー関数[7]によりだいぶコンパクトになりました。

```diff_javascript:js [arrow]_途中経過
const pi=3.14;

-   const prt = function(r, a, l){
-     console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);
-   }

// ここで関数を計算する。
const main =function(){
    const r = 10.0;
    let gross_area = 0;
    let len = 0;

+   gross_area = {r => r*r*pi;}
+   len = {r => 2*r*pi;}

-   prt(r, gross_area, len);
+   (r, gross_area, len) => 
+   {
+     console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);
+   }
```
[6]を使ってさらにコンパクトにしました。
最終盤はこうなります。
```js:js [arrow]_最終形
const pi=3.14;

// ここで関数を計算する。
const main =function(){
    const r = 10.0;
    let gross_area = 0;
    let len = 0;

    gross_area = {r => r*r*pi;}
    len = {r => 2*r*pi;}

    (r, gross_area, len) => {
        console.log("半径",r,"の円の面積は",a,"、円周の長さは",l);}
```

main関数の部分はあえて[2]のまま残してありますが、他の関数に組み込むときなど、アロー関数に変えても問題ありません。

おしまい。