ECMAScript 2017

ECMAScript 2017 (ES8)에 추가된 일부 기능 정리

String.prototype.padStart()

현재 문자열의 시작을 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다.

const str1 = "5";

console.log(str1.padStart(2, "0"));
// expected output: "05"

const fullNumber = "2034399002125581";
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, "*");

console.log(maskedNumber);
// expected output: "************5581"

String.prototype.padEnd()

padStart() 메서드가 시작(좌측)을 다른 문자열로 채웠다면, padEnd()는 끝(우측)을 다른 문자열로 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다.

const str1 = "Breaded Mushrooms";

console.log(str1.padEnd(25, "."));
// expected output: "Breaded Mushrooms........"

const str2 = "200";

console.log(str2.padEnd(5));
// expected output: "200  "

Object.values

열거 가능한 자체 속성의 값의 배열을 반환한다.

const object1 = {
  a: "somestring",
  b: 42,
  c: false,
};

console.log(Object.values(object1));
// ["somestring", 42, false]

Object.entries

주어진 객체의 [key, value]쌍의 배열을 반환한다.

const object1 = {
  a: "somestring",
  b: 42,
};
console.log(Object.entries(object1));
// [['a', 'somestring'], ['b', 42]]

Generator

Generator는 Generator 함수의 인스턴스이며 Iterator 및 Iterable 인터페이스를 모두 준수한다.

Generator는 직접 인스턴스화 할 수 없으며, 대신 function*에서 인스턴스를 반활 할 수 있다.

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

image

Generator의 작동 방식

Generator 함수는 iterator를 사용하여 함수를 일시 중지하고 다시 시작한다.

그리고 Generator 함수 내부적으로는 함수를 일시 중지하기 위해 yield 키워드를 사용하며, Generator 함수에서 yield를 만나면 아래와 같은 iterator 객체를 반환(return)한다.

{value: x, done: bool}

아래 코드를 통해 확인해 보자.

function* myGenerator() {
  const one = yield "첫번째 yield 반환";
  console.log(one);
  const two = yield "두번째 yield 반환";
  console.log(two);
  return "all done";
}

const generator = myGenerator();

generator.next();
generator.next();
generator.next();

image