TIL_171026 ES6 Destructuring

Destructuring

  • 객체디스트럭처링의 경우 가독성뿐만 아니라 편리함까지 (추천)
  • 중첩해야할 일이 있다면 축약표현 말고, {키:밸류} 구조를 가져가야함
1
2
3
4
5
6
7
8
9
10
function margin() {
  const left = 1, right = 2, top = 3, bottom = 4;
  return { left, right, top, bottom };
}
// 축약이 가능함
//{ left: 1, right: 2, top: 3, bottom: 4} 의미와 같음
const { left, bottom } = margin();
console.log(left, bottom); // 1 4

클래스

  • 문법적 설탕: 클래스는 ‘함수’ (생성자일떄 의미가 있음)
  • let, const와 같이 호이스팅 되지 않는 것처럼 동작
  • -> 선언문 이전에 호출하면 Temporal Dead Zone에 걸려 에러 발생
  • 클래스 바디 내부에는 메소드들만 옴 ( 컨스트럭터 (생성자함수 자신)역시 메소드)
  • -> 따라서 프로퍼티는 반드시 컨스트럭터 내부에 선언

  • 생성자함수로 쓸 경우 반드시 new연산자 붙임 (에러 발생)

  • 클래스 내부 constructor는 생략가능 -> 암묵적으로 빈객체 생성 -> 클래스를 쓰는 의미가 없어짐

  • 클래스 내부에 선언한 멤버변수는 public (정보은닉 최대약점 -> typescript(접근제한자))
  • 멤버변수명에 _을 붙인 것은 public으로 취급하지 않도록 하라는 암묵적 개발자합의
  • -> 이때는 getter, setter로 변수에 접근하기

멤버변수

  • 메소드를 제외한 데이터
  • 객체리터럴 프로퍼티와 의미하는바가 같음
  • 클래스에선 프로퍼티란 명칭대신 멤버변수라 사용
  • 클래스바디에 멤버변수 선언X (오직 메소드만)
  • 멤버변수는 constructor 내부에만 사용!
    1
    2
    3
    4
    5
    6
    7
    8
    9
    class Foo {
      constructor(name) {
        this.name = name; // OK
      }
    }
    const foo = new Foo('Lee');
    console.log(foo.name); // Lee

getter, setter

  • get은 멤버변수의 값을 가져옴
  • get: 반환 값이 있으므로 리턴해줘야
  • set은 멤버변수의 값을 설정
  • set: 인자가 있어야 설정가능 -> 파라미터가 있어야함
  • 프로퍼티처럼 참조 (호출문에 () 사용X)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Foo {
  constructor(arr = []) {
    this._arr = arr;
  }
  // getter: firstElem은 멤버 변수 이름과 같이 사용된다.
  // getter는 반드시 무언가를 반환하여야 한다.
  get firstElem() {
    return this._arr.length ? this._arr[0] : null;
  }
  // setter: firstElem은 멤버 변수 이름과 같이 사용된다.
  //설정 -> 즉, 인자가 있어야 (파라미터)
  set firstElem(elem) {
    this._arr = [elem, ...this._arr];
  }
}
const foo = new Foo([1, 2]);
// 멤버 변수 firstElem에 값을 할당하면 setter가 호출된다.
foo.firstElem = 100;
console.log(foo.firstElem); // 100

정적 메소드

  • 정적메소드가 없다면 무조건 객체를 생성(new)해야만 메소드를 사용할 수 있게됨 (생성자함수명.prototype.method)
  • -> 내부데이터를 변경하지 않는 이상 정적 메소드 사용하는 것이 편리

클래스 상속

1. Extends

  • 사용: class 자식 extends 부모
  • 부모클래스를 확장하여 자식클래스를 만듦
  • 즉, 자식클래스의 prototype은 부모클래스

![클래스 프로토타입 체이닝] (http://poiemaweb.com/img/class-prototype-relation.png)

  • class 상속 선언만 했다고 인스턴스가 생기진 않음
  • -> 자식 class로 만들어진 인스턴스는 상속관계를 유지하려면 부모class로 만들어진 인스턴스가 있어야 함 (super)
Super
  1. 자식클래스 컨스트럭터 선언시 사용
  • 부모클래스의 컨스트럭터(멤버변수)를 호출 -> 생성될 인스턴스 상속관계 유지(this)
  • super를 컨스트럭터 내 최상단 위에 써줘야, 하단의 this가 바인딩됨
  • this가 먼저나오면 부모 인스턴스가 생성되지 않은 상태이기 때문에 바인딩 안됨
  • this를 사용하고싶다면, 컨스트럭터 선언시 상단에 사용해야함
  1. 자식클래스 메소드에 사용
  • 부모클래스를 가리킴

[배경]
자바스크립트는 파일을 쪼개서 html파일에 넣었다해도, alert 1, 2, 3 등 실행되는데 순서가 있을 순 있으나, 스코프는 쪼개지지 않는다. 즉, 3개의 파일일지라도 1개의 스코프를 갖게됨 -> 자바스크립트는 순서가 중요하며, 전역스코프를 피해야 함. 그렇다면 파일별 스코프를 갖게 할 순 없을까?

Module

  • 파일단위 스코프를 가짐
  • ES6에서 import / export키워드로 모듈 지원 -> 모든 브라우저가 지원X -> Webpack & Barbel 사용
  • Barbel : ES5로 트랜스파일링
  • Webpack : 바벨 구동 및 모듈파일 번들링

promise

  • 비동기식함수의 리턴을 할 수 없어서 생기는 콜백헬, 에러처리 불가능 문제를 해결하기 위한 하나의 방법
  • Promise를 사용하면 요청을 취소할수 없다는 단점이 있음
  • promise기능의 최신 -> RxJs (Angular)
  • promise 자체도 ‘값’을 반환할 순 없지만, ‘약속’을 반환
  • 후속코드에 서버가 ‘약속’을 지켰을 경우(fulfilled)의 실행, 못 지켰을 경우(rejected)의 실행을 지정

오늘의 느낀점

백지상태에서의 todo list 연습을 해봐야겠다. 부분별로 ES6로 변환 해 나가기 시작하면서 혼란스러워지는 느낌. 바닐라로 주말동안 연습해봐야될듯. 그래야 스무스하게 ES6를 흡수할 수 있을 듯.