# JavaScript Refresher

###### tags: `Javascript, React`

# Understanding "let" and "const"


* var 目前不推薦使用
* let 主要取代 var 的功能，主要使用在 value 會改變時
* const 最大的差異在於被指派的 value 不能被重新指派

# Arrow Functions

解決了 this 關鍵字指向的問題

當你使用 arrow functions 並使用 this ，它會幫助其 this 的內容變得比較好預測


他們會產出一樣的結果

function printMyname(name){
    console.log(name);
}

printMyname('Max'); // Max 

const printMyname = (name) =>{
    console.log(name);
}

printMyname('Max'); // Max 

這邊來展示一些變化：

1. 當參數只有一個的時候可以省略參數的括號

const printMyname = name =>{
    console.log(name);
}

printMyname('Max'); // Max 

2. 當 function 只返回一個值或是函式時，可以省略 return 以及大括號

const mutiply = num => num*2;

console.log(mutiply(2)); //4

# Exports and Imports

因應模組化的 JS 必須使用 Exports and Imports 來達成這埸的效果，從一個 JS 檔案使用到不同的地點

## 範例

想要把這個 person 的變數使用在不同的檔案中就必須把它輸出 Export

person.js

const person = {
    name='Max'
};

export default person;

utility.js

const  = {
    name='Max'
};

export default person;


把他們都引入 app.js 內

幾個重點

1. default 的用處在於不管引入檔案寫的是什麼名字 person or prs ，都會是使用關鍵字 default 的那個內容也就是 const person
2. 可以看到 app.js 處理 utility.js 的部分使用大括號抓取出要使用的部分（名字必須一致）被稱為 named exports 當然也可以寫成一行 {baseData, clean} 來抓取


簡單分類一下：

* default export

你在引入檔案的部分怎麼命名都無所謂，因為引入的檔案已經設定好了，怎麼指派名字都一樣

* named export 就有幾種變化

1. 引入明確的檔案名稱（名字必須一樣）
2. 使用 as 關鍵字引入之後再指派給新的變數名稱
3. 使用 * 引入全部，並且使用關鍵字 bundle 來操作 例如， bundle.baseData 這樣的方式來使用

# Understanding Classes

> classes 基本上就是物件的藍圖


創造 class 會使用 class key word ，裡面包含了 property （就是變數）以及 method （就是 function ）


class 會透過 new key word 來做使用


class 透過 extends 來做繼承記得要繼承的那個 class 使用 `super()` 才不會報錯

class Person {
    construcor() {
        this.name = 'Max'
    }
    
    printMyName () {
        console.log(this.name)
    }
}

const person = new Person();
person.printMyName()

這樣得出來的結果就會是 "Max"

下面示範繼承的 class 用法

class Human {
    constructor() {
        this.gender = 'female';
    }
    
    printGender() {
        console.log(this.gender);
    }
}


class Person extends Human {
    super(); // 記得在要繼承的地方加上 super 
    construcor() {
        this.name = 'Max'
    }
    
    printMyName () {
        console.log(this.name)
    }
}

const person = new Person();
person.printMyName(); //Max
person.printGender(); //female

## Classes, Properties&Methods

這邊會介紹更簡潔更新的 class 寫法


* 原本的 constructor 寫法被改寫成直接指派變數即可
* 原本的函式寫法變成箭頭函示也讓 this 的問題變簡單

我們來改寫一下上方的範例

class Human {
    gender = 'female';
    
    printGender = () =>{
        console.log(this.gender);
    }
}


class Person extends Human {
    
    name = 'Max';// 這邊 super 可以省略
    
    printMyName = () => {
        console.log(this.name)
    }
}

const person = new Person();
person.printMyName(); //Max
person.printGender(); //female