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