JavaScriptの基本的な機能について

# はじめに
React を実務で使用するために、現在 TypeScript を学習しております。
しかし、そもそもの JavaScript の理解が不十分だと判断し、アウトプットと備忘録のために投稿することにしました。
ES2015 以降に実装された書き方を中心にまとめています。
エディタは sandbox を使用しました。
内容に不備などございましたら、ご指摘いただけますと幸いです。

# 基本的な機能の一覧
## var の変数宣言
var は古い変数宣言の方法になります。
var での変数宣言は以下のように、上書きや再宣言どちらも出来てしまいます。
しかしプロジェクトが大きくなると、意図しないところで変数を上書き＆再宣言してしまう問題があるため、使用するには注意が必要です。

https://typescriptbook.jp/reference/values-types-variables/vars-problems

```javascript
var val1 = "var変数";
console.log(val1);

// varは上書きが可能
val1 = "var変数を上書き";
console.log(val1);

// varは再宣言が可能
var val1 = "var変数を再宣言";
console.log(val1);
```

```console:コンソール
var変数
var変数を上書き
var変数を再宣言
```

## let の変数宣言
ES2015 から導入された、後で書き換えることができる変数を定義する書き方です。
let の特徴として、上書きは可能ですが再宣言は不可能という制約があります。
```javascript
let val2 = "let変数";
console.log(val2);

// letは上書きが可能
val2 = "let変数を上書き";
console.log(val2);

// letは再宣言が不可能
let val2  = "let変数を再宣言";
console.log(val2);
// エラー
```

```console:コンソール
Error in sandbox:
```

## const の定数宣言
const も、ES2015　に導入されたものになります。
特徴としては、上書きと再宣言ともに不可という制約がある、厳密な宣言になります。
なお const は、val や let のような「変数」を定義するのではなく、「定数」を定義するという言い方になります。
数学で出てくる「定数」とも少しニュアンスが違いますので、その点もご注意ください。
```javascript
const val3 = "const定数";
console.log(val3);

// constは上書きが不可能
val3 = "const定数";
console.log(val3);
// エラー

// constは再宣言が不可能
const val3  = "const定数を再宣言";
console.log(val3);
// エラー
```

```console:コンソール
Error in sandbox:
```

以上のように、const には厳密な制約がかかっております。
オブジェクトを定義する時は、基本的に const しか使いません。
しかし、このような厳密な const でも、const で定義したオブジェクト内の値を変えることができたり、プロパティも追加できてしまいます。
```javascript
// constで定義したオブジェクトはプロパティの変更が可能
const val4 = {
  name: "佐藤一郎",
  age: 18,
};

val4.name = "田中太郎";
val4.address = "東京";
console.log(val4);
```

```console:コンソール
▼ {name: "田中太郎", "age": 18}
    name: "田中太郎"
    age: 18
    address: "東京"
```

## 配列
オブジェクトの時と同様に、const で定義しても中身の値を変えたり、追加（push）したりすることができます。

```javascript
// constで定義した配列はプロパティの変更が可能
const val5 = ['apple', 'orange'];
val5[0] = "grape";
val5.push('banana');
console.log(val5);
```

```console:コンソール
▼ (3) ["grape", "orange", "banana"]
    0: "grape"
    1: "orange"
    2: "banana"
````
実際に React の開発での宣言もほとんど const を使用していきます。
ここでは記述しませんが、React の中で動的に値が変わるものは state という別の定義を使用します。
ですので基本的には const を使用し、処理の中で上書きが必要な変数に関しては let を使用していく、というような流れになります。

https://ja.reactjs.org/docs/faq-state.html

## テンプレート文字列
ES2015 から、文字列の中に JavaScript の変数を従来より便利に埋め込めるようになり、コードも読みやすくなりました。

```javascript
const name = "佐藤一郎";
const age = "18";
// 「私の名前は佐藤一郎です。年齢は18歳です。」と出力したい

// 従来の方法
const message1 = "私の名前は"　+　name + "です。年齢は"　+　age + "歳です。";
console.log(message1);
// テンプレート文字列を用いた方法
const message2 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
```
```console:コンソール
私の名前は佐藤一郎です。年齢は18歳です。
私の名前は佐藤一郎です。年齢は18歳です。
```

## アロー関数
こちらも ES2015 で追加された、新しい関数になります。
function の記述が不要になり、「 => 」という記号で表現され、アロー関数という名前の由来になっています。
アロー関数内の処理が一行で終わるような場合には、「 { } 」と「 return 」の両方を省略することもできます。
ただし、ブラケットを「 { } 」で囲う場合に「 return 」を省略してしまうと、エラーになるため注意が必要です。

```javascript
// 従来の関数
function func1(str) {
  return str;
}
console.log(func1("func1です。"));

const func2 = function(str) {
  return str;
}
console.log(func2("func2です。"));

// アロー関数
const func3 = (str) => {
  return str;
}
console.log(func3("func3です。"));

const func4 = (str) => str;
console.log(func4("func4です。"));

const func5 = (num1, num2) => num1 + num2;
console.log(func5(10, 20));

```
```console:コンソール
func1です。
func2です。
func3です。
func4です。
30
```

# おわりに
分割代入やスプレッド構文、三項演算子などに関しては、後日改めて投稿したいと思います。

# 参考記事・教材

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://qiita.com/cheez921/items/7b57835cb76e70dd0fc4