JavaエンジニアによるJavaScript入門3(関数、アロー関数、無名関数、コールバック関数)

## 関数
| 関数 | 説明 | 
|:-:|:-:|
|ユーザ定義関数 |  自分で自由に作れる関数 |  
|  組み込み関数 |  準備されてる関数  | 
***
### ユーザ定義関数
引数の書き方はJavaもJavaScriptも同じ。
戻り値がある場合、JavaScriptは関数の処理の最後に「return」を書くだけ。
Javaと違い関数名の前に戻り値の型の宣言はいらない。

#### Javascript（引数：なし,戻り値：なし）

| 引数 | 戻り値 | 
|:-:|:-:|
|なし |  なし |  

``` javascript
function test(){
    console.log('test');
}
test();
```
【コンソール出力結果】

``` text
test
```

#### Java（引数：なし,戻り値：なし）
| 引数 | 戻り値 | 
|:-:|:-:|
|なし |  なし |  

``` java
public static void main(String[] args) {
	test();
}

public static void test() {
	System.out.println("test");
}
```
【コンソール出力結果】

``` text
test
```
***
#### Javascript（引数：あり,戻り値：なし）
| 引数 | 戻り値 | 
|:-:|:-:|
|あり |  なし |  

``` javascript
function getComment(str){
    console.log(str);
}
getComment('コメントをとるよ');
```
【コンソール出力結果】

``` text
コメントをとるよ
```
#### Java（引数：あり,戻り値：なし）
| 引数 | 戻り値 | 
|:-:|:-:|
| あり |  なし |  

``` java
public static void main(String[] args) {
	getComment("コメントをとるよ");
}

public static void getComment(String str) {
	System.out.println(str);
}
```
【コンソール出力結果】

``` text
コメントをとるよ
```
***
#### Javascript（引数：なし,戻り値：あり）
| 引数 | 戻り値 | 
|:-:|:-:|
| なし | あり |  

``` javascript
function getCommentOfNumber(){
    return 5;
}
const commentNum = getCommentOfNumber();
console.log(commentNum);
```
【コンソール出力結果】

``` text
5
```
#### Java（引数：なし,戻り値：あり）
| 引数 | 戻り値 | 
|:-:|:-:|
| なし | あり |  

``` java
public static void main(String[] args) {
	int commentNum  = getCommentOfNumber();
	System.out.println(commentNum);
}

public static int getCommentOfNumber() {
	return 5;
}
```
【コンソール出力結果】

``` text
5
```
***

#### Javascript（引数：あり,戻り値：あり）

| 引数 | 戻り値 | 
|:-:|:-:|
| あり | あり |  

``` javascript
function sum(num1,num2){
    return num1 + num2;
}
console.log(sum(1,2));
```
【コンソール出力結果】

``` text
3
```

#### Java（引数：あり,戻り値：あり）
| 引数 | 戻り値 | 
|:-:|:-:|
| あり | あり |  

``` java
public static void main(String[] args) {
	System.out.println(sum(1,2));
}
	
public static int sum(int num1,int  num2) {
	return num1 + num2;
}
```
【コンソール出力結果】

``` text
3
```
***
### 組み込み関数
#### Javascript

* Stringオブジェクト concatメソッド(文字列結合)

``` javascript
//JavaScript
const str = 'a';
const str2 = 'b';
const str3 = 'c';
console.log(str.concat(str2,str3));
```
【コンソール出力結果】

``` text
abc
```

#### Java

* String型 concatメソッド(文字列結合)

``` java
String str =  "a";
String str2 =  "b";
String str3 =  "c";
System.out.println(str.concat(str2).concat(str3));
```
【コンソール出力結果】

``` text
abc
```
**『Java,JavaScriptとの差分』**
言語によってメソッドで書き方は異なるが、基本的にメソッドの呼び出し方はJava,JavaScriptで変わらない
***
#### Javascript

* Arrayオブジェクト 

``` javascript
const fruits = new Array();
fruits.push('リンゴ');
fruits.push('バナナ');
console.log(fruits);

//シンタックスシュガー（簡単に書く方法）
//上記と同じ結果になる
const fruits2 = [
    'リンゴ', 'バナナ'
];
console.log(fruits2);
```
【コンソール出力結果】

