JavaScriptの基礎知識メモ1

## 定数
- 再代入不可の変数
```js
//再代入不可
const name = "sato"
``` 
## グローバル変数
- アクセス範囲の制限がない
```js
var name = "sato"

if(name){
    var name = "soma"
    console.log("local",name) //soma
}

console.log("global",name) //soma
```
## ローカル変数
- ifやforの外からアクセス出来ない
```js
let name = "sato"

if(name){
    let name = "soma"
    console.log("local",name) //soma
}

console.log("global",name) //sato
```
## テンプレート文字列
- 文字連結を"+"を使わずに出来る
```js
let name = sato
let text = hello

console.log(name + "," + text)

console.log(`${name},${text}`)

//結果は同じ
```
## 関数宣言
- 関数の巻き上げが可能
```js
logs(soma) //この時点で呼び出し可能

function logs(name) {
    console.log(`Myname is ${name}`)
}
```
## 関数式
```js
logs(soma) //この時点で呼び出し不可

const logs = function(name) {
    console.log(`Myname is ${name}`)
}
```
## デフォルト引数
- デフォルトの引数を設定できる
```js
const logs = function(name="soma", text="hello") {
    console.log(`${soma}, ${hello}`)
}

const defaultArg = {
    name : {
        first : "sato",
        second : "soma"
    },
    fruits : {
        first : "strawberry"
    }
}

function logActive(data = defaultArg) {
    console.log(`${data.name.first} like ${data.fruits.first}`)
}
```
## アロー関数
- シンプルに関数を書くことができる
- 式を書いた場合はreturn不要で、式の評価値を返す
- 関数ブロックを書いた場合はreturnで値を返す
- 独自のスコープを持たず、内側と外側でスコープを保持する
:::note
スコープ : 変数や関数にアクセスできる範囲
:::
```js
const loadFunc = firstName => `${firstName} です`

const loadFunc2 = (firstName, fruits) => `${firstName} is ${fruits}`
```
- オブジェクトを返却する場合
```js
const loadObj = (firstName, lastName) => ({
    first : firstName,
    last : lastName
});
```
### アロー関数のスコープ
- この場合、settimeoutのコールバック内でthisをloadObjオブジェクトを期待して呼び出す時、アロー関数を使う。
```js
const loadObj = {
    fruits : ["banana", "strawberry", "melon", "lemon"],
    print :function(delay = 1000) {
        settimeout(() => {
            console.log(this.fruits.join(", "))
        },delay)
    } 
}
```
## コンパイルについて
- 新しい構文を全てのブラウザで対応前に使いたい時、古い構文に変換すればブラウザ実行が可能となる、これをコンパイルまたはトランスパイルと呼ぶ。
- コンパイルするためのメジャーなツールに`Babel`がある。
## オブジェクトと配列
### デストラクチャリング
- オブジェクトを変数や引数として代入する時に取捨選択できる機能
```js
// 変数
const filter = {
    meet : "usi",
    name : "sato",
    drink : "Cola",
    fruits : ["banana", "strawberry", "melon", "lemon"]
}

const {meet, drink} = filter

// 引数 
// arg内のfirstNameを直に取ってきてる
const loadFunc = ({ firstName }) => {
    console.log(`${ firstName } is firstName`)
}

const loadFunc2 = ({ hobby : { game } }) => {
    console.log(`${ game } is god`)
}

const arg = {
    firstName : "sato",
    lastName : "ziro"
    hobby : {
        game : "switch",
        music : "bump"
    }
}

loadFunc(arg); //sato is firstName
loadFunc2(arg); //switch is god
```
### 配列のデストラクチャリング
```js
//配列の最初をとって来れる
const [firstFruits] = ["banana", "strawberry", "melon", "lemon"]

// 指定の配列の箇所をとって来れる
const [, , thirdFruits] = ["banana", "strawberry", "melon", "lemon"]
// thirdFruits = "melon"
```
## スプレッド構文
- `...`で表される構文
```js
// 配列の結合
const fruitsObj = ["banana", "strawberry", "melon", "lemon"]
const gameObj = ["dq", "ff", "kh", "pokemon"]

const mixObj = [...fruitsObj, ...gameObj]

// 先頭とそれ以外で分ける時
const [fisrt, ...other] = gameObj
```
## 非同期処理
### Promise
- 保留中、成功、失敗のいずれかの状態が帰ってくる
- `.then()`で結果を取れる
### async/await
- async関数内でawaitを使うとそこで同期的に動作させられる
## インポート/エクスポート
### ES2015
- `default`を使った単一exportと個々のexportがある
```js:func.js(exportする側のファイル)
export const message = text => `${text}`
export const alert = delay => settimeout(() => console.log(`警告`), delay)
```
```js:class.js(exportする側のファイル)
export class ExpClass {
    constructor(text, length){
        this.text = text
        this.length = length
    }
    
    print(){
        console.log(`${this.text}の文字数は ${length}です`)
    }
}
```
```js:index.js(importする側のファイル)
import {alert, message} from "./exp.js"
// {alert as A, message as B} のように別名でも可能

import smaple from "./class.js"
// 単一exportの時、名前は問われない
```
### CommonJs
- requireを使用
```js:func.js(exportする側のファイル)
const message = text => `${text}`
const alert = delay => settimeout(() => console.log(`警告`), delay)

module.export = { message, alert }
```
```js:index.js(importする側のファイル)
import {alert, message} = require("./func.js")
// {alert as A, message as B} のように別名でも可能
```