ES8 (ES2017)

이번 포스팅에선 ES8 의 기능들에 대해 알아보도록 하겠습니다.

 

- Async functions

 

ES 에서 그간 추가된 스펙 중에 현재 자바스크립트 프로그래밍에서 가장 많이 쓰는 기능이 아닐까 싶습니다.

async functions 이 제공하는 syntax 를 통해 훨씬 향상된 비동기 프로그래밍이 가능케 되었습니다.

 

const test1 = () => {
  return new Promise(resolve => {
    resolve(3);
  });
};

(async () => {
  const result = await test1();
  console.info(result); // 3
})();

 

async 함수에선 await 키워드를 사용할 수 있고, await 는 전달된 promise 의 해결을 기다리는 역할을 합니다.

async 가 없으면 await 키워드는 유효하지않고 SyntaxError 를 던집니다.

 

const test1 = () => {
  return new Promise((resolve, reject) => {
    reject(5);
  });
};

(async () => {
  try {
    const result = await test1();
    console.info(result);
  } catch (err) {
    console.error('ERROR', err); // ERROR 5
  }
})();

 

기존 거부된 promise 를 catch 구문에서 처리할 수 있었던 것 처럼, await 에 전달된 promise 가 거부된 경우엔 try - catch 로 할 수 있습니다.

 

const test1 = async () => {
  return 1;
};

(async () => {
  const result1 = test1();
  console.info(result1); // Promise { 1 }
  
  const result2 = await test1();
  console.info(result2); // 1
})();

 

async 함수는 항상 promise 를 반환하게 되어있습니다. 명시적으로 promise 를 반환하지 않더라도, 암묵적으로 promise 가 감싸지게 됩니다. 따라서 위처럼 test1 함수를 await 없이 호출했을 땐 promise 객체 상태를 받게 됩니다.

확실히 이전까진 promise 를 통해 callback hell 을 없애도 .then().then()... 등의 구문이 길어지면서 가독성이 떨어지는 부분이 있었는데, async - await 를 통해 깔끔한 비동기 프로그래밍이 가능해졌습니다.

 

- Object.values

 

const test1 = { id: 1, name: 'tom', age: 40 };

console.info(Object.values(test1)); // [1, 'tom', 40]

 

파라미터로 전달된 객체의 값들로만 이뤄진 배열을 반환하는 Object 의 static method 입니다.

 

- Object.entries

 

const test1 = { id: 1, name: 'tom', age: 40 };

for (const [key, value] of Object.entries(test1)) {
  console.info(key, value);
  /*
    id 1
    name tom
    age 40
  */
}

 

파라미터로 전달된 객체의 key, value 쌍으로 이뤄진 배열을 반환하는 Object 의 static method 입니다.

 

- Object.getOwnPropertyDescriptors

 

const test1 = { id: 1, get age() { return 40; }};

console.info(Object.getOwnPropertyDescriptors(test1));
/*
  {
    id: { value: 1, writable: true, enumerable: true, configurable: true },
    age: {
      get: [Function: get age],
      set: undefined,
      enumerable: true,
      configurable: true
    }
  }
*/

 

이 메서드는 주어진 객체의 모든 descriptor 를 반환하는 Object 의 static method 입니다.

descriptor 는 value, writable, get, set, enumerable, configurable 를 가진 레코드입니다.

 

• value : 속성의 값
• writable : true 인 경우 속성의 값이 변경 가능한 상태를 의미
• get : 속성에 대한 getter 역할을 하는 함수, 정의되지 않은 경우엔 undefined
• set : 속성에 대한 setter 역할을 하는 함수, 정의되지 않은 경우엔 undefined
• enumerable : true 인 경우 열거 가능한 상태의 속성
• configurable : true 인 경우 객체의 descriptor 가 변경 및 삭제될 수 있는 상태를 의미

이 메서드는 지금까지 사용해본적은 없네요..

이 외에 새로운 메모리 모델에 대해 소개하고 있는데, 이 부분에 대해선 다른 포스팅에서 다뤄보도록 하겠습니다.