[ES6] 비동기 처리를 위한 Promise (XMLHttpRequest)

기존의 AJAX의 비동기 처리 패턴은 가독성이 떨어지고 예외 처리가 곤란했다.

ES5의 기존의 비동기 처리 패턴

위의 예제는 2번의 AJAX 호출이지만 실제로는 더 많은 경우도 많다. 또한 위의 2번의 AJAX에서 두번째는 첫번째가 성공한 경우에만 유효하다.

ES6의 Promise를 사용한 비동기 처리패턴

비동기 메소드가 프로미스 객체를 반환하면서 체이닝이 가능한데, 첫번째 request1이 성공할 경우 그 다음에 request2가 호출된다.

ES6란 무엇인가?

ECMAScript란 다양한 환경에서 운용가능한 확장성을 가지고 있는 자바스크립트의 코어스크립트 언어이고, JavaScript는 아래와 같이 나타낼 수 있다.

JavaScript = ECMAScript + DOM(Document Object Model) + BOM(Browser Object Model)

ES6은 2015년에 나온 버전으로 이전 버전과 큰 변화가 있다.

ES6의 특징

var 그리고 let, const

ES5에서 까지는 var라는 키워드를 사용했는데 이 녀석은 변수를 호이스팅(변수 선언부를 맨위로 끌어올림)하게 된다. 좀더 다른 방법으로 쉽게 이야기 하면 var의 유효 범위는 함수이고 let은 블럭({ .. })이다.

처럼 코트를 작성했다 친다면 실제로는 아래코드처럼 실행되는것이다.

물론 호이스팅을 막기 위해 ‘use strict’를 사용해도 되지만 고맙게도 ES6에서는 let과 const가 추가되었다. +_+

쉽게 풀어 보자면 let은 호이스팅이 안되는 변수 const는 상수라고 생각하면 되겠다.

let은 어디서 진가를 발휘할까? 다음과 같이 코드를 작성해보자.

결과는 호이스팅으로 인해 undefined이다. 하지만 let을 사용한다면..

결과는 “Global”이 출력된다.

디폴트 파라미터

ES5에서 함수에 넘겨주는 파라미터의 기본값을 위해서는 아래처럼 함수내부에서 따로 처리를 해주어야 했다.

하지만 ES6에서는 디폴트값을 매개변수 선언시 처리가 가능하다.

템플릿 리터럴

ES5에서는 문자열과 변수를 함께 활용할때 아래와 같이 사용한다.

하지만 ES6에서는 키보드의 ESC 키 아래에 있는 벡틱(`)키를 사용하여 아래처럼 사용할 수 있다.

클래스

ES6에서는 class키워드가 추가되어 ES5보다 명확하게 class를 정의하고 사용할 수 있다.