ECMAScript2016,2017,2018

09 Apr 2018

Reading time ~3 minutes

JavaScript (ECMAScript) 의 새로운 기능을 추적하는 것은 어렵습니다.
그리고 유용한 예제코드를 찾는 것은 더욱 어렵습니다.

아래에서는 ES2016, ES2017 및 ES2018 (최종 초안)에 추가 된
TC39의 완성 된 제안서에 나열된 18 가지 기능을 모두 다루고 유용한 예제로 보여줍니다.

하나씩 살펴 보겠습니다.

ECMAScript 2016

1. Array.prototype.includes

includes 는 Array에 간단한 인스턴스 메서드이며
찾고있는 항목이 Array에 있는지 (indexOf와는 달리 NaN 포함) 쉽게 찾을 수 있도록 도와줍니다.

const arr = [1, 2, 3, 4, NaN];

if(arr.indexOf(3) >= 0) {
  console.log(true);
}

if(arr.includes(3)) {
 console.log(true);
}

arr.includes(NaN); // true
arr.indexOf(NaN); // -1

2. Exponentiation infix operator (지수 중위 연산자)

더하기와 빼기와 같은 수학 연산에는 각각 +와 - 같은 삽입 연산자가 있습니다.
그것들과 마찬가지로 ** 삽입 연산자는 일반적으로 지수 연산에 사용됩니다.
ECMAScript 2016에서는 **가 Math.pow 대신 도입되었습니다.

Math.pow(7, 2) //49
7**2 //49

ECMAScript 2017

1. Object.values()

Object.values()는 Object.keys()와 비슷하지만
프로토 타입 체인의 값을 제외한 Object 자체 속성의 모든 값을 반환하는 새 함수입니다.

const cars = { BMW: 3, Tesla: 2, Toyota: 1};

//ES2015
const vals = Object.keys(cars).map(key => cars[key]);
console.log(vals); //[3, 2, 1]
//ES2017
const values = Object.values(cars);
console.log(values); //[3, 2, 1]

2. Object.entries()

Object.entries()는 Object.keys와 관련이 있지만
키만 반환하는 대신 배열 방식으로 키와 값을 반환합니다.
이렇게하면 루프에서 객체를 사용하거나 객체를 map으로 변환하는 작업을
매우 간단하게 수행 할 수 있습니다.

Example 1 ~~~javascript const cars = {BMW: 3, Tesla:2, Toyota:1 };

//ES 5.1 const vals = Object.keys(cars).map(key => cars[key]); console.log(vals); //[3, 2, 1]

//ECMAScript 2017(ES8) for (let [key, value] of Object.entries(cars)) { console.log(key: ${key} value: ${value}); } //key: BMW value: 3 //key: Tesla value: 2 //key: Toyota value: 1

* Example 2
~~~javascript
const cars = {BMW: 3, Tesla:2, Toyota:1 };

//ES2015
const map1 = new Map();
Object.keys(cars).forEach(key => {
  map1.set(key, cars[key]);
});

console.log(map1);  //Map(3) {"BMW" => 3, "Tesla" => 2, "Toyota" => 1}

//ES2017 and onwards
const map = new Map(Object.entries(cars));

console.log(map);  //Map(3) {"BMW" => 3, "Tesla" => 2, "Toyota" => 1}

3. String padding

2개의 인스턴스 메소드가 String에 추가되었습니다.

String.prototype.padStart
String.prototype.padEnd
원래 문자열의 시작 또는 끝 부분에 빈 문자열이나 다른 문자열을 appending/prepending 할 수 있습니다.
```
//'someString'.padStart(numberOfCharcters [stringForPadding]);
'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
```
이것은 예쁘게 인쇄 된 디스플레이 나 터미널 프린트와 같은 시나리오에서 문자열을 정렬하고자 할 때 편리합니다.

new

4. Object.getOwnPropertyDescriptors

이 메서드는 주어진 객체의 모든 속성에 대한 모든 세부 정보 (getter get 및 setter set 메서드 포함)를 반환합니다.
이것을 추가하는 주된 동기는 객체를 다른 객체로 얕은 복사/복제 할 수 있도록 허용하는 것입니다.
이 객체는 Object.assign과 달리 getter 및 setter 함수도 복사합니다.

Object.assign은 원본 소스 객체의 getter 및 setter 기능을 제외한 모든 세부 정보를 복사합니다.

아래의 예제는 Object.defign과 Object.getOwnPropertyDescriptors와
Object.defineProperties와의 차이점을 보여 주며,
원래 객체 Car를 새로운 객체 ElectricCar에 복사합니다.
Object.getOwnPropertyDescriptors를 사용하면 discount getter 및 setter 함수도 대상 객체에 복사됩니다.

BEFORE… ~~~javascript var Car = { name: ‘BMW’, price: 10000000, set discount(x) { this.d = x; }, get discount() { return this.d; } };

console.log(Object.getOwnPropertyDescriptor(Car, ‘discount’)); // {get: ƒ, set: ƒ, enumerable: true, configurable: true} const ElectricCar = Object.assign({}, Car);

console.log(Object.getOwnPropertyDescriptor(ElectricCar, ‘discount’)); // {value: undefined, writable: true, enumerable: true, configurable: true}

* AFTER…
~~~javascript
var Car = {
  name: 'BMW',
  price: 10000000,
  set discount(x) {
    this.d = x;
  },
  get discount() {
    return this.d;
  }
};

const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));

console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount'));
// {get: ƒ, set: ƒ, enumerable: true, configurable: true}

javascript