条件判定①


## 論理系-「真」か「偽」を意味する
①真の場合

```js
var name = '美浜ちよ'
document.write(name === '美浜ちよ'); //=> true
```

②偽の場合

```js
var name = '美浜ちよ'
document.write(name === '水原暦'); //=> false
```


これを使って条件分岐を書くと次のようになります。

```js
var name = '美浜ちよ';
if (name === '美浜ちよ') {
    document.write('名前は美浜ちよです');
} //=> 名前は美浜ちよです
```

上の例では`name === '美浜ちよ'`が`true`のときのみ３行目の`document.write`が実行されます。

## 比較演算子

比較演算子は、2つの値を比較してtrueかfalseをかえす。
以下しよう例

```js
var name = '美浜ちよ';
document.write(name === '美浜ちよ');
// nameが'美浜ちよ'の場合はtrue、そうでない場合はfalse

var age = 5;
document.write(age >= 5);
// ageが「５以上」のときはtrue、5未満のときはfalse
```

![比較演算01.png](https://qiita-image-store.s3.amazonaws.com/0/35975/924235d4-e138-3415-bcdb-3df3d09b474a.png "比較演算01.png")

•厳密な比較の例

```js
document.write('10' == 10); //=> true
document.write('10' === 10); //=> false
```

![厳密.png](https://qiita-image-store.s3.amazonaws.com/0/35975/cb588996-e873-6a54-d3c3-c738574cb646.png "厳密.png")


以下比較演算子の一覧です。

|演算子 | 意味 | 例 |
|:-----------:|:------------:|:------------:|
| ==       | 左右の値が同じならtrue | a == b |
| !=        | 左右の値が異なるならtrue | a != b |
| ===     | 左右の値が同じならtrue(厳密) | a === b |
| !==      | 左右の値が異なるならtrue(厳密) | a !== b |
| >         | 左の方が大きいならtrue | a > b |
| >=       | 左の方が大きいか同じなるならtrue | a >= b |
| <       | 右の方が大きいならtrue | a < b |
| <=       | 右の方が大きいか同じなるならtrue | a <= b  |


## 条件式
条件分岐をするために指定する式を「条件式」と言います。
次の例をみて下さい。

```js
var age = 25
if (age >= 20) {
    document.write('年齢は20歳以上です');
}; //=>  年齢は20歳以上です 
```
![条件式.png](https://qiita-image-store.s3.amazonaws.com/0/35975/9925dfeb-6772-62fc-09a2-bb3a54891046.png "条件式.png")

この`age >= 20`が条件式です。

条件式には比較演算子だけでなく、文字列や数値などを指定することも可能です。

```js
var name = '美浜ちよ';
if (name) {
    document.write('名前が設定されています');
}; //=> 名前が設定されています
```
この例ではnameが条件式ですが、条件式に「true」と「false」以外が指定されたときは、必ず「true」か「false」に変換して評価する決まりがある。
では何が「true」で何が「false」になるかは、次の仕様で決められている。

## falseに変換されるケース
「データがない」とみなされる値は、条件式で「false」に解釈される。
具体的には以下の3つがfalseになります。
•0(数値のゼロ)
•NaN(Not a Numberの略。0/0など、数値として扱うことの出来ないデータのこと)
•空文字(''や""など、何も文字を指定してない0文字の文字列のこと)

例1

```js
var name = '';
if (name) {
    document.write('名前が設定されています');
}; // 空文字の為「false」になり実行されない
```

## undefined

undefinedとは「定義されてない」という意味。
例↓

```js
var x; //変数xの箱は作ったが箱の中身は定義されてない
```

配列の存在しないインデックスや、オブジェクトの存在しないプロパティ名を指定した場合もundefinedになる。
以下例↓

```js
var arr = ['ちよ', 'おおさか'];
document.write(arr[10]); //=>undefined
// 10番目という存在しないインデックスは存在しない
```

![underined.png](https://qiita-image-store.s3.amazonaws.com/0/35975/58502732-9e15-b0b3-7cb1-f63ec1b0e6b8.png "underined.png")

## null
nullは「何もない」と意味する値であり、例えば明示的に「この変数に値がありません」というときに利用する。
例↓

```js
var person = {
name: '美浜ちよ',
age: 10,
gender: 'female',
url: null
};
```
次の二つのプロパティを出したときの違いを見てみよう。(nameを出すと「美浜ちよ」だがurlを出すと「null」を返してくる)

![null_1.png](https://qiita-image-store.s3.amazonaws.com/0/35975/5aaf20ca-ed9b-f0b4-723b-a2512e48080e.png "null_1.png")
![null_2.png](https://qiita-image-store.s3.amazonaws.com/0/35975/4cf33d6e-0405-fae6-14df-e72f21fa1cd9.png "null_2.png")

## trueに変換される項目

* `100`(数値)
* `-100`(マイナスの数値)
* `'0'`(文字列のゼロ)
* `'美浜ちよ'`(文字列)
* `[1, 2, 3]`(配列)
* `[]`(空の配列)
* `{ key: 'val' }`(オブジェクト)
* `{}`(空のオブジェクト)
* `function add() {}`(関数)

よって条件式nameの値が`'美浜ちよ'`という文字列になる以下の様な場合は実行される。

```js
var name = '美浜ちよ';
if (name) {
    document.write('名前が設定されています'); // 実行される
};
```

## &&と!を使った例

`&&`は「かつ」、`!`〜は「〜ではない」

```js
var person = {
name: '美浜ちよ',
age: 10,
gender: 'female',
url: null
};
if (person.name === '美浜ちよ' && !person.url) {
    document.write('美浜さんのURLはありません');
}; //=>美浜さんのURLはありません
```

![&&と!.png](https://qiita-image-store.s3.amazonaws.com/0/35975/83c50b11-bbd2-8e7f-e919-a8c750fb92a3.png "&&と!.png")

## ||を使った例

||は「〜か〜のどちらか」の意味です。

```js
var name = '滝野とも';
if (name === '美浜ちよ' || name === '滝野とも') {
document.write('美浜さんか滝野さんです');
} //=> 美浜さんか滝野さんです
```
![||の使用.png](https://qiita-image-store.s3.amazonaws.com/0/35975/da4c0647-7ca8-3e8f-6085-3c37810d31c0.png "||の使用.png")