ComputedPropertyName이란?

오늘 알게 됐는데, { [Date.now()]: { text: "" } } 처럼 Date.Now()같이 동적인 값을 객체의 key로 설정하고 싶을 때 대괄호로 묶는다. TypeScript에서 객체의 타입 지정해줄 때 { [key]: value }같은 형식으로 하는게 TypeScript 문법인 줄 알았는데 ES6 문법이었다🫢

 

사용 사례1. Date.now()처럼 겹칠 수 없는 id값을 동적으로 key값으로 부여할 때

const addToDo = (text: string) => {
  const item = { [Date.now()]: text };
  setToDo({...toDo, item});
}

 

사용 사례2. 인덱스 같은 부분을 지속적으로 증가시켜 key로 할당할 때

const prefix = 'prop';
let i = 0;

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
};

console.log(obj); // { 'prop-1': 1, 'prop-2': 2, 'prop-3': 3 }