디스트럭처링
배열의 요소나 객체의 속성을 배열 리터럴이나 객체 리터럴과 비슷한 문법을 이용해서 변수에 할당할 수 있다.
객체 복사
- Object.assign을 주로 쓴다
- JSON.stringify(?) 꼼수.
Object.assign
- static 메서드
- 가변인자함수(매개변수가 여러개 올 수 있음)
- ({}, 매개변수1, 매개변수2…)
{}로 복사본을 만들 수 있음,
매개변수1에 매개변수2…가 merge됨
배열 디스트럭처링
- 배열의 요소를 추출해서 변수리스트에 할당한다.
- 추출/할당의 기준은 index
- [x, …y] = [1,2,3,4]; spread 연산자는 매개변수의 마지막에 올 수 있고, 그런 경우에sms 할당된 요소의 남은 갯수만큼의 배열이 생성된다. result => y = [2 ,3 ,4];
객체 디스트럭처링
- 프로퍼티 이름(키)이 같은 것을 가져온다.
- todo.filter(({completed})) => {…})
- forEach(({id, content, completed}) => {…})
- 위처럼 객체 디스트럭처링을 하며 ${todo.id} -> ${id}로 사용할 수 있다.
- const { … } 형태
- 참고) _변수명 : 내부에서만 쓰는 변수(private), 외부에서 참조할 수 없음, 문법x
클래스
- ES6 class는 접근 제한자를 지원하지 않는다.
- constructor와 메서드만 올 수 있다.
- 프로퍼티는 constructor 내부에 선언할 수 있다.
- 메소드 내부에서 프로퍼티를 접근할 때는 this를 사용한다.
- 내부에서는 클래스가 Function(생성자)이다.
멤버변수
- 값을 함수로 가지고 있는 변수 -> 메소드 -> “멤버변수”
- constructor 내부에서만 선언할 수 있다.( this.name = name, 반드시 this 사용)
- 즉, constructor의 지역 변수
- pubilic, 외부에서 접근할 수 있다.
클래스의 호이스팅
- let, const와 같다.
- 선언문 이전에 호출하면 에러
예) const foo = new Foo(); //Reference Error
getter, setter
- get(set) 메서드(){…}
- getter는 프로퍼티처럼 쓴다.
- get firstElem(){return…}
- console.log(foo.firstElem);
- setter는 return이 없고 값을 할당한다.
클래스 상속
- super :부모클래스의 contsructor 호출 (상속받을 constructor)
- 인자가 있다. 현재 클래스에 없는 변수(아마 부모 클래스의 멤버변수일 듯)를 상속받을 때 해당변수를 인자로 써준다.
- super 호출이 없으면 this가 없다.
모듈
- 관련성이 있는 것들을 모아둔 파일이 분리된 형태
- html에서
<script src=''>로 js파일을 불러들이는 경우, 파일마다 독립적인 scope가 없고, 전역(window)이 하나이다. - npm
- 파일이 분리된 모듈 형태로 쓰려면 webpack을 사용해야 한다.
- ES6 모듈은 export,import 키워드를 지원하지만, 모든 브라우저에서 지원하지 않는다.
- export,import 키워드만 지정, 표준x, 스펙이 없어서 쓸 수 없다.
에러 처리의 한계 (비동기) -> Promise
- 비동기 함수에선 error가 catch 되지 않는다.
- Promise를 사용하여 에러 처리의 한계 극복