ES6+(EcmaScript2015+) 정리(ing)

ES6+(ECMAScript2015+)

var

헷갈릴수 있는 녀석이다.

앞으론 어지간해선 쓰지말자.

let

Block( {} ) 단위 스코프 변수

const

Block( {} ) 단위 스코프 상수

단 값 재할당은 안되지만 Object내의 값은 바꿀수 있음.

class 와 getter setter

class Product {
    constructor() {
        this._id = null;
    }
    get id() {
        return this._id
    }
    set id(id) {
        if (!!id && !isNaN(id) && !Number.isInteger(id))
            throw new Error('id must integer');
        this._id = id;
    }
}
class newProduct extends Product {
    constructor() {
        super();
    }
    getId() {
        return `Id is ${this.id}`;
    }
}

Default Parameter

function print(value = "hello world"){
    console.log(value);
}

Spread operator(펼침연산자)

내용을 하나씩 풀어 대입해준다.

function f(x, y, z) {  
    return x + y + z;  
}    
const args = [1, 2, 3];  
  
f.apply(this, args);  // ES5  
f(...args); // ES6
​
const numList1 = [1,2,3];
const numList2 = [4,5,6];
const numList3 = [...numList1, ...numList2]; //[1,2,3,4,5,6]
​
​
const user = { "name" : "gildong" };
const diffUser = { ...user, "age" : 40 }; //{ "name" : "gildong", "age" : 40 }

Destructuring assignment

Object

const user = { "name" : "gildong", "age" : 40, "path" : "pangyo" };
const { name, age, path : address, company = "무직" } = user;
//path를 address로 rename
//company에 default Value 추가.
​
// 때에 따라 이렇게 사용하기도 한다.
function sum({a, b}) { 
    return a + b;
}
const values = { a : 10, b : 20};
sum(values)

Array

const numList = [1, 2, 3, 4, 5, 6, 7, 8];
const [first, second, ,four, ...rest] = numList;
console.log(rest); //[5, 6, 7, 8]
// ...rest와 같이 사용하는 것을 rest operrator 라고 함.

Arrow function(화살표 함수)

lambda 표현식으로 함수를 정의할 수 있다. 아래 함수는 모두 동일한 일을 한다.

function sum(a, b) {
    return a + b;
}
const sum = (a, b) => { return a + b }; 
const sum = (a, b) => a + b; // {}를 감싸기 않으면 자동으로 return 을 한다.
​
// 인수가 하나인 경우 아래와 같이 () 제외할 수 있다.
const double = d => d * 2;

Arrow function의 경우 함수가 정의된 시점이 this가 됨. 즉 화살표 함수를 감싸는 스코프를 this로 계승 받음.

var userName = "둘리";
let user = {
  "userName" : "gildong", 
  func : function() { 
    setTimeout(function() {
      console.log("func", this, this.userName); // func, window, 둘리
    },1000); 
  },
  arrowFunc() { 
    setTimeout(() => {
      console.log("arrowFunc", this, this.userName); // arrowFunc, user, gildong
    },1000);
  }
}
user.func(); // function으로 정의된 callback의 경우 Window를 가리킴
user.arrowFunc(); // user가 정의된 이후 callback이 실행됨으로 this가 user object를 가리킴
​
let user2 = {
  "userName" : "gildong", 
  func : function() { 
    console.log("func", this, this.userName); // func, user2, gildong
  },
  arrowFunc : () => { 
    console.log("arrowFunc", this, this.userName); // arrowFunc, window, 둘리
  }
}
​
user2.func(); // object method인 경우 호출자로부터 this를 전달 받음.
user2.arrowFunc(); // 정의 시점에 user2는 정의 전이므로 this는 window 가 된다

Property value shorthand

const id = 10;
const obj = { id };  // { "id" : id } 과 같다.

String

템플릿 문자열(backtick), backtick을 통한 multiline 제공

const message = "world";
​
console.log(`hello ${message}
javascript`)

Map

key, value 구조로 데이타 저장. 잘 알고 계시는

const names = new Map();
​
names.set("철수", 1);
names.set(2, "영희");
names.keys(); // MapIterator {"철수", 2}
names.values(); // MapIterator {1, "영희"}
names.size; // 2
names.has("철수"); // true
names.delete("철수"); //true

WeakMap

Map은 원시 타입, 객체 참조값 모두 키로 사용할 수 있으나 WeakMap은 객체 참조값만 사용가능하다.

포인트는 내부에 저장된 객체를 참조하는 값이 없을 경우 가비지 콜렉션의 대상이 된다.

이터러블 규약을 따르지 않아 열거할 수 없고 크기를 알수 없다.

개인적으로 어디에 쓸지 잘 모르겠다.

let wm = new WeakMap();
​
function func(){
    const someObj = {};
    wm.set(someObj, 1);
    wm.has(someObj);
    console.log(wm);
}
​
func();
console.log(wm);

Set

유일한 데이타를 저장하기 위해서 사용한다.

특이한 점은 Object의 경우 참조값이 들어가게 된다.

따라서 아래 예제와 같이 {}을 넣으면 동일한 값이지만 참조값이 다르므로 추가된다.

const keySet = new Set();
keySet.add("10");
keySet.add("20");
keySet.add(20);
keySet.add({});
keySet.add({});
// "10", "20", 20, Object, Object
keySet.has(20); // true
keySet.delete(20); // true
keySet.size; // 4
​
keySet.clear();

WeakSet

Set은 원시타입과 객체참조값 모두 담을수 있지만 WeakSet은 객체 참조값만 담을 수 있다.

WeakMap처럼 이터러블 규약을 따르지 않는다.

내부에 저장된 값을 참조하는 값이 없을 때는 가비지 콜렉션 대상이 된다.

Generator

절차적 처리를 위해서 사용하며 제너레이터 함수의 yield 의 수만큼 순차적으로 값을 반환한다.

function* action(url){
    
}
function* generator_function() {
  let a = yield 12
  let b = yield a + 1
  let c = yield b + 2
  yield c + 3
}
​
let generator = generator_function()
​
console.log(generator.next().value)   // 12
console.log(generator.next(5).value)  // 6
console.log(generator.next(11).value) // 13
console.log(generator.next(78).value) // 81
console.log(generator.next().done)    // true

Promies

콜백헬 방지

작성중.....

Async await(es7)

비동기를 동기처럼 작동시킴

작성중....