---
# System prepended metadata

title: JavaScript ES6
tags: [' Web API', Web Directory, ' canvas', ' JavaScript']

---

---
title:  JavaScript ES6
tags: Web Directory, JavaScript, Web API, canvas
description: ES6 syntax, extension
---
{%hackmd U6g0skbVTIyVdJhvWCgo2Q %}



# <span class="big-title">ES6</span>
- what is ES6?
    - ECMAScript 6 -> ECMAScript is used to standardize javascript
- Appeded in ES6
    1. Classes
    2. Arrow functions
    3. Variables (let, const, var)
## <span class="intext-title">Class</span>
- Before, we use `function` to define class
    - Now with `class` keyword, we can define class like what we do in other Language
- Keywords
    - class
    - constructor
    - static
    - extends
    - super

### <span class="intext-point">Constructor</span>
```javascript=
class People{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    
    introduction() {
        return `Hello, I am ${this.name}, I am ${this.age} year old.`
    }
}

leo = new People("Leo", 19);
document.write(leo.introduction());
```
> assign properties inside the `constructor()` method

### <span class="intext-point">Inheritance</span>
- use `extends` keyword
- use `super()` method to invoke parent's constructor
```javascript=
class Student extends People{
    constructor(name, age, id){
        super(name, age);
        this.id = id;
    }
    
    introSelf(){
        return `this.introduction() My id is ${this.id}.`
    }
}
```

### <span class="intext-point">Static</span>
- keyword `static` can help people to biild static method in class
    - it can only be called by class itself
```javascript=
class Calculator{
    static addtion(x, y){
        return x + y;
    }
}

alert("Calculator(1, 2)");
```


## <span class="intext-title">[Arrow Fucntion](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions)</span>
```javascript=
hello = function(){
    alert("Hello");
}

hello = () =>{
    alert("hello");
}
```
- use for shorter the grammer of function
- Cant be used in constructor

### <span class="intext-point">Arrow Function with Params</span>
```javascript=
hello = (name) => {
    alert("Hello, I am " + name + ".");
}
```

### <span class="intext-point">Directly Return </span>
```javascript=
// One Parameter
hello = name => `Hello, I am ${name}.`;

// Multiple Parameter
hello = (name , age) => `Hello, I am ${name}, I am ${age} year old.`
```

### <span class="intext-point"><span class="important">Meaning of `this`</span></span>
- in normal function , `this` in functiuon will represent the **caller**

- in arrow function, `this` in funciton will represent the **object** which defined this arrow function

## <span class="intext-title">Variable</span>
- `let`
    - *block* scope
- `var`
    - *function* scope
- `const`
    - *block* scope

### <span class="intext-point"><span style="font-style: italic;">Block</span> scope and <span style="font-style: italic;">function</span> scope</span>

- Block Scope -> `let`, `const`
    - variable will live in block section
    - cant be access outside the block
    - ex: in **for** loop

- Function Scope -> `var`
    - section restrict variables are **Funciton**
    - if use `var` outside of a function, that variable will become a global variable
    - if use `var` inside of a fucntion, that variable will belong to that function and cant be accessed out of it.
