Progate +α メモず【JavaScript】

# はじめに
JavaScript編です！！ホームグラウンド！！帰ってきた！！
メモは基本少なくなるはず。ただclassは触れたことないのでそこかな？
# メモず
## 変数 `let` と定数 `const` の違い
### 変更できるかどうか？
Progateの説明だと、「`let`は変更できて、`const`は変更できない」です。

さて、普通にコーディングするにあたっては、この理解である程度間違いないです。
特にRUNTEQではRuby中心になると思うので。
### `const` はけっこう変更できる。
ただ、`const`は結構変更できます。
**ざっくり言うと、「`const`の配列・オブジェクトの中身は変更可能」です。**
[信じてたのに裏切られた気分（JSのconstは変更可能←）](https://qiita.com/kohki_takatama/items/a3035c025f30d185a9db#comment-2bfa8ce16e109733c4a3)
今月頭に書いた記事です。`const`でも変更可能な例が載っています。
### なぜ？どんなとき？：プリミティブ型と参照型、`let` と `const` 
なぜ？どんなとき？に変更可能なのか。それは、「プリミティブ型」と「参照型」、`let`と`const`に分けるとわかりやすいです。
#### プリミティブ型
「言語によって設定されている、最初からあるデータ型」
「定義にほかのデータ型を用いない独立したデータ型」のことです。
例：整数型（int）、浮動小数点型（float）、文字型（char）、真偽型（boolean）など
#### 参照型
「データがどこにあるか、どのくらいの長さ（`length`）あるか」を記録しています。
それ自身にはデータを保存せず、「リンク」を保存しているイメージです。
なお、「どこにあるか」というと、通常は「ここから」「ここまで」をイメージしますが、JSオブジェクトの場合は「ここから」のみを記録しています。
例：配列・オブジェクト
#### 表で見てみる
繰り返しになりますが、ざっくり「`const`の配列・オブジェクトの中身は変更可能なんだな」と知っていただければ9割OKです。

|  |  | プリミティブ型 | 参照型 |
| ---- | ---- | ---- | ---- |
| let | 例 | 可能：`let num = 1; num = 2` | 可能：`let num_obj = {key: 1}; num_obj = {newKey = 2} ` |
|  | 説明 | 自身の中身を変更できるため、変更できる。 | 自身の中身を変更できるため、どこにあるかを変更できる |
| const | 例 | 不可能：`const num = 1; num = 2` | 不可能：`const num_obj = {key: 1}; num_obj = {newKey: 2} `<br>可能：`const num_obj2 = {key: 1}; num_obj2.key = 2`<br>可能：`const num_obj3 = {key: 1}; num_obj3.newkey = 2` |
|  | 説明 | 自身の中身を変更できないため、変更できない。 | 自身の中身は変更できないため、どこにあるか（完全な入れ替え）は変更できない。<br>ただし、参照先での変更は防げない。また、プロパティの追加・削除も |

### イミュータブル教の方へ
もし、関数型プログラミングなどに熱心で、「完全なイミュータブルにしたい！」というイミュータブラーな方がいれば、以下をお読みください。
[JSで完全なイミュータブルは難しいが、知っておくとよいこと](https://qiita.com/kohki_takatama/items/74593fb91b070c8b83e4)

## `` ` ``と`'`と`"`
それぞれ
`` ` ``：バッククオーテーション
` ' `：シングルクオーテーション
` " `：ダブルクオーテーション
忘れがちなので。

## `class Class_name {}`：クラスの宣言
### `const instance_name = new Class()`：インスタンス生成
### `constructor() {}`：コンストラクタ
```js
class Class {
	constructor(name) {
		this.name = name;
		this.class = "class";
	}
	greet() {
		console.log("Hello");
	}
}
```
`this`で自身のプロパティを設定していく。
## `class new_Class extends parent_Class {}`：継承
## `super()`：オーバーライド

## インポート / エクスポート
### `export default name;`
エクスポートは関数・オブジェクト（クラスを含む）・プリミティブ値など、基本的になんでも可能。
### `default`以外：名前付きエクスポート
宣言時にエクスポートも書く
```js
// module.js

// 関数のエクスポート
export function myFunction() {
  // 関数の内容
}

// 変数のエクスポート
export const myVariable = 123;

// クラスのエクスポート
export class MyClass {
  constructor() {
    // クラスの構造
  }
}
```
あるいは、下部でまとめてエクスポート
```js
// 関数の宣言
function myFunction1() {
  // 関数の内容
}

function myFunction2() {
  // 関数の内容
}

// 下部で関数をまとめてエクスポート
export { myFunction1, myFunction2 };
```
インポート
```js
// 別のファイル
import { myFunction, myVariable, MyClass } from './module.js';

myFunction(); // 関数の使用
console.log(myVariable); // 変数の使用
const myClassInstance = new MyClass(); // クラスのインスタンス化
```
### `export default`と名前付きエクスポートの比較
#### インポート時
`default`は一意のため、インポート時にどんな名前をつけても構わない
```js
//export.js
const add = (x, y) => {return x + y}
export default add
```
```js
//import.js
import calc from "./export"
calc(2, 3) // return 5
```
一方、名前付きエクスポートは`as`文で任意の名前を付けることができる
```js
//export.js
const add = (x, y) => {return x + y}
export {add}
```
```js
//import.js
import {add as calc} from "./export"
calc(2, 3) // return 5
```
#### そのほか
１ファイル１エクスポートなら、`default`を使用するのが適している。
また、どの機能が主要かを表すのにも`default`が適している。
一方で、「名前を一致させないとインポートできない」名前付きエクスポートは、その点でむしろ明示的にインポートできるといえる。また、複数の要素をエクスポートする場合は、当然名前付きエクスポートを使用しなければならない。
### 再エクスポート
他のモジュールからエクスポートされた要素を、異なるモジュールから再度エクスポートすることも可能。
### `import name from "./filepath";`
`./filepath`の`.js`は省略可能
# 終わりに
さすがにホームグラウンドなんで、一番早く終わりましたね。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Progate JSやってて思うこと（愚痴消化）<br>・let numberなんて書かない（let num）<br>・ ; をつけ忘れても基本補完してくれる。必要なところは自分で書くし。<br>・手打ちならもっと短い変数名にしてくれ！！！それか補完機能つけてくれ！！！タイピングゲームになってる！！！</p>&mdash; たま / RUNTEQ53A (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1747400051469770998?ref_src=twsrc%5Etfw">January 16, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ちょっと疲れましたw 知ってることの確認をしながら、ひたすら手を動かした感じ。
ちゃんと`;`を打ち続けたのは何年振りか・・・・・・w
次はSQL！とりあえずProgateはいったん終わるのかな？
どうせなので、他のProgateカリキュラムも触ってみたい所存。