【備忘録】JavaScriptの基本文法まとめ(変数・型・演算子・条件分岐)

## はじめに
この記事は、学習の過程で得た知識を備忘録として記録したものです。
同じように未経験からIT業界を目指す方や、学習中の方の参考になれば幸いです。

## 学習した内容
- 変数宣言
- 型
- 演算子
- 条件分岐
- ループ

## 変数宣言
### `var`
#### 特徴
- 古い書き方(ES6以前)
- 関数スコープ
- 再宣言可能
- 巻き上げされる
例
```javascript
var x = 10;
var x = 20; // 再宣言OK
console.log(x); // 20
```
注意点
```javascript
console.log(a); // undefined
var a = 5;
```
「巻き上げ」により、宣言だけが先に評価されている

### let
#### 特徴
- ブロックスコープ(`{}`で囲まれた部分)
- 再宣言できない(同じスコープ内で)
- 巻き上げされるが、使用前にアクセスするとエラーになる

例
```javascript
let y = 10;
// let y = 15; // Error

if(true) {
    let y = 5; // 宣言OK
    console.log(y); // 5
}
console.log(y); // 10
```
巻き上げ
```javascript
console.log(b); // ReferenceError
let b = 3;
```

### const
#### 特徴
- 定数
- ブロックスコープ
- 再宣言できない
- オブジェクトや配列の中身の変更は可能

例
```javascript 
const a = 1;
// const a = 3; // エラー

const array = [1, 2, 3];
array.push(4); // OK
console.log(array); // 1, 2, 3, 4
```

### 使い分けの目安
| 使う場面 | 変数宣言 |
|:-:|:-:|
| 値があとで変わる(ループや一時的な変数)  | let  |
| 値を固定したい、変更しない定数  | const  |
| 現在非推奨  | var  |

### 結論
- 基本`const`を使う。変更する必要がなければ
- 変更する必要があるときは`let`を使う
- `var`は使わないのがベター。古いコードで使っている場面もある

| 特徴 | var | let | const |
|:-:|:-:|:-:|:-:|
| スコープ  | 関数スコープ  | ブロックスコープ  | ブロックスコープ  |
| 再宣言  | 可能  | 不可  | 不可  |
| 再代入  | 可能  | 可能  | 不可  |
| 巻き上げ(ホイスティング)  | あり  | なし  | なし  |

## 型と型変換
```javascript
let num = 40; // "number"

let str = "Hello World"; // "string"

let isTrue = true; // "boolean"

let emptyNum = null; // null(object)

let undifinedVlue; // "undefined"

let array = [1, 2, 3]; // 配列(object)

// 関数型のデータ型
function greet() {
    console.log("Hello!");
}
greet(); // function

// 日付型のデータ型
let date = new Date();
console.log(typeof date); // "object"

// 暗黙的な型変換
let addNum = 1 + "1";
console.log(typeof addNum); // "string"
console.log(addNum); // "11"

let subsractedNum = 4 - "1";
console.log(typeof subsractedNum); // "number"
console.log(subsractedNum); // "3"

// 明示的な型変換

// 数値型への変換
let numFromStr = parseInt("42"); // 文字列から数字へ
let floatNumFromStr = parseFloat("3.14");
console.log(numFromStr); // "42"
console.log(typeof numFromStr); // "number"
console.log(floatNumFromStr); // "3.14"
console.log(typeof floatNumFromStr); // "number"

// 文字列型への変換
let strFromNum = String(42);
let strFromNum2 = (123).toString();
console.log(strFromNum);
console.log(typeof strFromNum); // "string"
console.log(strFromNum2);
console.log(typeof strFromNum2); // "string"

// 真偽値型への変換
// 0はFalse、1はTrue
let boolFromNumber = Boolean(1); // "True"
let boolFromEmptyString = Boolean(""); // "False"
console.log(typeof boolFromNumber); // "boolean"
console.log(typeof boolFromEmptyString); // "boolean"

// 配列型への変換
let arrayFromStr = Array("a", "b", "c");
console.log(typeof arrayFromStr); // "object"
console.log(arrayFromStr); //["a", "b", "c"]

// オブジェクト型への変換
let objFromStr = Object("a");
console.log(typeof objFromStr); // "object"
console.log(objFromStr); // String('a')

// データ型の判定

// 演算子
if ("2" == 2){ // True
    console.log("True");
} else {
    console.log("False");
}

if ("2" === 2){ // False
    console.log("True");
} else {
    console.log("False");
}
```

## 演算子
### 四則演算
| 記号 | 説明 |
|:-:|:-:|
| +  | 加算  |
| -  | 減算  |
| *  | 乗算  |
| /  | 除算  |
| %  | 剰余  |

### 論理演算子
| 記号 | 説明 |
|:-:|:-:|
|  && |  AND |
| ｜｜  |  OR |
| !  |  NOT |

### 比較演算子
| 記号 | 意味 |
|:-:|:-:|
| ==  | 等しい  |
| ===  | 厳密に等しい  |
| !=  | 等しくない  |
| !==  | 厳密に等しくない  |
| >  | 大なり  |
| >=  | 以上  |
|  < | 小なり  |
| <=  |　以下  |

### 三項演算子
```javascript
(条件式) ? (Trueの場合の処理) : (Falseの場合の処理);
```
例
```javascript
let age = 21;
let message = age >= 18 ? "成人です" : "未成年です";
console.log(message); // 成人です
```

## 条件分岐
### if文
```javascript
if(条件式1) {
    // 条件式1がTrueの場合
} else if(条件式2) {
    // 条件式2がTrueの場合
} else {
    // 条件式1,2がFalseの場合
}
```

## ループ
### forループ
```javascript
for (let i = 0; i < 5; i++) {
    // i++とは、i = i + 1と同じ
    console.log(i); // 0 1 2 3 4
}
```

### whileループ
```javascript
let j = 0;
while (j < 5) {
    console.log("数値:", j); // 数値:0, 数値:1, 数値:2, 数値:3, 数値:4
    j++;
}
```

### do-whileループ
```javascript
// 最低1回は必ず処理する
let k = 4;
do {
    console.log("数値:", k);
    k++;
} while (k < 5);
```

### foreachループ
```javascript
let fruits = ["apple", "banana", "grape"];
fruits.forEach(function(value) {
    console.log(value);
});
// 出力結果:
// apple
// banana
// grape
```

## まとめ
var、let、constの使い分けでは、「スコープ」「再宣言」「再代入」「ホイスティング」の違いが混同しやすいため、慣れるまでは都度復習しながら使うようにする。
また、数値は文脈によってnumber型やstring型に変わる場合があり、型が厳密に設定されないのがJavaScriptの特徴であることを意識しておく。