``` text
(2) ['リンゴ', 'バナナ']
(2) ['リンゴ', 'バナナ']
```
:::note warn
注意
const（定数）でも後からpushで値の追加をすることができる!
:::

``` javascript
//JavaScript
const fruits3 = [
    'リンゴ', 'バナナ'
];
console.log(fruits3);
fruits3.push('メロン');
console.log(fruits3);
```
【コンソール出力結果】

``` text
(2) ['リンゴ', 'バナナ']
(3) ['リンゴ', 'バナナ', 'メロン']
```

#### Java

* ArrayListクラス

``` java
// ArrayListを宣言
ArrayList<String> fruits = new ArrayList<String>();
// 2つ追加
fruits.add("りんご");
fruits.add("バナナ");
for (String str : fruits) {
	System.out.println(str);
}
//1つ追加
fruits.add("メロン");
System.out.println("ーー追加後ーー");
for (String str : fruits) {
	System.out.println(str);
}
```
【コンソール出力結果】

``` text
りんご
バナナ
ーー追加後ーー
りんご
バナナ
メロン
```

:::note info
注意！
以下記事からはJavascriptのみの説明となる
Javaの記載はない
:::

## Javascript関数(補足)
###### ユーザ定義関数の定義の仕方（2パターン）
#### Javascript
##### ①一般的なユーザ定義関数

``` javascript
//一般的なユーザ定義関数
function test1(){
    console.log('test1です');
}
test1();
``` 

【コンソール出力結果】

``` text
test1です
```
##### ②変数・定数に関数を入れて定義する

``` javascript
//変数・定数に関数を入れる
const test2 = function(){
    console.log('test2です');
}
test2();
``` 

【コンソール出力結果】

``` text
test2です
```
※変数・定数に関数を入れて定義する場合アロー関数を使用することができる
（詳細は下にアロー関数について記載してあるのでそちらを参照）

``` javascript
//変数・定数に関数を入れる(アロー関数)
const test3 = () => {
    console.log('test3です');
}
test3();
``` 

【コンソール出力結果】

``` text
test3です
```


## 無名関数・匿名関数

他の場所から呼び出されることがない関数は名前をつけない。だから無名関数。
その場限りでしか使用しないことを想定しているため。（1回しか使用されないことが想定されている関数）
## コールバック関数

関数の引数の中に関数設定されているもののこと
コールバック関数を使用できるメソッドは決まっている。
サンプルではforEachメソッドを使用。

#### Javascript

``` javascript
// 一般的な関数
function getSampleItem(){};

// コールバック関数
fruits.forEach(function(input){
    console.log(input);
});
```
## アロー関数
#### Javascript
ES6から使用できる
「function」の代わりに「=>」を使用する

【名前がある関数の場合】

``` javascript
//functionを使用した書き方
const getItem = function() {
    console.log('アロー');
};
getItem();

//アロー関数を使用した書き方
const getItemArrow = () => {
  console.log('アロー');
};
getItemArrow();
```
【コンソール出力結果】

``` text
アロー
アロー
```

【名前がない関数　コールバック関数】

``` javascript
//名前がない関数　コールバック関数
//functionを使用した書き方
const fruits = ['りんご', 'バナナ', 'スイカ'];
fruits.forEach(function(input) {
  console.log(input);
});

//アロー関数を使用した書き方
fruits.forEach((input) => {
  console.log(input);
});
```
【コンソール出力結果】

``` text
りんご
バナナ
スイカ
りんご
バナナ
スイカ
```
上記だけではアロー関数の利点がほぼ無いように見えるが、
アロー関数は省略する書き方ができ、スッキリした書き方ができる

##### アロー関数の省略

``` javascript
//通常のアロー関数
const getComment = ((comment) => {
    console.log(comment);
});
getComment('通常のアロー関数');

//省略したアロー関数 引数が１個の場合()が不要
const getComment2 = comment => {
  console.log(comment);
};
getComment2('アロー関数　引数が１個の場合()が不要');

//省略したアロー関数　処理が１行なら{}も不要。
const getComment3 = comment => console.log(comment);
getComment3('アロー関数　処理が１行なら{}も不要。');
```
【コンソール出力結果】

``` text
通常のアロー関数
アロー関数　引数が１個の場合()が不要
アロー関数　処理が１行なら{}も不要。
```