---
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>

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

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

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>

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>

hello = (name) => {
    alert("Hello, I am " + name + ".");
}

### <span class="intext-point">Directly Return </span>

// 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.