JavaScriptの基本④　配列と関数

本記事では配列と関数について説明していきたいと思います。

## 配列

### 配列
…複数のデータの集合。１つの変数に対して複数の値を格納できます。また、１つずつ取り出すこともできます。
　配列の中に入っているデータに対して、インデックスでアクセスすることができます。
 　イメージとしては、連なった箱の中にデータが入っているという状況を想像していただければと思います。

配列の中身の例
```javascript
const scores = ['100','90','20','30','40','60'];
```


### インデックス
…ここでのインデックスは「添え字」といい、ある要素を特定するためにつけられた数字（もしくは文字列）のことです。
　配列におけるインデックスの考え方で注意すべきは、**０始まりである** ということです。
 　例えば一番最初の要素を取り出して表示したいときに、下記のように記述します。

```javascript
    console.log(scores[0]);
    // 結果として100が出力される
```

また、繰り返し処理を用いて順番に、配列の中身を出力することもできます。
```javascript
const scores = ['100','90','20','30','40','60'];

// 配列scoreの個数を出力する処理
console.log(scores.length);
for(let i = 0; i < scores.length; i++){
    console.log(scores[i]);
}
```

コンソール上の結果はこのように出力されます。
一番最初の「6」は要素の数を出力しています。
それ以降は繰り返し処理で配列scores内の要素を取り出し、出力しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/7a0a9f76-a884-98ee-730d-f39b7c771f21.png)

### 連想配列
…各要素を文字列のキーでアクセスできる配列のことです。別名ハッシュやマップとも呼ばれます。
　先ほど配列とは「連なった箱」をイメージしてもらえればというように説明しましたが、
 連想配列の場合は、この箱の中に**key**と**value**といった役割のものが入ります。
 連なった箱の一つ一つに「key: 'value'」という組み合わせで入っているイメージです。
 このkeyとvalueのペアによってデータを管理するデータ構造のことを**連想配列**と呼びます。

下記に連想配列の例を記述します。

```javascript
const worker = {id: '1', name: 'Tarou', job:'engineer'};
```

このように、入っている値（value）がどんなデータなのかkeyによって明示して格納することができるため、非常に便利です。

この連想配列から値を取り出す場合は下記のように記述します。
```javascript
const worker = {id: '1', name: 'Tarou', job:'engineer'};
console.log(worker.id);
console.log(worker.name);
console.log(worker.job);
```

コンソール上では下の画像のように値が出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/97bb9ba7-6efd-884b-64ea-4a5340489315.png)

もし、設定していないkeyを記述して
console.log(worker.age); というように年齢の値を取り出そうとした場合などは、
worker内に「age」は定義されていないため、「undifined」というエラーメッセージが表示されます。

## 関数

次に関数について説明していきます。

**関数**
…端的にいうと、計算などの処理のことです。
　独立したコードブロックで、特定の処理を実行するために定義されるものです。
 　関数は大きく２種類存在します。

**標準関数**
…JavaScriptに標準実装されている関数。
 例えばrandom関数やmax関数、min関数等があります。
 処理の内容が決まっており、その関数を呼び出してすぐに使用できる関数です。

こ例は下記のようになります。

random関数：ランダムな数を生成する処理
```javascript
let randomNum = Math.random();
console.log(randomNum); 
```

下記のようにランダムに生成された数字が出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/8f8a6a2f-6ada-fd76-cf28-d3fe7ddf7e10.png)


**ユーザー定義関数**
…開発者側で関数の処理内容等を定義します。
　定義方法は４つありますが、プロジェクトなどによって異なる可能性があるので、
 　どの書き方でも書けるようにしておいた方が後々楽かと思います。

・function命令
・Functionコンストラクター
・関数リテラル
・アロー関数

簡単にですが、このような例が挙げられます。
```javascript

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

```

これを実行すると下記のように出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/47cc030b-c8bd-4c43-80f4-b1632d6c5515.png)

では改めて先ほどの４つの関数の定義方法をそれぞれ説明していきます。

### function命令

```javascript
function 関数名(引数,引数...){
    // 処理
    retuen 戻り値 // 戻り値はあるときとないときがある。
}

// 呼び出し
関数名(引数,引数...);

```
**引数**
…関数の呼び出し元から、関数へ値を渡すときに使う変数です。
　呼び出し元： **「関数名(引数,引数…);」**
　呼び出す関数：**function 関数名(引数,引数.....){(省略)**

**戻り値**
…関数から関数の呼び出し元へ返す値です。

＜＜使用例＞＞
３教科の平均点を求める関数

```javascript
function getAverage(math, english, science){
  return (math + english + science)/3;
}
console.log(getAverage(70,80,60));
```

コンソールに表示される結果は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/137c28c1-ed55-55f1-6fa2-eae311d99b11.png)

### Functionコンストラクター
＜＜使用例＞＞
```javascript
const getAverage = new Function('math', 'english', 'science', 'return (math + english + science)/3');
console.log(getAverage(70,80,60));
```

new Functionと記述し、引数と一緒に、戻り値も()内に設定しています。
コンソールに表示される結果は、先ほどのfunction命令の例と同一です。


### 関数リテラル
…関数名を持たない関数の定義方法です。匿名関数や無名関数とも呼ばれます。

＜＜使用例＞＞
```javascript
const getAverage = function(math, english, science){
  return (math + english + science)/3;
}
console.log(getAverage(70,80,60));
```

こちらもコンソールに表示される結果は、先ほどのfunction命令の例と同一です。


### アロー関数
…関数リテラルの省略記法です。
＜＜使用例＞＞
```javascript
const getAverage = (math, english, science) => {
  return (math + english + science)/3;
}
console.log(getAverage(70,80,60));
```
こちらもコンソールに表示される結果は、先ほどのfunction命令の例と同一です。

---------------------------------------------------------------------------------