2017년 10월 5일 목요일

ES6 Overview


  • let, const와 블록 레벨 스코프
    • let으로 블록 레벨 스코프 변수를 지정한다.
    • const로 상수를 지정한다.
    • 호이스팅은 되지만 일시적 사각지대에 의해 undefined가 아닌 에러가 발생한다.
    • for문에서 i를 사용할 때에도 클로저를 사용하지 않아도 된다.
  • 템플릿 리터럴
    • ` (backtick) 문자를 사용하여 템플릿 리터럴을 표기할 수 있다.
    • 템플릿 리터럴 안에 ', "를 모두 사용할 수 있다.
  • 화살표 함수
    • function 키워드 대신 화살표(=>)를 사용하여 함수를 선언할 수 있다.
    • arguments 프로퍼티가 없다.
    • rest 파라미터(...args)를 사용하여 가변인자를 함수 내부에 배열로 전달할 수 있다.
    • Arrow function은 자신만의 this를 생성하지 않고 자신을 포함하고 있는 컨텍스트로 부터 this를 계승 받는다.
    • 그래서 메소드 정의 시 Arrow Function을 사용하는 것은 피해야 한다.
    • Arrow Function은 prototype 프로퍼티를 가지고 있지 않다.
  • 기본 파라미터 초기값, Rest 파라미터, Spread 연산자
    • 파라미터에 초기값을 설정하여 함수 내에서 수행하던 파라미터 체크 및 초기화를 간편화할 수 있다.
    • Rest 파라미터는 Spread 연산자(…)를 사용하여 파라미터를 작성한 형태를 말한다. 
    • Rest 파라미터를 사용하면 인수를 함수 내부에서 배열로 전달받을 수 있다.
    • Rest 파라미터는 반드시 마지막 파라미터이어야 한다.
    • Spread 연산자(...[])는 연산자의 대상 배열을 개별 요소로 분리한다.
  • 객체 리터럴 프로퍼티 기능 확장
    • 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다.
    • 객체 리터럴 내에서 프로퍼티 이름을 동적으로 생성(Computed property name)할 수 있다.
    • 메소드를 선언에 function 키워드를 생략 가능하다.
    • 객체 리터럴 내부에서 __proto__ 프로퍼티를 직접 설정할 수 있다. 이것은 객체 리터럴에 의해 생성된 객체의 __proto__ 프로퍼티에 다른 객체를 직접 바인딩하여 상속을 표현할 수 있음을 의미한다.
  • 디스트럭처링
    • 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다.
    • 객체의 각 프로퍼티를 객체로부터 추출하여 변수 리스트에 할당한다.
  • 클래스
    • 새로운 객체지향 모델을 제공하는 것이 아니며 사실 클래스도 함수이고 기존 프로토타입 기반 패턴의 Syntactic sugar일 뿐이다.
    • new 연산자를 사용하지 않고 인스턴스를 생성하면 에러가 발생한다.
    • constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메소드이다.
    • 클래스 바디에는 메소드만을 포함할 수 있다.
    • getter는 어떤 프로퍼티에 접근할 때마다 프로퍼티를 조작하는 행위가 필요할 때 사용한다.
    • setter는 어떤 프로퍼티에 값을 할당할 때마다 프로퍼티를 조작하는 행위가 필요할 때 사용한다.
    • extends 키워드는 부모 클래스(Base class)를 상속하는 자식 클래스(Sub class)의 생성을 위해 클래스 선언에 사용된다.
    • super()는 부모 클래스의 constructor를 호출한다. 즉, 부모 클래스를 생성한다. 자식 클래스의 constructor에서 super()를 호출하지 않으면 ReferenceError가 발생한다.
    • super()를 호출하기 이전에는 this를 참조할 수 없다.
  • 모듈
    • 모듈이란 애플리케이션을 구성하는 개별적 요소로서 구현된 세부 사항을 캡슐화하고 공개가 필요한 API를 외부에 노출하여 다른 코드에서 로드하고 사용할 수 있도록 작성된 재사용 가능한 코드 조각을 말한다.
    • 모듈 안에 선언한 모든 것들은 기본적으로 해당 모듈 안에서만 참조 가능하다. 만약 모듈 안에 선언한 항목을 외부에 공개하여 다른 모듈들이 사용할 수 있게 하고 싶다면 export해야 한다.
    • 선언된 변수, 함수, 클래스 모두 export할 수 있다.
  • 프로미스
    • 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백을 사용한다. 
    • 하지만 전통적인 콜백 패턴은 비동기 처리 중 발생한 에러의 예외 처리하기 곤란하고 여러 개의 비동기 로직을 한꺼번에 처리하는 것도 한계가 있다. 
    • ES6에서 비동기 처리를 위한 또 다른 패턴으로 Promise가 등장했다. 
    • Promise는 전통적인 콜백 패턴이 가진 단점을 일부 보완하며 비동기 처리 시점을 명확하게 표현한다.
  • 이터레이션 프로토콜(iteration protocol)과 for-of 루프
    • 이터러블(iterable)과 이터레이터(iterator)를 정의한 이터레이션 프로토콜(iteration protocol)이 추가되었다.
    • for-of 루프는 이터러블 객체를 순회한다. 
    • for-of 루프는 이터레이터의 next() 메소드를 호출하고 next() 메소드가 반환하는 객체의 done 프로퍼티가 true가 될 때까지 루핑한다.
  • 7번째 타입 심볼(Symbol)
    • Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한(immutable) 기본 자료형(primitive)이다.
    • 주로 객체의 프로퍼티 키(property key)로 사용한다.
    • Symbol은 Symbol() 함수를 통해 생성한다.
    • Symbol() 함수는 String(), Number(), Boolean()과 같이 래퍼 객체를 생성하는 생성자 함수와는 달리 new 연산자를 사용하지 않는다.
    • Symbol 값은 애플리케이션 전체에서 유일한 값이기 때문에 Symbol 값을 키로 갖는 프로퍼티는 다른 어떠한 프로퍼티와도 충돌하지 않는다.
    • Symbol() 함수는 매번 다른 Symbol 값을 생성하는 것에 반해, Symbol.for은 단 하나의 Symbol을 생성하여 여러 모듈이 공유하게 된다.
  • 제너레이터
    • 함수 블록을 한번에 실행하지 않고, 실행을 일시 중지했다가 필요한 시점에 다시 시작할 수 있는 함수이다.
    • 제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 구문을 포함한다.
    • 제너레이터 함수를 호출하면 함수 블록이 실행되는 것이 아니라, 제너레이터 객체를 반환한다.
    • 제너레이터 함수의 함수 블록을 실행하기 위해서는 제너레이터 함수가 생성한 제너레이터 객체의 next() 메소드를 호출한다. 
    • yield 구문은 next() 메소드을 일시 중지시킨다.

댓글 없음:

댓글 쓰기