ES7, ES8 기능 정리(ECMAScript 7, ECMAScript 8)

* ES7 기능

1. 거듭 제곱을 쉽게 할 수 있습니다.

var i = 2
i **= 3 // 8이 출력됩니다.

 

2. 포함여부를 판별하는 includes 입니다.

//3이 있는지 찾습니다.
[1, 2, 3, 4, 5].includes(3) //true

//1이 첫번째에 있는지 찾습니다.
[1, 2, 3, 4, 5].includes(1, 0) //true

 

* ES8 기능

1. 문자 앞뒤 간격을 조절할 수 있습니다.

//앞으로 10칸
console.log("hello".padStart(10)) // "          hello"

//뒤로 10칸
console.log("hello".padEnd(10)) // "hello          "

 

2. key와 value로 되어있는 객체(json형식)에 대해서 손쉬운 반복문이 가능 합니다.

let datas = {
  data1 : "데이터1",
  data2 : "데이터2",
  data3 : "데이터3",
};


//#1. key와 인덱스를 통한 출력
Object.keys(datas).forEach((key, index) => {
  console.log(key, datas[key]);
});

//#2. 데이터만 출력
Object.values(datas).forEach((value) => {
  console.log(value);
});

//#3. 객체를 배열로 변환(key가 0번째, 데이터가1번째 순서로)
Object.entries(datas).forEach((value) => {
  console.log(value);
});

 

3. async, await

 - 프로미스(Promise)를 사용하는 객체에게 동기화를 통하여 기다리게 할 수 있습니다.

 - async는 기다려야하는 함수에게 붙여주며, await는 프로미스(Promise)가 실행되는 구간에 붙여줍니다.

 - 이러한 방법은 콜백 지옥, then 지옥에서 벗어나게 해 주지만 async를 통해 기능이 정체되므로 사용시에 성능에 대해 반드시 고려를 해야 합니다.

function endAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('끝~');
    }, 2000);
  });
}

async function waitPromiseFunction() {
  console.log('시작했습니다.');
  var result = await endAfter2Seconds();
  console.log('기다려준 상태로 끝났습니다 : ', result);
}

waitPromiseFunction();

 

ES7, ES8 문법에서의 주의사항으로는,

익.스.플.로.러에서는 동작을 안한다는 점 입니다..ㅠㅠ

그러므로 대부분의 개발자들이 이러한 좋은 기능을 사용하지 못하고 어쩔수 없이 예전방식만 사용하는게 아닌가 싶습니다.