ES6는 가장 자바스크립트에서 급변하게된 부분이다. 이후에 ES는 전부 ES6라고 통칭한다고 한다. 어쨌든 이번에는 ES6를 살펴보자.
화살표함수
=> 로 사용할수 있으며 함수와 달리 this가 함수 스코프에 바인딩되지 않고 랙시컬스코프(어디에서 호출했는지가 아니라 어디에서 선언되었는지에 따라 결정되는 스코프)를 가진다.
즉, 자신을 감싸는 코드와 동일한 this를 공유하며 표현식과 문에서도 사용이 가능하다.
클래스
프로토타입 기반의 객체지향 패턴을 쉽게만든 장치.
상속과 생성자 및 인스턴스와 정적메서드등을 지원한다.
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}향상된 객체 리터럴
객체 리터럴로 객체를 만들때 프로퍼티 지정을 좀 더 유연하게 할 수 있도록 기능이 확장되었으며,
템플릿 문자열
복잡한 문자열을 쉽게 만들어주고 문자열 안에 문자열 및 변수도 넣을 수 있고 여러줄의 문자열도 가능하게한다
// 문자열 안에 문자열 사용하기
`In JavaScript '\n' is a line-feed.`
// 여러 줄 문자열
`In JavaScript this is
not legal.`
// 문자열과 변수
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`비구조화
배열과 객체의 패턴 매칭을 통해 바인딩을 하는 기법.
구조분해할당 이라고도 한다.
// 배열 매칭 let [a, , b] = [1,2,3];
// 객체 매칭
let { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// 객체 매칭을 단축해서 사용
// op, lhs, rhs가 스코프 내에서 바인딩됨
let {op, lhs, rhs} = getASTNode()
// 매개변수 위치에도 사용 가능
function g({name: x}) {
console.log(x);
}
g({name: 5})
// Fail-soft 비구조화 (Fail-soft는 고장이 나도 작동하도록 짠 프로그램을 말한다)
let [a] = [];
a === undefined;
// 기본 값이 있는 Fail-soft 비구조화
let [a = 1] = [];
a === 1;
#### 기본값 과 Rest + Spread
기본값 = 주어지는 값이 없을 때 초기화 시키는것.
rest문법 = 명시한 변수 외에 나머지를 배열로 가져오는 것.
spread문법 = 배열을 펼치는 역할!!
#### let, const
이전에 사용되어왔던 var와는 다르게 ,
블록 스코프를 가지고 재선언이 불가, 선언이전에 사용할 수 없다.
#### 반복자(Iterator) 과 for...of
반복자는 자신만의 반복을 정의하는 규약이고 이는 for...of를 통해 순회가 가능하다.
[Symbol.iterator]이라는 이름의 메서드를 정의해야하고, 이 메서드는 반드시 next()메서드를 가진 객체를 반환해야한다.
```js
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
}
}
}
}
for (let n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}제너레이터
반복자를 쉽게 생성해 주는 것.
funciton* 과 yield를 사용.
반복자의 하위타입으로 next와 throw를 포함한다....
모듈
import로 모듈을 불러오고, export로는 모듈을 내보낼 수 있다.
Map,Set, WeakMap, WeakSet
자주쓰이는 자료구조. Weak가 붙은 것은 가비지 컬렉션을 허용하며 size프로퍼티를 가지지 않는다.
// Sets
let s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
let m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
// Weak Maps
let wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
let ws = new WeakSet();
ws.add({ data: 42 });
// WeakSet에 들어간 객체가 어떠한 참조도 가지지 않으므로 가비지 컬렉션이 된다.
심볼
새로 추가된 원시타입.
객체의 접근 제어를 가능하게한다. description 매개변수를 이용해 디버깅이 가능하며 Object.getOwnPropertySymbols 를 통해 객체의 심볼 프로퍼티들을 볼 수 있다.
Number, String, Array에 추가된것.
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // 유사배열객체를 배열로 변환
Array.of(1, 2, 3) // [1,2,3][0, 0, 0].fill(7, 1) // [0,7,7][1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]["a", "b", "c"].entries() // 반복자 [0, "a"], [1,"b"], [2,"c"]["a", "b", "c"].keys() // 반복자 0, 1, 2
["a", "b", "c"].values() // 반복자 "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) }) // 얕은 복사
#### 프로미스
비동기 작업이 마주치게될 미래의 완료/ 실패와 결과 값을 나타내는 객체.