[Javascript] 객체 프로퍼티 이름에 대괄호를 넣어서 할당하는 경우

개발을 하면서 객체 프로퍼티 이름에 기존의 변수를 넣어서 할려고 했을 때 단순하게 넣어서 하려고 하면 에러가 발생한다

아래 예시를 보자

const tempKey = 'location'
const user = {
	name: 'sheep',
    tempKey: 'Seoul'
}
console.log(user) // {name: 'sheep', tempKey: 'Seoul'}

에러는 아니지만 우리가 key값으로 location을 원했지만 그냥 단순하게 tempKey라는 문자열로 인식하여 나오게 된다

그래서 이러한 경우에는 대괄호 표기법([])을 적용하여 동적으로 할당한다

📍 동적 키 할당 시 대괄호 표기법을 사용하면 객체 프로퍼티 이름을 변수나 표현식의 결과로 지정할 수 있게 만들어 준다

따라서 아래와 같이 코드를 작성해야 원하는 결과가 나온다

const tempKey = 'location'
const user = {
	name: 'sheep',
    [tempKey]: 'Seoul'
}
console.log(user) // {name: 'sheep', location: 'Seoul'}
console.log(user[tempKey]) // Seoul

console.log(user[tempKey]) 이 것처럼 대괄호 표기법으로 동적 키 할당 및 동적 지정이 가능하도록 만들어주는 것이다

추가 경우

const prefix = "level";
const obj = {
  [`${prefix}1`]: "beginner",
  [`${prefix}2`]: "intermediate",
};

console.log(obj); // { level1: "beginner", level2: "intermediate" }

계산된 프로퍼티를 사용할 경우 위와 같이 동일하게 대괄호 표기법으로 묶어서 할당해주면 된다