ECMAScript 2017

JavaScript의 이름은 ES1, ES2, ES3, ES5, ES6부터 시작되었습니다.

하지만, ECMAScript 2016과 2017은 ES7과 ES8으로 불리지 않습니다.

2016년 이후로, 새로운 버전은 연도로 명명됩니다(ECMAScript 2016/2017/2018).

ECMAScript 2017의 새로운 기능

이 장에서는 ECMAScript 2017의 새로운 기능을 소개합니다:

  • JavaScript 문자열 채우기
  • JavaScript Object.entries
  • JavaScript Object.values
  • JavaScript 비동기 함수
  • JavaScript 공유 메모리

JavaScript 문자열 채우기

ECMAScript 2017은 두 개의 String 메서드를 추가했습니다:padStart 와 padEnd문자열의 시작과 끝에 채우기를 지원하기 위해.

인스턴스

let str = "5";
str = str.padStart(4,0);
// 결과는: 0005

직접 시험해 보세요

인스턴스

let str = "5";
str = str.padEnd(4,0);
// 결과는: 5000

직접 시험해 보세요

Internet Explorer는 문자열 패딩을 지원하지 않습니다.

Firefox와 Safari가 최초로 JavaScript 문자열 패딩을 지원한 브라우저입니다:

크롬 IE 파이어폭스 사파리 오페라
Chrome 57 에지 15 Firefox 48 Safari 10 Opera 44
2017년 3월 2017년 4월 2016 년 8 월 2016 년 9 월 2017년 3월

JavaScript 객체 항목을 추가했습니다

ECMAScript 2017은 객체에 새로운 Object.entries 메서드.

Object.entries() 메서드는 객체의 키/값 쌍 배열을 반환합니다:

인스턴스

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);

직접 시험해 보세요

Object.entries()는 객체를 반복문에서 사용하는 것을 간단하게 합니다:

인스턴스

const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}

직접 시험해 보세요

Object.entries()는 객체를 맵으로 변환하는 것을 간단하게 합니다:

인스턴스

const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));

직접 시험해 보세요

Chrome와 Firefox가 최초로 지원한 Object.entries 의 브라우저:

크롬 IE 파이어폭스 사파리 오페라
Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016 년 6 월 2016 년 8 월 2016 년 6 월 2017년 3월 2016년 10월

JavaScript 객체 값

Object.values 유사 Object.entries하지만 단일 차원 배열로 객체 값을 반환합니다:

인스턴스

const person = {
  firstName : "Bill",
  lastName : "Gates",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);

직접 시험해 보세요

Firefox와 Chrome가 최초로 지원한 Object.values 의 브라우저:

크롬 IE 파이어폭스 사파리 오페라
Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
2016년 10월 2016 년 8 월 2016 년 6 월 2017년 3월 2016년 10월

JavaScript 비동기 함수

대기 시간 초과

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

직접 시험해 보세요

파이어폭스와 크롬은 첫 번째로 비동기 JavaScript 함수를 지원하는 브라우저입니다：

크롬 IE 파이어폭스 사파리 오페라
크롬 55 에지 15 파이어폭스 52 사파리 11 오페라 42
2016년 12월 2017년 4월 2017년 3월 2017년 9월 2016년 12월