ECMAScript는 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 넷스케이프의 자바스크립트와 MS의 J스크립트의 경쟁 구도 속에서 스크립트 언어 표준화가 요구되어 ES가 등장하게 되었다. 자바스크립트는 기본적으로 ES와 호환되지만 ECMA 규격에 포함되지 않는 확장 기능도 제공한다.
ES6는 여러 가지 강력한 기능을 제공하지만 구형 브라우저에서 호환되지 않는 부분이 있어 트랜스파일러로 컴파일되어야 한다.

1. var, let, const

var

ES5까지 변수를 선언할 수 있는 유일한 키워드로, 아래와 같은 특징이 있다.

• 함수 레벨 스코프
  블록 레벨이 아닌 함수 레벨 스코프 (예를 들어 for문에서 선언한 변수를 코드 블록 외부에서 참조 가능)
• var 키워드 생략 허용
• 변수 중복 선언 허용
  의도하지 않은 변수값 변경 가능성 높다
• 호이스팅
  변수를 선언하기 이전에 참조 가능

이러한 특징 때문에 전역 변수가 남발될 가능성이 높고, 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. (버그를 일으키기 쉽고 디버그도 어렵다) var 키워드의 단점을 보완하기 위해 ES6에서 let과 const 키워드가 도입되었다.

let

• 블록 레벨 스코프
• 중복 선언 금지
• 호이스팅은 일어나지만, var와는 달리 선언 이전에 참조는 불가능하다. 스코프 시작 시점에 변수가 선언되지만 초기화는 변수 선언문에 도달했을 때 이루어진다. (Temporal Dead Zone)

const

• let과 대부분 동일하다. (블록 레벨 스코프, 중복 선언 금지, 선언 이전 참조 불가)
• let과 가장 큰 차이점은 재할당이 금지된다는 것이다. 선언과 동시에 할당이 이루어져야 한다.
• 상수, 원시 값, 객체 선언에 적합하다
• const로 선언된 변수의 타입이 객체일 경우 참조(주소)는 변경하지 못하지만 객체 프로퍼티는 변경할 수 있다.
• let보다 안전하므로 변수는 일단 const로 선언하는 것이 좋다
  
  

2. Template literal

백틱 문자를 사용하는 새로운 문자열 표기법.

• 줄바꿈, 공백 허용
• • 연산자 사용하지 않고 문자열 연결 가능
    
    

3. 화살표 함수

function 키워드 대신 화살표를 사용한 간략한 함수 선언 가능

호출

• 익명 함수로만 사용할 수 있다. 따라서 함수 표현식을 사용하여 호출한다
• 콜백 함수로 사용할 수 있다

this

일반 함수의 this

함수가 선언될 때가 아닌, 함수가 호출되는 상황에 따라 this에 바인딩 되는 객체가 동적으로 결정된다

화살표 함수의 this

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 언제나 상위 스코프의 this를 가리키기 때문에 bind 메소드 등으로 this를 변경할 수 없다.

화살표 함수를 사용해서는 안되는 경우

• 메소드, 프로토타입, 이벤트리스터 콜백 함수: this가 화살표 함수를 호출한 객체가 아닌 상위 컨텍스트를 가리키기 때문에 화살표 함수를 사용해서는 안 된다
• 생성자 함수: prototype 프로퍼티가 없기 때문에 생성자 함수로 사용할 수 없다
  
  

4. 매개변수 기본값

인수를 전달하지 않았을 때만 유효한 매개변수 기본값을 사용할 수 있다.

function sum(x = 0, y = 0) {
  return x + y
}

console.log(sum(1)) 	// 1
console.log(sum(1,2))	// 3

5. Rest Parameter

나머지 매개 변수. 함수에 전달된 인수의 목록을 배열로 전달 받는다. 함수에 전달된 인수는 순차적으로 파라미터와 Rest 파라미터에 할당된다. 그러므로 Rest 파라미터는 반드시 마지막 파라미터여야 한다.

function foo(param1, param2, ...rest) {
  console.log(param1)	// 1
  console.log(rest)		// [3,4,5]
}

foo(1,2,3,4,5)

가변 인자 함수의 경우 Rest 파라미터로 가변 인자 목록을 배열로 전달 받을 수 있다. 화살표 함수로 가변 인자를 구현해야 할 경우는 반드시 Rest 파라미터를 사용해야 한다.

6. Spread 문법

이터러블한 대상을 개별 요소로 분리한다

함수 인자에 사용

function foo(x, y, z) {
  console.log(x)	// 1
  console.log(y)	// 2
  console.log(z)	// 3
}

const arr = [1,2,3]
foo(...arr)

배열에 사용

기존 배열의 요소를 새로운 배열 요소에 사용하거나, 유사 배열 객체를 배열로 변환하기에 간편하다. 원본의 각 요소를 얕은 복사하여 새로운 복사본 생성한다.

7. 객체 리터럴 프로퍼티 기능

• 프로퍼티 값으로 변수를 사용하는 경우 프로퍼티 이름 생략 가능 (프로퍼티 이름은 변수 이름으로 자동 생성)
• 객체 리터럴 내부에서 프로퍼티 키를 동적으로 생성 가능
• 메소드 선언시 function 키워드 생략 가능
• 객체 리터럴 내부에서 '__proto__' 프로퍼티를 설정 가능
  
  

8. Destructuring

배열이나 객체 리터럴에서 필요한 값만 추철하여 변수에 할당, 반환할 때 사용

배열

인덱스 기준으로 할당

const arr = [1,2,3]
const [one, two, three] = arr
console.log(one, two, three)	// 1 2 3

객체

프로퍼티 이름(키) 기준으로 할당

const obj = {first: 'ya', last: 'nolja'}
const {last, first} = obj
console.log(first, last)	// ya nolja


const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

const completedTodos = todos.filter(({ completed }) => completed);
console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } ]

9. 클래스

10. 모듈

ES6의 모듈 기능을 사용할 경우 파일 단위 모듈로 자바스크립트가 동작한다. (모듈 스코프가 생성된다) 모듈 기능을 사용하지 않을 경우는 분리된 자바스크립트 파일이라도 하나의 전역을 공유한다.
아직은 웹팩 등의 모듈 번들러를 사용하는 것이 더 일반적이다.

11. 프로미스 Promise

콜백 패턴의 단점을 보완하기 위한 새로운 비동기 처리 패턴

생성

프로미스 생성자 함수를 통해 인스턴스화 한다. 생성자 함수는 비동기 작업 수행할 콜백 함수를 인자로 전달 받고, 콜백 함수는 resolve와 reject 함수를 인자로 전달 받는다.
resolve는 비동기 작업 수행 성공시, reject는 실패시 호출된다. 프로미스는 비동기 처리 상태 정보를 갖는다. (pending 비동기 처리 수행 이전, fulfilled 비동기 처리 수행 성공, rejected 비동기 처리 수행 실패, settled 비동기 처리가 성공이나 실패로 수행됨)

후속 처리

then

두 개의 콜백 함수를 인자로 전달 받는다. 첫 번째 콜백 함수는 fulfilled state, 두 번째 콜백 함수는 rejected state에서 호출된다. 프로미스를 반환한다.

catch

에러가 발생하면 호출된다. 프로미스를 반환한다. catch 메소드를 모든 then 메소드 호출 이후 호출하면 비동기 처리 뿐만 아니라 then 메소드 내부에서 발생한 에러도 캐치할 수 있다.

chaining

여러 개의 프로미스를 연결하여 사용함으로써 콜백 헬을 해결한다.