(ECMAScript) ES2017(ES8)의 변화 1/2

강좌18 - ECMAScript - 7년 전 등록

ES2017(ES8)의 변화 1/2

안녕하세요~ 2017년이 되었습니다. 따라서 ES2017이 나왔습니다.

사실 ES2017하면 async/await이 제일 먼저 떠오르죠. Promise 급의 중대한 변화입니다. 하지만 async/await 외에도 몇 가지 바뀐 점들이 있습니다. 오늘은 그것들에 대해 알아보고, 다음 시간에 async/await에 대해 알아보겠습니다.

Object

Object.values(객체)

Object.keys에 대응되는 메소드입니다. 객체의 enumerable한 속성값들만 배열로 만들어줍니다. 함수형 프로그래밍을 하는 데 도움이 될 거 같습니다. 또 하나의 반복문이 더 생긴 셈이니까요.

let obj = {
  a: 'hello',
  b: 'zero',
};
Object.values(obj); // ['hello', 'zero']

Object.entries(객체)

Object.keys와 Object.values를 합쳐 놓은 메소드입니다. enumerable한 속성명과 속성값을 2차원 배열로 만들어줍니다. 역시 함수형 프로그래밍을 하는 데 도움이 됩니다.

let obj = {
  a: 'hello',
  b: 'zero',
};
Object.entries(obj); // [['a', 'hello'], ['b', 'zero']]

Object.getOwnPropertyDescriptors(객체)

getOwnPropertyDescriptor과 유사한 메소드가 추가되었습니다. 뒤에 s가 붙은 거 보니까 모든 속성 설명들을 보여줄 거 같네요. OwnProperty이기 때문에 상속받지 않은 속성들의 설명만 보여줍니다. getOwnPropertyDescriptor에 대한 설명은 자바스크립트 강좌 Object의 메소드 편에 있습니다. 프로그래머는 DRY해야하므로 다시 적지 않겠습니다. (~~사실 귀찮아요~~)

Object.getOwnPropertyDescriptors(obj);
/*
{
  a: {
    configurable: true,
    enumerable: true,
    value: 'hello',
    writable: true,
  },
  b: {
    configurable: true,
    enumerable: true,
    value: 'zero',
    writable: true,
  },
}
*/

String

단순한 편의 기능이 추가되었습니다. 문자열에 패딩을 넣는 기능입니다.

문자열.padStart(최종길이, 보충문자열)

문자열 앞 부분에 공백이나 글자를 넣을 수 있습니다. 그래서 최종 길이로 만들어줍니다. 보충문자열을 설정하면 빈 칸에 그 문자열이 들어가고 (최종 길이를 채울 때까지 무한반복) 없으면 그냥 띄어쓰기들이 들어갑니다. 기존 문자열 길이보다 최종 길이 값이 작을 경우 최종 길이를 무시하고 기존 문자열을 반환합니다.

'zero'.padStart(10); // '      zero' (빈칸 6글자 + zero 4글자)
'zero'.padStart(10, 'babo'); // 'babobazero' (baboba 6글자 + zero 4글자)
'zero'.padStart(6, 'babo'); // 'bazero'
'zero'.padStart(3); // 'zero' (원래 길이보다 최종 길이가 작으면 원래 상태로)

문자열.padEnd(최종길이, 보충문자열)

padStart와 같지만 문자열 뒷 부분에 공백이나 글자를 넣을 수 있습니다.

'zero'.padEnd(10); // 'zero      '
'zero'.padEnd(10, 'babo'); // 'zerobaboba'
'zero'.padEnd(6, 'babo'); // 'zeroba'
'zero'.padEnd(3); // 'zero'

Trailing commas in function

영어를 모르셔도 됩니다. 함수의 인자나 매개변수 마지막에 콤마를 붙여도 된다는 겁니다. 다음과 같이요

function A(a, b, c,) {} // 선언 시
A('a', 'b', 'c',); // 호출 시

이렇게요. 그런데 왜 이것을 허용하는 지 모르겠죠? 이것은 Git같은 버전 관리와도 관련이 있습니다. 코딩을 하다보면 가끔 인자가 길어지는 경우가 있습니다.

A(
  'a',
  () => {
    console.log('hello');
  } // 여기에 콤마를 안 붙였다고 생각해봅시다.
);

위의 경우 5번째 줄 마지막에 콤마를 안 붙였다면

A(
  'a',
  () => {
    console.log('hello');
  },
  () => {
    console.log('zero');
  }, // 이렇게 마지막에 콤마를 붙이면 다음 인자가 더 들어올 것을 대비할 수 있습니다.
);

위와 같이 인자를 하나 더 추가했을 때 Git같은 버전 관리 툴을 썼을 때 새로 추가한 678번째 줄 외에도 5번째 줄도 변경된 것으로 나옵니다. (콤마 하나 추가) 5번째 줄은 코드 관리 상 별로 의미 없는 줄인데 콤마 하나 붙었다는 이유로 Git에 변경 내역이 추가되는 거죠. 사람들은 이게 좀 비효율적이라고 생각해서 마지막에 콤마를 붙이는 것을 허용합니다.

비슷한 사례로 객체 리터럴이 있습니다. 객체 리터럴은 원래부터 마지막 콤마를 지원했습니다. ESLint같은 린트 도구에서는 마지막 콤마를 장려합니다. 사실 저도 아까부터 객체 마지막 속성에 콤마를 붙이고 있었습니다. 눈치 못 채셨죠? 다시 위로 올려서 Object 메소드들 코드를 봐 보세요.

{
  a: 'hello',
  b: 'zero', // 이렇게 마지막에 콤마를 붙여줍시다.
}

버전 관리를 용이하게 하기 위함이라 딱히 큰 의미는 없습니다. 콤마를 붙이는 것과 같이 버전 관리용 습관으로 코드 마지막 줄은 빈칸으로 남겨두는 것도 있습니다. 이것은 ESLint를 사용하시면 왜 그렇게 하는지 알 수 있습니다.

이상으로 ES2017 변화 1편을 마칩니다.

조회수:

ZeroCho Blog

게시글