[JS] 객체 내 property를 동적으로 만들 수 있다?

여느 때와 같이 개발을 하던 중 다음과 같은 상황에 직면했습니다.

const input: {
    catId: number | null;
    dogId: number | null;
    fishId: number | null;
    counts: number;
    name: string;
} = /**/
const data: {
    catCounts?: number;
    catName?: string;
    dogCounts?: number;
    dogName?: string;
    fishCounts?: number;
    fishName?: string;
} = {};

if (input.catId) {
    data.catCounts = counts;
    data.catName = name;
} else if (input.dogId) {
    data.dogCounts = counts;
    data.dogName = name;
} else if (input.fishId) {
    data.fishCounts = counts;
    data.fishName = name;
}

 

cat, dog, fish 중 존재하는 종의 name과 counts를 data에 채운 후 추후에 update구문에 사용하는 것이 미션이었습니다.

직관적으로 코드를 작성한 후 잠시 고민에 빠졌습니다. 

 

cat, dog, fish만 동적으로 적용할 수 있다면 코드가 간결해질 수 있겠는데..

 

시간이 그리 많지 않은 상황이었기에 아쉬운 상황으로 코드리뷰를 진행하게 되었습니다.

하지만 이게 웬 떡인지 훌륭한 동료와의 코드 리뷰를 통해 해답을 찾게 되었습니다.

우선 그 적용의 결과는 아래와 같습니다.

 

const input: {
    catId: number | null;
    dogId: number | null;
    fishId: number | null;
    counts: number;
    name: string;
} = /**/

const kindPrefix = input.catId
  ? 'cat'
  : data.dogId
  ? 'dog'
  : data.fishId
  ? 'fish'
  : '';

const data: {
    catCounts?: number;
    catName?: string;
    dogCounts?: number;
    dogName?: string;
    fishCounts?: number;
    fishName?: string;
} = {
    [`${kindPrefix}Counts`]: counts;
    [`${kindPrefix}Name`]: name;
};

 

먼저번 예제에서 data 객체를 빈 객체로 만들어 놓은 것과 if 조건문을 통해 중복된 counts와 name을 반복하며 사용한 것을 개선했으면 좋겠다는 작은 아쉬움이 있었는데, 이 두 가지 문제를 한꺼번에 해결할 수 있었습니다.

 

위와 같이 square brackets([]) 안에 string, number, symbol, any값을 대입하여 동적으로 생성할 수 있는 property를 computed property라고 부른다고 하며 ES6문법에서부터 지원한다고 합니다. 아래와 같이 직접 typescript playground에서도 확인해 볼 수 있었습니다. 

computed property 의 name이 될 수 있는 타입들을 테스트 해보았다.

 

또한 아래와 같이 method name에도 위 문법을 사용할 수 있는 경우도 확인할 수 있었습니다.

let name = 'fullName';

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get [name]() {
    return `${this.firstName} ${this.lastName}`;
  }
}

let person = new Person('John', 'Doe');
console.log(person.fullName);

 

마치며

제가 유용하게 위 문법을 사용했던 것처럼 이 글을 참고하시는 분들도 유용하게 적용하실 수 있었으면 좋겠습니다.

 

출처

https://www.javascripttutorial.net/es6/javascript-computed-property/

JavaScript Computed Properties