ノンビン塾～エンジニアとしての成長記録6～

## ノンビン塾について
そもそもノンビン塾ってなに？
→[過去の記事参照](https://qiita.com/kenny_engineer/items/fc3a45ef2c123ce49495)



## 今回の講義
#### 【テーマ】
　配列・オブジェクト（連想配列）を理解しよう！
　※ノンビン塾で学んだ事　と　自分で自習した事　を纏めて記載する

#### 【事前準備】
　・Node.js(v16.14.2）
　・VSCode
　・適当なディレクトリでtest.jsを作成する

### 1）配列について

【複数のデータを順番に並べた構造の事】であると理解した。
1つの箱（変数）に同じデータ型の複数の値を入れる事ができる。

また、配列は、`[ ]` で囲まれている。

そして、目的のデータが「何番目にあるのか」を指定すると、
そのデータを取り出すことができる。

以下例
```test.js
const list = ["1個目", "2個目", "3個目"];

console.log(list);
```
上記のようにlistを宣言し、console.logで確認してみる。
ターミナルで、`node test.js`を実行すると、
以下のように確認することができた。

```
PS C:\*******> node test.js
[ '1個目', '2個目', '3個目' ]
```

また、listの中の"2個目”だけを取り出したい時は、
console.logには以下のように指定する必要がある。

```test.js
const list = ["1個目", "2個目", "3個目"];

console.log(list[1]);
```
[1]を指定したのは、配列の中の左から1番目という意味ではない。
一番左の値は、0番目となる。
そのため、”2個目”は、左から1番目の値となる為、[1]を指定する必要がある。

### 2）オブジェクト（連想配列）について

オブジェクトは、
keyとvalueを持っているデータ群であり、
`{ }`で囲まれている。

注意点としては、
JavaScirptでは、「連想配列」の言葉は使わない。
他のプログラムでいう「連想配列」を、JavaScriptでは、「オブジェクト」という。

理由は、JavaScriptの場合は、値としてのデータだけでなく、関数も入れる事ができる為。

```test.js
let obj = {
  x: 5, 
  y: 20,
  calc: function() {
    return this.x * this.y;    
  } 
}
console.log(obj.x)
console.log(obj.calc())
```

```
PS C:\*******> node test.js
5
100
```

また、気になる記事も見つけた。
これは読んでおきたい。

[オブジェクトを連想配列として使うと痛い目にあいますよ](https://zenn.dev/standard_soft/articles/7458d1f49fd2ef)
### 3）For文について
以下の例のようにたくさんデータが入っている場合どうやってデータを取得するか。
```test.js
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]
```

今回はFor文を使ってconsole.logに出してみる。

`for ([初期化式]; [条件式]; [加算式]){ }`
このFor文を参考に、以下のように実装する。

```test.js
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]

for (let i = 0; i < list.length; i++) {
  console.log(list[i]);
}
```
【初期化式】
　`let i = 0`で、iを0に初期化する（初期化が実行されるのは最初の一度だけ！）
【条件式】
　`i < list.length`で、listに格納されているデータ数（length）だけ処理を順に実行
【加算式】
　`i++`　1ずつ加算して処理する。
という事かな。

`node test.js`を実行してみる。
```
PS C:\*******> node test.js
1個目
2個目
3個目
4個目
5個目
6個目
7個目
8個目
9個目
10個目
11個目
12個目
13個目
14個目
15個目
16個目
```
すべてのデータを取得できた。

少し応用して、
条件式を`i=i+3`として、3つ飛ばしで処理する形で実行してみた。
```test.js
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]

for (let i = 0; i < list.length; i=i+3) {
  console.log(list[i]);
}
```
```
PS C:\*******> node test.js
1個目
4個目
7個目
10個目
13個目
16個目
```
想定通り3つ飛ばしで、データを取得できた！

よしよし。

なお、よりシンプルなコードで、1個目～16個目を取得する方法として、以下例がある。

```test.js
const list = ["1個目","2個目","3個目","4個目","5個目","6個目","7個目","8個目","9個目","10個目","11個目","12個目","13個目","14個目","15個目","16個目"]

list.forEach(e => { // eはelementの略・・か？
  console.log(e);
})
```
forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行するようで、
結果として1個目～16個目までをconsole.logで取得できた。

### 4）【応用編】配列を操作してみよう（複数ピックアップ）
#### ①配列に追加
```test.js
const list = ["1個目", "2個目", "3個目"];
list.push("4個目");
console.log(list);
```
push() メソッドは、配列の末尾に1つ以上の要素を追加する処理。
また戻り値として新しい配列の要素数を返す。とのこと。
```
PS C:\*******> node test.js
[ '1個目', '2個目', '3個目', '4個目' ]
```
#### ②配列の指定するデータを修正
```test.js
let list = ["1個目", "2個目", "3個目"];
list[2] = "空っぽ";
console.log(list);
```
listの2番目のデータ（この例でいう”3個目”）を”空っぽ”に修正する処理
```
PS C:\*******> node test.js
[ '1個目', '2個目', '空っぽ' ]
```


その他、配列を操作する方法は色々とあるが、
詳細は[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)を参照。。

## 感想
このテーマについては、
去年独学でやった頃、「何となく理解」して、「何となく使用」していた。
その中途半端な理解を、今回の講義で腹落ちして理解する事ができた。

今後このあたりを十分に理解してないと、、実務でついていけなくなるので、
今回のアウトプット（復習）と同時に、色々と配列の操作も触れておこうと思う。