JavaScript ES6 정리 - computed property, property enumeration order

이번 포스팅에서는 ES6에서 향상된 객체의 기능(computed property, property enumeration order)에 대해 알아보자!

computed property

한글로는 계산된 프로퍼티 명이라고 하는데 이름을 기억할 필요는 없다.

obj.'a b' = 'A B' 와 같은 할당은 될까?

물론 되지 않는다. .를 찍은 후 문자열은 올 수 없다.

위 방식은 obj['a b'] = 'A B' 이렇게 해결할 수 있다.

그럼 아래 예제는 어떻게 될까?

computed property 사용 전

var className = ' Class';
var obj = {
  'A' + className : 'A급'
}
/*
Result
Error
*/

뭔가 될 것도 같긴 한데 역시 Error를 출력하며 되지 않는다.

위와 같이 프로퍼티를 할당하고 싶다면 어떻게 해야 할까?

computed property 사용 후

const className = ' Class';
const obj = {
  ['A' + className] : 'A급'
}
obj['B' + className] = 'B급'; //대괄호 표기법
console.log(obj);
/*
Result
{ 'A Class': 'A급', 'B Class': 'B급' }
*/

기존의 대괄호 표기법은 객체가 선언된 후 나중에 프로퍼티를 추가할 때 사용했다.

하지만, ES6에서는 computed property를 사용하여 위와 같이 객체를 선언하는 순간에도 변수를 활용하여 프로퍼티를 할당할 수 있다.

아래 예제는 클로저를 활용한 예제인데 이런 방법도 있다는 정도로만 확인해보자!

const cnt = (function (c) {
  return function() {
    return c++;
  }
})(0)

const obj = {
  [`a_${cnt()}`]: cnt(),
  [`a_${cnt()}`]: cnt(),
  [`a_${cnt()}`]: cnt(),
}
console.log(obj);
/*
Result
{ a_0: 1, a_2: 3, a_4: 5 }
*/

property enumeration order

const obj = {
  c: 1,
  2: 2,
  a: 3,
  0: 4,
  b: 5,
  1: 6
}

const keys =[];
for (const key in obj) {
  keys.push(key);
}
console.log(keys);
/*
Result
[ '0', '1', '2', 'c', 'a', 'b' ]
*/

위 코드의 출력 결과를 보자!

숫자는 작은 순서대로, 문자는 들어간 순서대로 출력됨을 확인할 수 있다.

이를 고정된 프로퍼티 열거 순서(property enumeration order)라고 한다.

계속해서 다음 예제를 보자!

const obj ={
  [Symbol('2')] : true,
  '02': true,
  '10': true,
  '01': true,
  '2': true,
  [Symbol('1')] : true,
}
const keys = [];
for(const key in obj) {
  keys.push(key);
}
console.log(keys);
/*
Result
[ '2', '10', '02', '01' ]
*/

위 코드의 출력 결과는 무언가 예상과는 다르다. (Symbol은 나중에 자세히 다루고 지금은 대부분 열거 대상에서 제외된다는 점만 알아두자)

※ Reflect.ownKeys(target)로 Symbol을 출력 가능

숫자는 작은 순서대로, 문자는 들어간 순서대로 출력될 줄 알았는데 뭘까?

자바스크립트에는 아래와 같은 규칙이 있는데 이를 보고 위 코드의 출력 결과를 다시 고민해보자.

• number로 이루어진 문자열이면서 첫 글자가 0 이 아닌 경우는 숫자로 인식한다.

위 규칙으로 02, 01은 문자열, 10,2는 숫자로 인식됨을 알 수 있다.

그 결과, [ '2', '10', '02', '01' ]이 출력됨을 알 수 있다!

※ 객체를 프로그램에서 사용할 경우, 객체의 열거 순서가 다를 때 생기는 문제를 막기 위해 순서를 고정한다고 이해하자!

마지막으로 아래의 ES6 이전 문법에서는 열거 순서를 보장하지 않으니 알아두자.

• Object.keys()
• for in
• JSON.stringify()

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!