<ES8> ES2017 Features

 

1. 소개

 - ES2017은 전년도에 발표된 ES2016보다는 많은 기능이 추가되었다. ES8로도 불리는 ES2017의 가장 큰 변화는 역시 async, await의 등장이다.

 

2. 기능

* Padding a String

 - 문자열에 패딩 메서드가 추가되었다. 

 

const month = "8";
const number = "1.2";

const padMonth = month.padStart(2, "0");
const padNumber = number.padEnd(5, "x");

console.log(padMonth); // 08
console.log(padNumber); // 1.2xx

 

 - padStart와 padEnd 모두 첫 번째 인자에 string 길이를 제한하고, 그 길이보다 모자란 부분을 두 번째 인자로 채우는 방식이다.

 

* Trailing Commas

 - 후행콤마, 즉 뒤에 반점을 넣을 수 있게 되었다. 기존에 객체에서도 마지막에 콤마를 붙일 수 있었는데, ES2017 부터는 함수 인자의 마지막에도 콤마를 붙일 수 있게 되었다.

 

myFunc(a, b, c,)

 

 - 하지만 도대체 왜 위와같은 것이 필요한가 싶기도 하다. 이 부분은 버전관리와 연관이 있다. 객체에서도 비슷한 상황이 일어나므로 아래의 예시를 참고해보자.

 

myFunc({x : 2 , y: 4} ,
  () => {} 
);

 

 - 위와 같이 인자가 긴 함수가 있다고 가정하자. 이 때, 마지막 인자로 숫자를 추가하기로 했다고 가정하자.

 

myFunc({x : 2 , y: 4} ,
  () => {} ,
  77777
);

 

 - 위에 수정된 코드를 보면 수정된 부분은 3, 4번째 줄이지만 버전관리툴은 반점이 추가된 2 번째줄도 변경되었다고 인지할 것이다. 이러한 부분이 비효율적이기 때문에 마지막에 콤마를 붙이는 것이다. 참고로 ESLint와 같은 도구에서는 객체리터럴에서 마지막 콤마를 장려한다.

 

* Object: entries & values

 - 기존에 Object.keys 만으로 객체를 순회할 수 있었다면, ES2017 부터는 entires와 values로 객체를 다양하게 배열로 만들 수 있게 되었다.

 

const obj = { a: 1, b: 2, c: 3 };

console.log(Object.values(obj)); // [ 1, 2, 3 ]
console.log(Object.entries(obj)); // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

 

 - 위 둘은 열거가능한(enumerable) 속성값들만 배열로 만들어준다.  

 

* getOwnPropertyDescriptors

 - 객체 속성들의 설명을 보여주는 메서드가 추가되었다. Own 에 걸맞게 상속받지 않은 속성들의 설명만을 보여주며, getOwnPropertyDescriptor의 확장버전이라 볼 수 있겠다.

 

const obj = { a: 1, b: 2, c: 3 };

console.log(Object.getOwnPropertyDescriptor(obj, "a"));
// { value: 1, writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
  a: { value: 1, writable: true, enumerable: true, configurable: true },
  b: { value: 2, writable: true, enumerable: true, configurable: true },
  c: { value: 3, writable: true, enumerable: true, configurable: true }
}
*/

 

* Async & Await

 - es2015에서의 promise 추가로 콜백지옥은 해결되었지만 프로미스 체인때문에 코드 복잡성은 해결되지 못했다. 하지만 ES2017에서 async 와 await의 추가로 프로미스 체이닝을 마치 동기적인 코드를 작성하듯이 비동기 로직을 쓸 수 있게 되었다.

 

function printMyInfo(userId) {
  fetch(`https://api.github.com/users/${userId}`)
    .then((res) => res.json())
    .then((res) => console.log(res));
}
printMyInfo(id);

 

 - 위 코드는 깃허브 아이디를 받아서 해당 아이디의 깃허브 유저 정보를 받아오는 함수를 작성한 것이다. 프라미스 체이닝을 통해 json으로 만든 후 출력되도록 하였다. 하지만 then이 2번이나 들어갔으며, 함수표현식의 반복으로 가독성이 떨어지는 코드가 되었다. 이를 async await으로 작성하면 아래와 같다.

 

async function printMyInfo(userId) {
  let response = await fetch(`https://api.github.com/users/${userId}`);
  response = await response.json();
  console.log(response);
}
printMyInfo(id);

 

 - 함수 앞에 async라는 키워드와 기다리고 싶은 부분에 await이라는 키워드만 각각 붙였을 뿐인데 마치 동기적인 코드를 작성하듯이 쓸 수 있게되었다. 게다가 코드의 가독성도 훨씬 나아진 것을 알 수 있다.

 

 

 

---

 

참고

 

 

ES8 - New Features

 

ES8 (ES2017) New Features - 변경점 총정리

 

(ECMAScript) ES2017(ES8)의 변화 1/2

 

프라미스 체이닝