JavaScript에서 문자열을 객체의 키(key)로 설정하는 방법

JavaScript에서는 문자열 변수를 객체의 키로 활용할 수 있습니다. 이때 핵심은 대괄호([]) 표기법, 즉 계산된 속성명(Computed Property Name) 문법을 사용하는 것입니다.

기본 개념

예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.

const keyName = 'username';

이 문자열을 객체의 키로 설정하려면 객체를 정의할 때 대괄호([]) 안에 문자열 변수를 넣어주면 됩니다.

const stringToObject = {
  [keyName]: 'David Miller'
};

대괄호 안에 변수를 사용하면 JavaScript가 해당 변수의 값을 평가하여 그 결과값('username')을 객체의 키로 지정합니다. 만약 대괄호 없이 keyName: 'David Miller'라고 작성하면, 문자열 그 자체인 'keyName'이 키가 되므로 주의해야 합니다.

전체 예제 코드

const keyName = 'username';
const stringToObject = {
    [keyName]: 'David Miller'
};
console.log("Your String Value=" + keyName);
console.log("Your Object Value=")
console.log(stringToObject);

실행 방법

위 프로그램은 Node.js 환경에서 아래 명령어로 실행할 수 있습니다.

node fileName.js

여기서는 파일명이 demo238.js라고 가정합니다.

실행 결과

PS C:\Users\Amit\javascript-code> node demo238.js
Your String Value=username
Your Object Value=
{ username: 'David Miller' }

추가 팁

객체 생성 이후에도 동일한 방식으로 동적으로 키를 추가하거나 수정할 수 있습니다.

const obj = {};
obj[keyName] = '새로운 값'; // 동적으로 키 추가
console.log(obj); // { username: '새로운 값' }

또한 ES6부터 도입된 이 계산된 속성명 문법은 표현식도 지원하므로, [`${prefix}_name`]처럼 템플릿 리터럴을 조합하면 더욱 유연하게 동적인 키를 만들 수 있습니다.