この記事のきっかけ

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

まずは一覧

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言語

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

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

js

// 戻り値のある関数
[1]
function 関数名(引数1, 引数2, ...){
    処理;
    return 戻り値;
}

こちらを基本形[1]とします。

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

C_example

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

js [1] example

function doubleNum(num){
    return num*2;
}
const ans = doubleNum(4);
console.log(ans);

いずれも出力結果は4となります。

基本形[2]: 関数を変数に格納

JavaScriptでは、数字や文字列だけでなく、関数もオブジェクトです。
ですから、数字や文字列と同じように、関数も変数に格納できます。

すると、次のような応用が効くことがわかります。

js

[2]
const 関数名 = function (引数1, 引数2, ...){
    処理;
    return 戻り値;
}

js [2] example

const doubleNum = function(num){
    return num*2;
}
// 以下は[1]の例と同じ
const ans = doubleNum(4);
console.log(ans);

[3]: 別オブジェクトの要素のときはconstも消える

要素を複数もつオブジェクトを想定します。

const apple = {
  color: 'red',
  size: ９ｃｍ,
  name: ['りんご', '赤リンゴ', 'ふじ']
}

ここにfunction greet()={console.log("Hi! This is an apple!");}という要素を加えると次のようになるでしょうか？

[1]型から[2]型への書き換え

[1]
function greet()={console.log("Hi! This is an apple!");}
[2]
const greet = function(){console.log("Hi! This is an apple!");}

要素へ挿入

const apple = {
   color: 'red',
   size: ９ｃｍ,
   name: ['りんご', '赤リンゴ', 'ふじ']
+  greet: function(){console.log("Hi! This is an apple!");}
}

[3]型はオブジェクトの要素としてしか登場しない

アロー関数[4]~[7]

これは上記一覧を覚えてしまったほうが早そうです。

応用編

下記のC言語関数を、JavaScriptで記載してみます。

元になる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 [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 [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);
}

アロー関数を使って書き換える場合

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]によりだいぶコンパクトになりました。

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 [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]のまま残してありますが、他の関数に組み込むときなど、アロー関数に変えても問題ありません。

おしまい。