【JavaScript ~関数について~】勉強メモ③

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。



関数
-
　- 関数とは、「いくつかの処理をまとめたもの」
　
　- 関数の定義
　<b>「function()」</b>と書き、その後ろの<b>中括弧「{ }」</b>の中にまとめたい処理を
　書くことで関数を用意することが出来る。
　
　関数の定義には2種類の方法がある。
　関数宣言と呼ばれる方法と、もう1つが無名関数を用いた関数式と呼ばれる方法。
　関数宣言と関数式の役割には大きな違いはなし（正確には、読み込まれるタイミングが異なるが。。。）
　関数式とすることで、何かに代入したり他の関数に渡しやすくなる。

```.text:書き方
// 関数宣言
function 関数名(){
  //まとめたい処理内容
}

// 関数式（無名関数）
const 定数名 = function(){
  //まとめたい処理内容
};

定数名(); →　「定数名()」とする事で関数を呼び出す事が出来る
```

```.js:例
// 関数の定義
const greet = function() {
  console.log("こんにちは！");
  console.log("元気ですか？");
};

// 関数を呼び出す
greet();

// 出力結果 → こんにちは！　元気ですか？

```
<br>

アロー関数
-
　- 「function()」の部分を<b>「( ) =>」</b>としても、これまでと同じように関数を
　定義することが出来る。この関数の書き方のことを、特別にアロー関数と呼ぶ。
　これはES6から導入された新しい書き方。

```.js:アロー関数
// 関数の定義
const greet = () => {
  console.log("こんにちは！");
  console.log("元気ですか？");
};

// 関数を呼び出す
greet();

// 出力結果 → こんにちは！　元気ですか？

```
<br>

引数
-
　- 関数に与える追加情報のようなもの、
　関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を利用することが出来る。

```.text:引数を受け取る関数を定義
// どれでも可

function 関数名（引数名）{
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};


const 定数名 = function(引数名){
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};

const 定数名 = (引数名)=>{
  //まとめたい処理内容
  console.log(`私の名前は${引数名}`です);
};

// 引数を受け取る関数を呼び出す
定数名(値) → その値は関数の引数に代入されます
```

```.js:例
// 関数の引数にnameを追加
const greet = (name) => {
  // 「こんにちは、〇〇さん」となるように出力
  console.log(`こんにちは、${name}さん`);
};

// greetの引数に「Aki」を渡して呼び出す
greet("Aki");

// 出力結果 → こんにちは、Akiさん
```
<br>

　- 複数の引数を受け取る関数
　引数は、左から順番に「第1引数、第2引数、...」と呼ぶ。
　(　)の中に受け取る引数をコンマ(,)で区切って並べる。

```.text:複数の引数を受け取る関数を定義
const 定数名 = (第１引数, 第２引数)=>{
  //まとめたい処理内容
};

// 引数を受け取る関数を呼び出す
定数名(第１引数の値, 第２引数の値);
```

```.js:例
// 関数の引数にnameとageを追加
const information = (name, age) => {
  console.log(`彼女の名前は、${name}さん`);
  console.log(`彼女の年は、${age}です`);
};

// greetの引数に「Aki」を渡して呼び出す
information("Aki", 25);

// 出力結果 → 彼女の名前は、Akiさん　彼女の年は、25です
```
<br>

戻り値
-
　- 呼び出し元で受け取る処理結果を戻り値（もどりち）と呼ぶ。
　<b>「return 値」</b>と書くことで、関数はその値を戻り値として返す。

```.js:例
const half = (number) => {
  // numberを2で割った値を戻り値として返す
  return number / 2 ;
};

// 定数resultを定義
const result = half(130);

// 「130の半分は〇〇です」となるように出力
console.log(`130の半分は${result}です`);

// 出力結果 → 130の半分は65です
```
<br>

スコープ
-
　- 関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことが出来ない。
　→ その範囲のことを<b>スコープ</b>と呼ぶ。

```.text:関数の中の定数
const introduce = () => {
  // 定数nameを定義
  const name = "Aki";

  // 定数nameが使えるは範囲
};

// 定数nameが使えない範囲
```
<br>
　- 関数の外で定義した定数や変数は、関数の中でも外でも使うことが出来る。

```.text:関数の外の定数
// 定数nameを定義
const name = "Aki";

const introduce = () => {
  // 定数nameが使える範囲
};

// 定数nameが使える範囲
```
<br>

過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/f2b6fbbd073b512d548b)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/private/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)