[JS] 객체 - key 값에 대괄호를 씌우는 이유

객체 리터럴을 이용해 객체를 만들 때 key에 대괄호를 사용하는 이유와 용도에 대해 배우다.

---

0. 글 작성 이유

프로젝트를 진행하던 도중 구글링하다 본 코드에서 객체 리터럴 방식으로 객체를 만들 때 key에 대괄호([key])를 씌우는 것을 봤다. 보통 같으면 이유없이 따라쳐서 코드가 잘 작동 되는지 확인하고 넘길텐데 내 성격은 그렇지않다. 나는 코드를 쓸 때 이 코드를 사용한 이유, 코드의 원리, 의도를 파악해야 직성이 풀린다. 그렇기때문에 key에 대괄호를 씌워서 사용하는 것에 대해 궁금해지기 시작했다.

1. 객체 리터럴 

let object = {
	key1 : 'value',
    	key2 : 'value2'
    }

객체 리터럴이란 객체를 표현할 때 중괄호 ( { } )를 사용하여 나타내는 방식이다.  객체를 만드는 가장 기본적인 방법이라고 생각한다.

 

2. key에 대괄호를 씌우는 이유

key에 대괄호를 씌우는 이유는 변수에 담긴 문자열을 key로 활용해야하는 상황이 있을 때 사용한다.

코드로 예를 보여주겠다.

let key = '변수지롱'

// 1. 대괄호 사용 X
let object = {
	key : key
    }
console.log(object)
// 출력 : { key : 변수지롱 }

// 2. 대괄호 사용 O
let object = {
	[key] : key
    }
console.log(object)
// 출력 : { 변수지롱 : 변수지롱 }

 

 

대괄호를 사용하면 변수에 저장된 값을 key로 사용할 수 있다. key값이 바뀌어야 하는 상황이라면 유용하게 쓰일 수 있다.