2017년 10월 4일 수요일

ES8 Overview

 ECMAScript2017 (es8) 주요 스펙

  • String padding
String.prototype.padStart(targetLength [, padString])
String.prototype.padEnd(targetLength [, padString])
    • 메소드를 호출하는 문자열의 길이를 주어진 targetLength에 도달하도록 하는 메소드
    • padString으로 전달된 문자열로 길이를 채울 수 있음
    • padString 값을 따로 전달하지 않는 경우 공백으로 문자열의 길이를 채움
    • padStarat의 경우는 문자열의 시작 부분에 값을 추가하여 문자열의 길이를 조정
    • padEnd는 문자열의 끝 부분에 값을 추가하여 문자열의 길이를 조정
    • targetLength의 크기가 함수를 호출하는 문자열의 길이보다 작을 경우 문자열의 길이는 변하지 않음
    • padString으로 넘겨진 문자열로 길이를 맞출 경우, 각각의 문자열에 대해서 채워지고 길이를 넘어가게 되면 버려지게됨

  • Object.entries(), Object.values()
Object.entries(obj);
Object.values(obj);
    • entries 함수는 파라미터로 전달된 객체의 key-value를 배열로 반환합니다.
    • values 함수는 파라미터로 전달된 객체의 value만을 배열로 반환합니다.

  • Object.getOwnPropertyDescriptors
const object = {"1": "one", "2":"two", "3": "three"};
Object.getOwnPropertyDescriptor(object, "1");
// {
//     value: "one",
//     writable: true,
//     enumerable: true,
//     configurable: true
// }
    • 주어진 객체 자신의 속성에 대한 속성 설명자(descriptor)를 반환
    • ES8에서는 .getOwnPropertyDescriptors를 제공하여 전달된 객체의 모든 프로퍼티에 대한 descriptor에 접근할 수 있음

  • 함수 매개 변수 목록에서 후행 쉼표
class Person {
    constructor(
        firstName,
        lastName,
        age,
    ) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}
    • 함수 매개 변수에서 후행 쉼표가 가능
    • 기존에는 syntax error 발생
    • 수정이 필요할 경우, 수정이 필요한 파라미터의 한 줄만 수정하면됨 
    • 함수를 호출할 때도 마찬가지로 후행 comma를 사용할 수 있음

  • Async functions 
/* Promise 사용 */
const fetchData = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('fetch complete!');
        }, 2000);
    });
};
console.log(`before`);
fetchData().then((data) => console.log(data));
console.log(`after`);
// console>
// before
// after
// fetch complete!

/* Async function 사용 */
const sayComplete = async () => {
    const message = await fetchData();
    console.log(`status: ${message}`);
}
console.log(`before`);
sayComplete();
console.log(`after`);
// console>
// before
// after
// status: fetch complete!
    • ES8부터 공식 release 되었음

댓글 없음:

댓글 쓰기