JavaScript基礎ー変数から関数、配列ー

# はじめに
先日、Ruby on RailsでWebアプリケーションを作成したのですが画面に動きを付けるところまでは知識不足で出来なかったので、しっかり学習したいと思いJavaScriptを１から勉強しています。
そこで、自らの備忘録も兼ねてこちらへ学習したことをまとめてみようと思いました。
本記事は、変数、関数、配列までに絞っています。
読みにくい部分、もしくは間違っている部分ありましたら、コメントにて教えて頂けると幸いです。

## JavaScript とは
ブラウザ以外にも行えることは色々とあるようなのですが、まずはブラウザ上で様々な処理を行う言語として認識していて問題なさそうです。
ブラウザ上で動くプログラミング言語、JavaScriptが唯一だそうです。
Webページを作る言語としてセットで頭に浮かぶHTMLは、マークアップ言語と呼ばれ、CSSはスタイルシート言語と呼ばれますのでこれらはプログラミング言語では無いとのこと。
では、JavaScriptの基本的な書き方などを以下に記述していきます。

※ GoogleChromeブラウザを使用していますが、ブラウザ上のコンソールの出し方はWebページ上で右クリックのメニューから`検証`をクリックし、`Console`というタブを開くとあります。

## 変数の定義方法
JavaScript には、変数を定義する際に演算子が 3つあります。
`var`と`let`と`const`になります。
実際に変数を定義する時には以下のような記述になります。

```javascript
let num = 10;
const str = 'sample';
var boo = false
```

`let`などの演算子を先頭に書き、その後に変数名(中にどんな値が入っているのか、どんな役割をする変数なのかが簡潔に分かる名前を付けるのが良いです。)を記述し、`＝`の右側に変数へ代入する値を書きます。
ただし、`var`は以前使われていた演算子とのことで、今は`let`と`const`を用いるのが一般的だそうです。
これら定義方法の違いですが
`let`は、値を更新(上書き)できる変数を定義します。
`const`は、値を固定させて更新は出来ない変数を定義します。
ちなみに、JavaScriptの特徴として変数のデータ型は代入する値によって動的(柔軟)に変化します。
これを、動的型付(どうてきかたづけ)言語と言います。

### データ型
プログラミング言語が変数の中のデータ(値)を解釈する為に、どのジャンルのデータなのかを区別してあげる必要があります。
JavaScriptでは、主に以下のデータ型があります。

- データ型の種類
 - Number：整数または浮動小数点数。例えば 10 や 3.14159 など。
 - String：テキストの値を表す連続した文字。"sample" など。
 - Boolean：真偽値。`true` か `false` のみ入ります。
 - Undefined：値が何も入っていない、未定義の変数。
 - Null：値が何も入っていない部分が`Undefined`と混在しますが、`Null`は意図的に値が無いことを示します。

## 関数の定義方法
関数を定義し実行するには、以下のように記述します。

```javascript
function hello(name, age) {
    console.log('hello' + name + age);
}
hello('sample', 20);
```
関数を定義するには、`function`を先頭にして次に`関数名`を記述し`{}`で処理を囲みます。
定義した関数を実行するには`hello();`と記述します。関数名に`()`を付けることで関数を実行する意味になります。
その`()`の中に、`'sample'`と`20`が書かれていますがこれを引数と呼びます。
引数は、実行する関数に値を渡す役割を担います。

```javascript
hello('sample', 20);
```
ここでは、`function hello(name, age)`の`name`と`age`にそれぞれ`'sample'`と`20`が代入されてhello関数内で使用できるようになります。
この時、各引数の呼び方は`name`を第1引数`age`を第2引数となります。
行われる処理としては

```javascript
console.log('hello' + name + age);
```
の部分で、`console.log();`がブラウザ上のコンソールに結果を表示する動作をしますので、文字列である`'hello'`と引数で渡ってきた`sample`と`20`が組み合わさってコンソール上には`hellosample20`と表示されます。

そして、hello関数内を以下のように書き換えた場合

```javascript

function hello(name, age) {
    return name + age;
}
const returnvalue = hello('returnSample', 50);
```
hello関数は、実行した結果を受け取って新しい変数へ代入しています。これは、hello関数内の

