初心者による初心者のためのJavaScript基礎３【関数】

# 目次
[1. 関数とは](#1-関数とは)
[2. 関数宣言](#2-関数宣言)
[3. 関数リテラル（関数式）](#3-関数リテラル関数式)
[4. 即時関数](#4-即時関数)
[5. アロー関数](#5-アロー関数)
[6. JavaScript基礎シリーズ](#6-javascript基礎シリーズ)
[7. 参考記事](#7-参考記事)

# 1. 関数とは

やりたい処理をまとめて実行することができる命令のことです。

引数　・・・　処理する際に渡す値
返り値（戻り値）・・・　返却される処理の結果

JavaScriptにはすでに定義されている関数がありますが、関数を自分で定義することができます。
ここでは関数を定義する方法を紹介したいと思います。

# 2. 関数宣言

JavaScriptでは、`function`を使って関数を定義します。

```jsx
function 関数名(引数1, 引数2, …) {
	// 処理内容
	return 戻り値;
}
```

このように定義する方法を関数宣言といいます。

引数は無しでも複数記載しても定義することができます。
処理結果を返したい場合は`return`で返却する必要があります。

次の`hello関数`は引数に名前を入力することで、コンソール上に文字列を表示させる関数です。

```jsx:サンプル
function hello(name) {
  console.log("こんにちは、" + name + "さん！！" );
}

hello("太郎");

//出力結果：こんにちは、太郎さん！！
```

関数は`関数名(引数)`で実行することができます。
引数が無い場合でも、`関数名()`　このようにカッコを記載する必要があります。

サンプルをもう一つ。
次の`add関数`は引数に指定した二つの数値を足した結果を返却する関数です。

```jsx:サンプル
unction add(num1, num2) {
  return num1 + num2;
}

const result = add(3, 4);
console.log(result);

//出力結果：7
```

# 3. 関数リテラル（関数式）

関数リテラルを使用して関数を定義する方法がこちらです。

```jsx
変数 = function(引数) {
	// 処理内容
  return 戻り値;
};
```

変数に名前のない関数（無名関数）を代入して定義します。
[関数宣言](#2-関数宣言)の項目で定義したサンプルを関数リテラルで再現すると次のようになります。

```jsx:サンプル
const hello = function (name) {
  console.log("こんにちは、" + name + "さん！！");
};

hello("太郎");

//出力結果：こんにちは、太郎さん！！

const add = function (num1, num2) {
  return num1 + num2;
};

const result = add(3, 4);
console.log(result);

//出力結果：7
```

ちなみに関数宣言と関数リテラルは読み込まれるタイミングが違います。関数宣言は先に読み込まれますが、関数リテラルはそうでないため、関数リテラルを定義する前に関数を呼び出すとエラーになります。

```jsx
// 関数宣言
hello("太郎");

function hello(name) {
  console.log("こんにちは、" + name + "さん！！" );
}

// 出力結果：こんにちは、太郎さん！！


// 関数リテラル
hello("太郎");

const hello = function (name) {
  console.log("こんにちは、" + name + "さん！！");
};

// 出力結果:TypeError: hello is not a function
```

# 4. 即時関数

即時関数は定義されると同時に処理が実行される記載方法です。
即時で実行されるので関数を呼び出す必要がありません。
他のところでは逆に呼び出すことができないので、関数を再利用することができません。

次のように記載します。

```jsx
(function(仮引数) {
  // 処理内容
})(実引数);
```

最後の実引数の()の位置は次の位置でも問題ないようです。

```jsx
(function(仮引数) {
  // 処理内容
}(実引数));
```

戻り値がある場合は変数に代入します。

```jsx
変数 = (function(仮引数) {
	// 処理内容
  return 戻り値
}(実引数));
```

[関数宣言](#2-関数宣言)の項目で定義したサンプルを即時関数で再現すると次のようになります。

```jsx:サンプル
(function(name) {
  console.log("こんにちは、" + name + "さん！！" );
}("太郎"));

// 出力結果：こんにちは、太郎さん！！

const result = (function(num1, num2) {
  return num1 + num2;
}(3, 4));

console.log(result);

//出力結果：7
```

# 5. アロー関数

アロー関数は関数リテラルや即時関数を`function`の記載を省略し、より短い記述で定義することができる方法です。

次のように記載します。

```jsx
変数 = (引数) => {
	// 処理内容
  return 戻り値;
};
```

[関数宣言](#2-関数宣言)の項目で定義したサンプルをアロー関数で再現すると次のようになります。

```jsx:サンプル
const hello = (name) => {
  console.log("こんにちは、" + name + "さん！！" );
};

hello("太郎");

// 出力結果：こんにちは、太郎さん！！

const add = (num1, num2) => {
  return num1 + num2;
};

const result = add(3, 4);
console.log(result);

//出力結果：7
```

また、即時関数をアロー関数で再現する場合は最後に(実引数)を記載します。
[即時関数](#4-即時関数)の項目で定義したサンプルをアロー関数で再現すると次のようになります。

```jsx:即時関数サンプル
((name) => {
  console.log("こんにちは、" + name + "さん！！" );
})("太郎");

// 出力結果：こんにちは、太郎さん！！

const result = ((num1, num2) => {
  return num1 + num2;
})(3, 4);

console.log(result);

//出力結果：7
```

アロー関数では実引数は最後に記載しないとエラーとなるようです。

# 6. JavaScript基礎シリーズ
[1. 変数](https://qiita.com/katao_eng/items/4b10add27a4c9ca77ca0)
[2. 配列・条件分岐・繰り返し](https://qiita.com/katao_eng/items/6b43d049307a1bc09750)
3. 関数　←今ここ

# 7. 参考記事
[関数 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)
[関数と宣言 · JavaScript Primer #jsprimer](https://jsprimer.net/basic/function-declaration/)
[JavaScriptで即時関数を使う理由 - Qiita](https://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)
[即時関数の使い方と構造について | JavaScript中級編 - ウェブプログラミングポータル](https://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r11)
[JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例 | devsakaso](https://devsakaso.com/javascript-iife-immediately-invoked-function-expression/)
[アロー関数式 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
[JavaScript アロー関数を説明するよ - Qiita](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)
[JavaScriptの即時関数をアローを使って記述する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン](https://magazine.techacademy.jp/magazine/45852)