Javascript 基礎 基本文法について

学習で学んだことを自分なりに整理してみました。間違っている部分や追記した方が良いなどアドバイスがあれば教えていただけたら幸いです。

## 実行方法
### Webブラウザのデペロッパーツールに入力する。
ファイルに記述するほどでもないけど何か試してみたい時などに使う。
### htmlタグに直接入力する。
以下のタグの間に入力する。

```html
<script>入力する</script>
```

### Javascript(.js)ファイルを作成し、htmlタグで読み込む。
以下のタグを記入する。

```html
<script src="jsファイルのパス"></script>
```

---

## Javascriptのデータ型
プリミティブ型とオブジェクト型に別れる

### プリミティブ型
#### Number
**数字**を表す。整数だけでなく小数、また正数負数もまとめてNumberとなる。
Number同士で四則演算をすることが可能
<img width="500" alt="スクリーンショット 2019-02-07 23.09.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/b1f40178-56c5-6f03-d0de-20a0baf0ff3d.png">


#### String
**文字列**(テキストデータ)を表す。
シングルクオーテーション

```
''
```

ダブルクオーテーション

```
""
```

で囲む必要がある。
また`+`を使用して文字列同士を連結したり、`.length`と末尾に記入することで文字列の長さを確認したりすることができる
<img width="492" alt="スクリーンショット 2019-02-07 23.10.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/2f5426d6-1fb5-f7fe-db27-5e2c529cbbe5.png">


#### Boolean
**真偽値**(`true`,`false`)を表す。
ループ処理や分岐処理などで使われる。

#### Null
値が**存在しない**ことを表す、値自体が`null`である。

#### Undefind
値が**定義されていない**ことを表す。値がないことを示しているわけではないのでNullとは違う。

#### Symbol
Symbolという組み込み関数でのみ作れる。オブジェクトのプロパティ名(キー)を文字列に変換することなくSymbolのまま使うことができる。ES6で導入された新しいプリミティブで、活用する機会は今の所少ない。

---

## 変数

### 変数とは
「値を収納する箱」のようなもの

```js
a = 1; //aの中に1という数値が入っている

b = 'hello' //bの中に'hello'という文字列が入っている

c = true //cの中にtrueという真偽値が入っている
```

### 変数のルール
変数名のは**アルファベット**、**アンダーバー(_)**、**$記号**から始めないとならない

```
name ○
_name ○
$name ○
-name ×
1name ×
@name ×
```

また、大文字と小文字は別の変数として扱われる(`name`と`Name`はそれぞれ違う変数名)

### 変数宣言時に使うキーワード

#### const
変数に値を再代入することはできず、再宣言もできない。
再代入できない変数のことを**定数**と呼ぶ

<img width="1214" alt="スクリーンショット 2019-02-07 23.10.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/6e199056-1ec4-4e71-1e63-fd3082e2a253.png">


#### let
変数に値を再代入することができる。

<img width="1214" alt="スクリーンショット 2019-02-07 23.10.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/751eb94e-c8e6-b02e-e5cd-1ac3e1089ff7.png">

#### var
letと同じように変数に値を再代入することができる。
しかしvarを使うと**スコープの問題**が発生するので、基本的にvarは使用しない。

### スコープ

変数名や関数名が有効とされる範囲のこと。スコープを意識することで同名の変数を別のものとして使いまわすことができる。

```js
function test(){
  let x = 1;
  console.log(x); // x=1
  {
    let x = 2;
    console.log(x) // このブロックはx=2となる
  }
  console.log(x); // このブロックはx=2ブロックの外でありx=1ブロックの中なのでx=1となる
}
```


#### varによって発生するスコープ問題
varはブロックレベルではなく関数でのスコープとなるため、ブロック内外問わずスコープするので同名の変数が全て変更されてしまう

```js
function test(){
  var x = 1;
  console.log(x); // x=1
  {
    var x = 2;
    console.log(x) // このブロックはx=2となる
  }
  console.log(x); // varを使うことでブロック関係なく直前の変数をスコープしてしまうのでx=2となる
}
```
よって、現在はlet,constを使うのが主流になっている。

#### 追記
@hogefuga さんから

>function文もvarと同様に、使うべきではありません(残念ながら入門サイト等では頻繁に使われていますが)。function文には宣言の巻き上げ(ホイスティング)という厄介な機能が絡んでいるからです。

といったアドバイスをいただきました、また、基本的には`アロー関数`を使用した方が良いということも教えていただきました、ありがとうございます！
アロー関数に関してはまだ詳しく学習していないので、学習次第修正していければと思います。

## デバッグ

値を確認する作業は意図しない挙動（バグ）があった時のデバッグ作業に必須。
プログラムの不具合を解決するスキルはエンジニアにとって**非常に重要**であり、開発、学習スピードにも大きな差が出る。

### 値の確認方法
#### alert
Webページ上に値の内容が含まれている「**アラートダイアログ**」を表示する。

```js
alert(文字や変数を入力)
```

<img width="1214" alt="スクリーンショット 2019-02-07 23.11.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/49a26c92-ced5-c852-2e2c-a761497ced42.png">


#### console.log
デペロッパーツール上に「値の内容」を表示する。複数の値や詳細な値を確認できるためデバッグ時にはこちらの方がおすすめ。

```js
console.log(文字や変数を入力する)
```
<img width="1214" alt="スクリーンショット 2019-02-07 23.11.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/349049/9b6ef480-d4a9-a113-039e-3c556051b1a7.png">