본문 바로가기

카테고리 없음

es6 새롭게 추가된 기능

1. Arrows 함수

1) implicit return이 가능하다. 

 

3) argument 대신 args 사용.

(다시 확인 필요, 아래 블로그에서 쓰는건 rest 파라미터 기법인데..)

4) lexical scope을 생성하지 않고, 외부 scope에서 this를 계승 받는다.

출처: https://jeong-pro.tistory.com/110

 

2. Class 추가

객체 지향 패턴의 대체제

class Person {
  constructor(name){
    this.name = name;
  }

  sayName(){
    console.log(this.name);
  }

}

let person1 = new Person("H");
person1.sayName();

 

3. Enhanced Object Literals (객체 리터럴)

foo:foo 단축 표기법 / 메서드 정의 / 동적 속성 추가

[동적 속성 추가]

let stuObj = {};
for(let i = 0; i < 10; i++){
  stuObj["stuNum"+i] = `name${i}`;
}
console.log(stuObj);

4. Template Strings

`Hello ${name}`

 

5. Destructuring Assignment (비구조화 할당)

기존에 구조를 가지고 있던 객체를 파괴하여 별도의 변수에 값을 할당.

5.1 Array

//es6

const arr = [1,2,3]

const [one, two, three] = [arr];

//es5

const arr = [1,2,3];

var one = arr[0];

5.2 Object

const {name, age} = this.myInfo

 

6. Let + Const

var과 다르게 블록 유효범위를 갖는다. 

 

7. import/export

 

8. tail calls

마지막에 호출 되는 함수가 호출 스택이 초과되게 하지 않습니다. 

재귀 알고리즘의 안전성. 코딩테스트에서 ES5로 풀었는데 오류 나서 포기했던 부분. 

 

9. 매개변수에 default 값 적용 가능.

e.g.) es5

height = height || 50;

es5의 경우 값이 0 또는 falsse가 되어도 거짓, 따라서 기본값으로 대체. 

es6의 경우 undefined를 제하고는 모두 인정.

 

10. 멀티 라인

ES6에서 bak-ticked 문자열로 해결 가능.

 

11. 표준 Promise 제공

es5에서는 promise 존재하지 않았음.

wait1000()
	.then(function(){
		console.log("yay!");
		return wait1000();
	})
	.then(function(){
		console.log("hey!");
	})
	

[ES6 문법 정리]

https://jsdev.kr/t/es6/2944

https://blog.asamaru.net/2017/08/14/top-10-es6-features/(정리 짱 잘되어 있음)

https://blog.asamaru.net/2017/08/14/top-10-es6-features/