ES6 변경사항

1) 템플릿 문자열

ES6 이전에는 문자열 연결시에는 병합연산자(+) 사용

ES6 이후에는 백틱을 이용해서 표현

//ES6 이전
var string1 = "안녕하세요."
var string2 = "반갑습니다."

var greeting = string1 + ' ' + string2

//ES6 이후

var string1 = "안녕하세요."
var string2 = "반갑습니다."

var greeting = `${string1}  ${string2}`

2) 화살표 함수 지원

// 예전방식
var lordify = function(firstName, land) {
	return `${land}의 ${firstName}`
}

//ES6의 화살표 함수
var lordify = (firstName, land) => `${land}의 ${firstName}`


// 화살표 함수는 콜백함수의 this범위로 생기는 오류를 피하기 위해 bind() 사용해서 this객체를 전달
//addThis2는 this 전달, addThis3는 화살표 함수로 생략
class MyClass {
	value = 10
    constructor() {
    	var addThis2 = funtion(first, second) {
        	return this.value + first + second
        }.bind(this)
        var add3 = (first, second) => { this.value + first + second }
    }

파라미터가 1개이면 괄호 생략가능. return 값을 지정하면 return 문도 생략 가능

 

2) 구조분해 할당

- 같은 변수 이름이면 할당 가능, 원본 데이터는 변경되지 않음

var sandwich={
	bread:"더치 크런치",
    meat:"참치"
}

var {break, meat} = sandwich

파라미터도 구조분해 할당 가능

regularPerson = {
	firstName:'hy',
    lastName:'choi'
}

var lordify = ({firstName}) => {
	console.log(firstName)
}
loardify(regularPerson)

3) 스프레드 연산자

- 배열 조합 가능

var strNum1 = ["1", "2", "3"]
var strNum2 = ["4", "5", "6"]

var strNum3 = [...strNum1, ...strNum2]

 

4) Promise

- 비동기 동작을 다루기 위한 방법

 

5) 클래스

class Shape {
	static create(x,y) { return new Shape(x,y) }
    name = 'Shape'
    constructor(x,y) {
    	this.move(x,y)
    }
    move(x,y){
    	this.x = x
        this.y = y
    }
    area() {
    	return 0
    }
  }

var s = new Shape(0,0);
s.area()