JavaScript에서 변수 값으로 객체 속성을 동적으로 만드는 방법

JavaScript에서 객체 속성을 생성하거나 접근할 때 사용할 수 있는 표기법은 두 가지입니다. 바로 점 표기법(dot notation)과 대괄호 표기법(bracket notation)입니다.

점 표기법은 속성 이름이 미리 정해져 있을 때 편리하지만, 변수에 저장된 문자열 값을 속성 이름으로 사용할 수는 없습니다. 따라서 변수 값을 기반으로 객체 속성을 동적으로 만들려면 반드시 대괄호 표기법을 사용해야 합니다. 아래 예제를 살펴보겠습니다.

예제 1: 대괄호 표기법 사용하기

const obj = {a: 'foo'}
const prop = 'bar'
// 변수 prop에 담긴 값('bar')을 속성 이름으로 사용
obj[prop] = 'baz'
console.log(obj);

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

{
    a: 'foo',
    bar: 'baz'
}

ES6의 계산된 속성명(Computed Property Names)

ES6부터 도입된 계산된 속성명(computed property names) 문법을 사용하면 객체 리터럴을 선언하는 시점에 곧바로 변수 값을 속성 이름으로 지정할 수 있어, 코드를 한층 더 간결하고 직관적으로 작성할 수 있습니다.

예제 2: 계산된 속성명 사용하기

const prop = 'bar'
const obj = {
    // a를 키로 사용
    a: 'foo',
    // 변수 prop의 값을 키로 사용
    [prop]: 'baz'
}
console.log(obj);

출력 결과

위 코드 역시 앞선 예제와 동일한 결과를 출력합니다.

{
    a: 'foo',
    bar: 'baz'
}

정리

객체가 이미 존재하는 경우에는 obj[prop]처럼 대괄호 표기법으로 속성을 추가하면 되고, 객체를 새로 생성하는 상황이라면 ES6의 계산된 속성명 문법인 {[prop]: '값'} 형태를 활용하는 것이 가장 깔끔합니다. 두 방법 모두 변수에 담긴 문자열을 속성 이름으로 자유롭게 사용할 수 있다는 점이 핵심입니다.