```javascript
return name + age;
```
の部分が関係しています。
`return`と記述すると、関数から呼び出し元へ結果を返してあげる処理を行いますので`hello('returnSample', 50);`が`name`と`age`をくっつけた実行結果`returnSample50`を受け取って、変数`returnvalue`へと格納することができます。
引数が関数へ渡すデータ、戻り値が関数が処理したデータと覚えておくと分かりやすいかもしれないです。

変数名や関数名は、同じ名前でも大文字と小文字で区別すれば複数定義することが出来ますが、バグの原因となる ＆ `Array`などのコンストラクタ関数と呼ばれるJavaScriptが元々持っている関数があり名前が被ってエラーを起こすなどあるので小文字で統一するなどした方が良いです。

### 無名関数
関数を定義する記述は他にもあり

```javascript
const hello = function(name, age) {
    console.log('hello' + name + age);
}
```
として、変数を定義し関数を代入する形で書くこともできます。
この時、functionの後に関数名がありませんが、これを無名関数と呼びます。

### アロー関数
関数を定義する際、無名関数の場合にアロー関数を用いると記述を簡略化できます。
上記の無名関数をアロー関数に変換すると

```javascript
const hello = (name, age) => console.log('hello' + name + age);
```
こうなります。
アロー関数にするには、

- `function`を消す
- 引数の右側に`=>`を付ける
- `{}`を消す

以上で、 アロー関数が出来上がります。
その上で、もし引数が１個だった場合は

```javascript
const hello = name => console.log('hello' + name);
```
と、引数を囲んでいた`()`も消せるのでだいぶ記述を簡略化できます。

ただ、注意点がありまして`{}`を消せる場合は、関数内の記述が1行のみの時です。
2行以上あった場合は、`{}`が必要です。
同じく、引数が2個以上だった場合は、`()`で引数を囲わなくてはいけません。

アロー関数のメリットとしては

- 無名関数の場合にいちいち functionを書かなくて済む
- 関数の中身が1行であれば`{}`も削除できる
- 引数が1個であれば`()`も削除できる
- 記述を簡略化できる。

まとめると以上です。

### メソッドとプロパティー
JavaScript内で、データを取得したり処理する時にメソッドとプロパティーが出てきます。
違いとしては

 - メソッド：末に`()`が付いているもの
 - プロパティ：ついてないもの
で、判断すると分かりやすいです。

例えば、helloという変数に文字列が入っていたとすると

```javascript
console.log(hello.length);
```
上の記述では、変数helloに`length`が`.`でくっついていますがこれは文字数を取得する`プロパティ`になります。
また、

```javascript
console.log(hello.toUpperCase());
```
こちらは、変数helloに格納されている文字列を全て大文字で表示する処理を行う`メソッド`となります。
このように、メソッドは`特定の処理を行う`もの。プロパティは`特定の値を保持する`ものとして役割の違いがあります。

### 配列の定義方法

```javascript
const arry = new Array(1, 2, 3, 4, 5, 6, 'moji', false);
```
配列を定義するには、変数の定義と同様に`const`や`let`などの演算子を用いて配列名を書き`=`を挟んだら`new Array()`で囲みます。
JavaScriptの特徴として上記のように、様々なデータ型の値をひとつの配列に格納することができます。
各々の値は配列の要素と呼びます。

配列の特定の要素を取得して表示するには

```javascript
console.log(arry[3]);
```
と、配列名の後ろの`[]`に要素のインデックスを入れます。

同じく、配列の要素を書き換えるには

```javascript
arry[3]=10;
```
と記述することで、値が更新されます。

インデックスとは、要素毎に割り振られた番号ですが０から始まるので数え方に注意が必要です。
実際に、配列全体を表示したコンソール画面を見ると
![スクリーンショット 2020-10-08 15.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613376/baa765da-ce41-1621-b7fc-d8a3120f3369.png)
要素毎に、0から始まる番号が割り振られています。この紫色の番号がインデックスで青色の数字が値になります。

配列を定義した際に、`const`を使っていますが配列に関しては変数を固定する`const`を使っても要素を書き換えることが可能です。
ただし、以下のように

```javascript

const arry = 10;
const arry = new Array(1, 2);
```
`const`で一度定義した変数を、再定義することは出来ないので注意が必要です。